使用XMLHttpRequest发送Ajax请求

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en">
<head>
	<Metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
	<title></title>
	<scripttype="text/javascript"src="AjaxUtil.js"></script>
</head>
<body>
<scripttype="text/javascript">
	varurl='http://192.168.4.1:8082/Person/Detail';
	//AjaxUtil.addURLParam(url,'id',920);
	//AjaxUtil.addURLParam(url,'t',Math.random());
	varxhr=AjaxUtil.createXHR();
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4){
			if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
				alert(xhr.responseText);
			}else{
				alert('请求失败!'+xhr.status);
			}
		}
	}
	
	xhr.open('post',url,true);
	
	//设置请求头必须在open()方法之后，send()方法之前
	
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	//xhr.open('get',true);
	xhr.send("id=920");
</script>
</body>
</html>

XMLHttpRequest的readyState属性标识请求/响应过程的状态变化，有以下取值

0：未初始化，尚未调用open()方法

1：启动已调用open() 方法，尚未调用send() 方法

2：发送已调用send() 方法

3：接收：已接收到部分数据

4：完成：已接收到全部数据

每次readyState变化都会触发readystatechange事件，我们需要关注的是状态4

varAjaxUtil={

	//创建XMLHttpRequest对象，兼容IE7以下版本
	
	createXHR:function(){
		if(typeofXMLHttpRequest!='undefined'){
			returnnewXMLHttpRequest();
		}elseif(typeofActiveObject!='undefined'){
			if(typeofarguments.callee.activeString!='string'){
				varversions=['MSXML.XMLHttp.6.0','MSXML.XMLHttp.3.0','MSXML.XMLHttp'];
				vari,len;
				for(i=0,len=versions.length;i<len;i++){
					try{
						newActiveObject(versions[i]);
						arguments.callee.activeString=versions[i];
						break;
					}catch(ex){
					}
				}
				returnnewActiveObject(arguments.callee.activeString);
			}
		}else{
			thrownewError("浏览器不支持！");
		}
	}
	
	//为GET请求添加参数,addURLParam:function(url,name,value){
		url+=(url.indexOf('?')==-1)?'?':'&';
		url+=encodeURIComponent(name)+'='+encodeURIComponent(value);
		returnurl;
	}
	
}
//代码摘自Javascript高级程序设计Ajax部分

原文链接：https://www.f2er.com/ajax/164773.html

使用XMLHttpRequest发送Ajax请求

猜你在找的Ajax相关文章