XMLHttpRequest 对象的学习
已被阅读 1157 次 | 文章分类:javascript | 2018-05-15 14:16
XMLHttpRequest对象提供了在网页加载后与服务器进行通信的方法，也就是网页加载完成后，不需要刷新网页即可与服务器交换数据，所有现代浏览器都提供了对该对象的支持
一:使用XMLHttpRequest对象可以用来做什么
在不重新加载页面的情况下更新网页,在页面已加载后从服务器请求和接受数据
二:创建 XMLHttpRequest 对象
创建 XMLHttpRequest 对象只需一行代码即可,为了能够兼容支持多有浏览器， 在所有现代浏览器中（包括 IE 7）
xmlhttp=new XMLHttpRequest()
在 Internet Explorer 5 和 6 中
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
三:使用XMLHttpRequest对象请求数据的两种方式
是否异步处理的区别在于:异步可以发送完请求后继续执行后面的代码，同步需要等待请求完成接收到服务器返回的数据再往下执行；所以同步容易造成代码阻塞;第一种：不需要异步处理的方式，通过设置open()方法的第三个参数为false；
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "note.xml", false);
xmlhttp.send();
var xmlDoc = xmlhttp.responseXML;
var result=xmlDoc.getElementsByTagName("to")[1].childNodes[0].nodeValue
console.log(result);
通过xmlhttp.responseXml将返回xmlDOM对象，然后可以通过javascript的方式读取数据
第二种:通过异步处理的方式，通过设置open()方法的第三个参数为true；
/* 创建 XMLHttpRequest 对象 */
var xmlHttp = null;
function GetXmlHttpObject() {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
// -----------ajax方法-----------//
function getLabelsGet() {
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null) {
alert('您的浏览器不支持AJAX！');
return;
}
var url = document.getElementById("text").value;
xmlHttp.open("GET", url, false);
xmlHttp.onreadystatechange = state_change;
xmlHttp.send(null);
}
function state_change() {
if (xmlHttp.readyState == 1 || xmlHttp.readyState == 2 || xmlHttp.readyState == 3) {
// 本地提示：加载中...
} else if (xmlHttp.readyState == 4) {
if ((xmlHttp.status >= 200 && xmlHttp.status < 300) || xmlHttp.status == 304) {
var d = xmlHttp.responseText;
// 处理返回结果
document.getElementById("status").innerText = "Request was unsuccessful:" + xmlHttp.status;
document.getElementById("textarea").innerText = xmlHttp.responseText;
} else {
}
}
}
onreadystatechange是每次 readyState 属性改变的时候调用的事件句柄函数，虽然使代码复杂了，但是这是在没有得到服务器响应的情况下，防止代码阻塞停止的方法。当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时，我们才执行代码
四:完整测试代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<input type="text" id="text" value="" />
<input id="button" type="button" value="Get" onclick="getLabelsGet()" /><br />
<span id="status"></span><br />
<textarea id="textarea" rows="20" cols="50"></textarea>
<script type="text/javascript">
/* 创建 XMLHttpRequest 对象 */
var xmlHttp = null;
function GetXmlHttpObject() {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlHttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
// -----------ajax方法-----------//
function getLabelsGet() {
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null) {
alert('您的浏览器不支持AJAX！');
return;
}
var url = document.getElementById("text").value;
xmlHttp.open("GET", url, false);
xmlHttp.onreadystatechange = state_change;//当 XMLHttpRequest 对象的状态发生改变时，会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。仅在状态为 4 时，我们才执行代码
xmlHttp.send(null);
}
function state_change() {
if (xmlHttp.readyState == 1 || xmlHttp.readyState == 2 || xmlHttp.readyState == 3) {
// 本地提示：加载中...
} else if (xmlHttp.readyState == 4) {
if ((xmlHttp.status >= 200 && xmlHttp.status < 300) || xmlHttp.status == 304) {
var d = xmlHttp.responseText;
// 处理返回结果
document.getElementById("status").innerText = "Request was unsuccessful:" + xmlHttp.status;
document.getElementById("textarea").innerText = xmlHttp.responseText;
} else {
}
}
}
</script>
</body>
</html>
五:效果
