松江移动网站建设seo教程 百度网盘

学习笔记：XMLHttpRequest

1. 特点：
   • 在不重新加载页面的情况下更新网页
   • 在页面已加载后从服务器请求数据
   • 在页面已加载后从服务器接收数据
   • 在后台向服务器发送数据
2. 创建XMLHttpRequest对象
   • xmlhttp=new XMLHttpRequest()；
   • IE5 和 IE6，使用 ActiveX 对象
     • xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
3. 经典代码示例：

//创建XMLHttpRequest对象
// 由于window.ActiveXObject的情况仅适用于IE5、IE6，已经过时，不在考虑与关注，
// 使用时仅写window.XMLHttpRequest就行了
if(window.ActiveXObject){ //适用于IE6之前xmlhr=new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest){xmlhr=new XMLHttpRequest();
}if (xmlhr!=null){xmlhr.onreadystatechange=state_Change;xmlhr.open("GET",url,true);xmlhr.send(null);
}
else{alert("Your browser does not support XMLHTTP.");
}function state_Change(){if (xmlhr.readyState==4){// 4 = "loaded"if (xmlhr.status==200){// 200 = OK// ...our code here...document.getElementById('T1').innerHTML=xmlhr.responseText;}else{alert("Problem retrieving XML data");}}
}

XMLHttpRequest 对象的状态(readyState)：

• 0 - 未初始化(uninitialized)。对象已创建或已被 abort() 方法重置，但未调用 open() 方法。
• 1 - 启动(open)。已调用 open() 方法，但未调用 send() 方法。
• 2 - 发送(send)。已调用 send() 方法，但未收到响应。
• 3 - 接收(receiving)。已经接收部分数据。
• 4 - 完成(Loaded/complete)。已经接收到全部数据，并且可以在客户端使用。

 XMLHttpRequest对象提供的事件处理：

• onloadstart: 当请求开始时触发；
• onprogress: 在请求过程中持续触发，用于跟踪进度；
• onabort: 当请求被中止时触发；
• onerror: 当请求发生错误时触发；
• onload: 当请求成功完成时触发；
• ontimeout: 当请求超时时触发；
• onloadend: 当请求结束时触发，不论成功或失败都会触发；
• onreadystatechange：readyState 属性发生变化时触发；

XMLHttpRequest发起http请求时的方法：

1. open(method, url, async)
   1. method:  请求方式,"GET"、"POST"等；
   2. url： 请求地址；
   3. boolean，是否异步；当true时，send方法后继续执行，是防止代码停止的最安全的方法；当false时，可以省去onreadystatechange代码，若是请求失败不再执行的话选false。
2. send(data)
   1. data: 可选参数，发送请求时传递数据；
3. setRequestHeader(header, value)
   1.  设置请求头消息，如“Content-Type”等；
   2. header： 请求字段，value：字段值
4. abort()
   1. 终止当前请求；

 XMLHttpRequest接收数据时的方法：

1. responseText: 返回作为字符串形式的响应数据；
2. responseXML: 如果服务器返回的数据是 XML 格式，可以使用此属性获取解析后的 XML 文档；
3. response: 返回一个包含响应数据的属性，其类型根据响应的 Content-Type 自动转换；
4. status: 返回响应的 HTTP 状态码；
5. statusText: 返回 HTTP 状态码的文本描述；
6. getAllResponseHeaders(): 返回包含所有响应头信息的字符串；
7. getResponseHeader(header): 返回指定响应头的值；