前言
XMLHttpRequest为可扩展超文本传输请求,它是XML(可扩展标记语言),Http(超文本传输协议),Request(请求)三者结合起来的;XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页。当页面全部加载完毕后,客户端通过该对象向服务器请求数据,服务器端接受数据并处理后,向客户端反馈数据。
内容
使用方法:
- 建立XMLHttpRequest对象
- 注册回调函数
- 使用open方法设置和服务器端交互的基本信息
- 设置发送的数据,开始和服务器端交互
- 在回调函数中判断交互是否结束,相应是否正确,并根据需要获取服务器端返回的数据,更新页面内容
属性和方法:
方法 | 描述 |
---|---|
open(String method,String url,boolean asynch,String username,String password) | ①指定和服务器端交互的HTTP方法,URL地址及其他请求信息②其中method表示HTTP请求方法,之处所有HTTO的方法,一般使用“GET”,“POST”url表示请求的服务器的地址③asynch表示是否采用异步方式,true表示异步,false表示同步④后两个参数可以不指定,username和password分别表示用户名和密码,提供http认证机制需要的用户名和密码 |
send(content) | ①向服务器发送请求,如果采用异步方式,该方法会立即返回②Content可以不指定或指定为null表示,不发送数据③其中内容可以是DOM对象,输入流或是字符串 |
setRequestHeader(String headerString value) | ①设置HTTP请求中的指定头部header的值为value②此方法需要在open方法以后调用 |
getAllResponse Headers() | ①返回包含HTTP的所有响应头信息,其中响应头包括Content-Length,Date,URI等内容②返回值是一个字符串,包含所有分头信息,其中每一个键名和键值用冒号分开,每一组键之间用CR和LF(回车加换行符)来分隔 |
getResponseHeader(String header) | ①返回HTTP响应头中指定的键名header对应的值 |
abort() | ①停止当前http请求,对应的XMLHttpRequest对象会复位到未初始化的状态 |
readyState | ①表示XMLHttpRequest对象的状态:0=未初始化。对象已创建,为调用open,1=open方法成功调用以后,send方法未调用,2=send方法已经调用,尚未开始接收数据,3=正在接收数据,http响应头信息已经接受,相应数据尚未接受完成,4=完成,相应数据接受完成 |
onreadystate change | 请求状态改变的事件触发器(readyState变化时会调用这个属性上注册的javascript函数) |
responseText | 服务器相应的文本内容 |
responseXML | 服务器相应的XML内容对应的DOM对象 |
status | 服务器返回的http状态码:200表示”成功”,404表示”未找到”,500表示”服务器内部错误” |
statusText | 服务器返回状态码的文本信息 |
举例
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
function submit() {
//alert("text");
//1.创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
//IE7./IE8./Fire Fox/Mozillar/Safaro/Opera
//alert("IE7,IE8,FireFox,Mozillar,Safaro,Opera");
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
}else if (window.ActiveXObject) {
//IE6/IE5.5/IE5
//alert("IE6,IE5.5,IE5");
var activexName = ["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0","MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP","Miscrosoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try{
xmlhttp = new ActiveXObject(activexName[i])
break;
}catch(e){
}
}
}
if (xmlhttp == undefind ||xmlhttp == null) {
alert("当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器")
return;
}
//alert(xmlhttp);
//2.注册回调方法
xmlhttp.onreadystatechange = callback;
//错误的写法:xmlhttp.onreadystatechange = callback();
//固定用法:获取文本框中用户输入的内容
var userName = document.getElementById("userName").value;
//GET方法交互
//3.设置和服务器端交互的相应参数
//xmlhttp.open("GET","AJAX?name = " + userName,true )
//4.设置向服务器端发送的数据,启动和服务器端的交互
//xmlhttp.send(null);
//POST方法交互
//3.设置和服务器端交互的相应参数
xmlhttp.open("POST","AJAX",true )
//POST方式交互所需要增加的代码
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4.设置向服务器端发送的数据,启动和服务器端的交互
xmlhttp.send("name="+userName);
}
function callback(){
//5.判断和服务器端的交互式否完成,还要判断服务器端是否正确返回了数据
if (xmlhttp.readyState == 4) {
//表示和服务器端的交互已经完成
if (xmlhttp.status == 200) {
//表示服务器的相应代码是200,正确返回了数据
//纯文本数据的接受方法
var message = xmlhttp.responseText;
//XML数据对应的DOM对象的接受方法
//使用的前提是,服务器端需要设置content-type为text/xml
//vardomXml = xmlhttp.responseXML
//记忆向div标签中填充文本内容的方法
var div = document.getElementById("message");
div.innerHTML = message;
}
}
}
</script>
</head>
<body>
<input type="text" id="UserName"/>
<input type="button" onclick="submit()" value="校验用户名"/>
<br/>
<div id ="message"></div>
</body>
</html>
总结
- 不同的浏览器中XMLHttpRequest对象建立的方式不同,IE7、IE8、FireFox、Mozilla、Safari、Opera中直接new XMLHttpRequest,IE6、IE5.5、IE5则需要通过某一个正确的ActiveXObject控件的名称通过newActiveXObject(控件名)的方式
- 设置回调函数时,不要在函数名后面加括号。加括号表示将回调函数的返回值注册给onreadystatechange属性。正确的方式应该是将回调函数的名字注册给这个属性。实际上每次readyState的值发生变化的时候,回调函数都会被调用,但是一般我们之关心状态4.如果之关心正确的相应数据,只要在执行send方法之前设置回调函数即可。但是仍然建议在XMLHttpRequest对象创建后就先设置回调函数,这样回调函数还可以处理其他的状态。
- open方法最多可以由五个参数,其中头三个参数是必须的;使用GET方法时,请求数据位于url链接中,后面的send方法的参数直接写null就可以使用POST方式时,open方法后面需要先调用setRequestHeader方法来设置Content-Type的值,然后调用send方法,send的参数就是请求的数据
- 回调函数中,最好将判断readyState和status的两个if条件,分开来写。ReadyState的判断条件位于外层,status的位于内层,加入他们被放到了同一个if条件中,判断数据正常返回也是没有问题的。但是不便于分别处理服务器端不是200响应的情况和readyState不是4的情况
- 当服务器端没有正确返回XML数据时,在JavaScript中使用ResponseXML的方式获取返回的XML数据对应的DOM对象时,FireFox和IE的结果是有差别的。IE获取根元素节点为null,而FireFox获取根元素节点则是一个表示解析错误的元素节点。
end
谢谢您的阅读!