详解原生ajax过程
- 发表于
- javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
//创建一个XMLHttpRequest对象 var xhr = new XMLHttpRequest(); //监听statechange事件 xhr.onreadystatechange = function() { /** * XMLHttpRequest的readystate有五个状态 * 0 还没有调用open方法 * 1 已调用open方法，尚未调用send方法 * 2 已调用send，但尚未接收到响应 * 3 已接收到部分响应数据 * 4 已经接收到到全部数据，而且可以在客户端使用 */ if (xhr.readystate == 4) { //状态码在200 到 300表示请求成功，状态码304表示资源没有被修改，可以直接使用缓存中的版本 if ((xhr.status >=200 && xhr.status < 300) || xhr.status == 304)) { alert(xhr.responseText); } else { //发生错误打印状态码， alert("Request was unsuccessful: " + xhr.status); } } } //打开请求以备发送 xhr.open('post', 'http://example.com', false); //设置请求头 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //序列化表单 var form = document.getElementById('test-form'); //发送请求 xhr.send(serialize(form)); |
步骤
- 创建XMLHttpRequest对象(这里需要兼容，IE7之前的是ActiveXObject对象)
- 设置回调函数
- open()
- 设置请求的头部
- send()
- 更新页面显示
注：设置请求头必须在open和send之间，而回调函数通常会在send之前。
注意
如果你监听的是load事件，那么你必须要检查status属性，才能确定数据是否真的可用。因为只要浏览器接收到服务器的响应，不管状态如何，都会触发load事件。
