当前位置：首页 > news >正文

XML语言的学习记录2-XMLHttpRequest

news 2025/9/13 8:42:31

学习笔记：XMLHttpRequest

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

//创建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请求时的方法：

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

XMLHttpRequest接收数据时的方法：