AJAX从入门到放弃

Posted 2021-02-09 growydp

XHR 响应

由 driventokill 创建，路飞 最后一次修改 2015-09-25

AJAX - 服务器 响应

由于 HTTP 响应是由服务端发出的，并且服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。

---

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

  

 

responseText 属性

如果来自服务器的响应并非 XML，请使用 responseText 属性。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

实例

document.getElementById("myDiv").innerhtml=xmlhttp.responseText;

尝试一下 ?

 提示：对于 responseText 属性，只有当 readyState 属性值变为4时，responseText 属性才可用，因为这表明AJAX请求已经结束！

---

responseXML 属性

如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性：

实例

请求 cd_catalog.xml 文件，并解析响应：

xmlDoc=xmlhttp.responseXML; 
txt=""; 
x=xmlDoc.getElementsByTagName("ARTIST"); 
for (i=0;i<x.length;i++) 
  { 
  txt=txt + x[i].childNodes[0].nodeValue + "<br>"; 
  } 
document.getElementById("myDiv").innerHTML=txt;

尝试一下 ?

 

 

XHR readyState

由 driventokill 创建，路飞 最后一次修改 2015-09-28

AJAX - onreadystatechange 事件

当发送一个请求后，客户端需要确定这个请求什么时候会完成，因此，XMLHttpRequest对象提供了 onreadystatechange 事件机制来捕获请求的状态，继而实现响应。

---

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  0-请求未初始化

 

  1-服务器连接已建立

  2-请求已接收

  3-请求处理中

  4-请求已完成，且相应已就绪

 

status 200：“ok”  404：未找到页面

 

当readyState为4且status为200 表示响应已就绪

 

xmlhttp.onreadystatechange = function(){

    if(xmlhttp.readyState==4&&xmlhttp.status==200){

       document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

    }

}

 

 onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

提示：XHR.readyState状态的变化如下：

 

• 0：请求未初始化，还没有调用 open()。 
• 1：请求已经建立，但是还没有发送，还没有调用 send()。  
• 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。  
• 3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。  
• 4：响应已完成；您可以获取并使用服务器的响应了。