AJAX - 服务器响应
onreadtstatechange属性
readyState 属性存留 XMLHttpRequest 的状态。
onreadystatechange 属性定义当 readyState 发生变化时执行的函数。
status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。
readyState 发生变化时就会调用 onreadystatechange 函数。注释：
onreadystatechange 被触发五次（0-4），每次 readyState 都发生变化。
实例
当 readyState 为 4，status 为 200 时，响应就绪：
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
使用回调函数
如果您的网站中有多个 AJAX 任务，那么您应该创建一个执行 XMLHttpRequest 对象的函数，
该函数应当包含 URL 以及当响应就绪时调用的函数。
实例：
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
cFunction(this);
}
};
xhttp.open("GET", url, true);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
服务器响应属性
responseText属性
responseText 属性以 JavaScript 字符串的形式返回服务器响应，因此您可以这样使用它：
实例
document.getElementById("demo").innerHTML = xhttp.responseText;
responseXML 属性
XML HttpRequest 对象有一个內建的 XML 解析器。
ResponseXML 属性以 XML DOM 对象返回服务器响应。
使用此属性，您可以把响应解析 为 XML DOM 对象：
实例：
请求文件 music_list.xml
<!DOCTYPE html>
<html>
<body>
<h1>XMLHttpRequest 对象</h1>
<p id="demo"></p>
<script>
var xhttp, xmlDoc,txt,x,i
xhttp = new XMLHttpRequest();
xhttp.onreadystatuschange = function(){
if (this.readyState == 4&& this.status == 200){
xmlDoc = this.responseXML;
txt='';
x = xmlDoc.getElementsByTagName("ARTIST")
for (i=0 ;i< x.length; i++){
text+= x[i].childNodes[0].nodeValue + "<br>"
}
document.getElementById("demo").innerHTML = text;
}
};
xhttp.open("GET", "/demo/music_list.xml", true);
xhttp.send();
</script>
</body>
</html>
服务器响应方法
getAllResponseHeaders() 方法
返回所有来自服务器响应的头部信息
<!DOCTYPE html>
<html>
<body>
<h1>XMLHttpRequest 对象</h1>
<p>getAllResponseHeaders() 函数返回资源的所有头信息，如长度，服务器类型，内容类型，最后修改等：</p>
<p id="demo"></p>
<script>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getAllResponseHeaders();
}
};
xhttp.open("GET", "/example/js/ajax_info.txt", true);
xhttp.send();
</script>
</body>
</html>
getResponseHeader()方法
返回来自服务器响应的特定的头部信息
<!DOCTYPE html>
<html>
<body>
<h1>XMLHttpRequest 对象</h1>
<p>getResponseHeader() 函数返回资源的特定头信息，如长度，服务器类型，内容类型，最后修改等：</p>
<p>最后修改时间：<span id="demo"></span></p>
<script>
var xhttp=new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.getResponseHeader("Last-Modified");
}
};
xhttp.open("GET", "/example/js/ajax_info.txt", true);
xhttp.send();
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
