JS AJAX ---响应

AJAX - 服务器响应

onreadtstatechange属性

readyState 属性存留 XMLHttpRequest 的状态。

onreadystatechange 属性定义当 readyState 发生变化时执行的函数。

status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。
JS AJAX ---响应
每当 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 对象的函数

  • 以及一个供每个 AJAX 任务的回调函数。

该函数应当包含 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 (获取字符串形式的响应数据)
  • responseXML (获取XML数据形式的响应数据)

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>

JS AJAX ---响应

服务器响应方法

  • getResponseHeader()–从服务器返回特定的头部信息
  • getAllResponseHeaders()–从服务器返回所有头部信息

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>

JS AJAX ---响应

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>

JS AJAX ---响应

上一篇:C++调用ocx


下一篇:松软科技Web课堂:AJAX 简介