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:响应已完成;您可以获取并使用服务器的响应了。

最新文章

  1. Virus.Win32.Virlock.b分析
  2. 利用统计学知识为android应用的启动时间做数据分析
  3. Sphinx的介绍和原理探索
  4. EditPlus不能着色显示SQl语句的问题
  5. 1502: [NOI2005]月下柠檬树 - BZOJ
  6. localtime和localtime_r
  7. hdoj 1395 2^x mod n = 1 【暴力】
  8. WebPack实例与前端性能优化
  9. 怎么用VBS脚本自动注册yy娱乐的账号
  10. mysql存储过程 基本语法
  11. Shell 脚本实践
  12. 最大熵模型The Maximum Entropy
  13. 【ABP框架系列学习】模块系统(4)之插件示例开发
  14. Mac 永久添加 环境变量方法
  15. 安装 scrapy 报错 error: Microsoft Visual C++ 14.0 is required
  16. vue项目首次加载过慢
  17. 【C#】调用2.0踩过的坑
  18. Oracle 安装过程中 File not found &quot;WFMLRSVCApp.ear&quot; 的原因
  19. thinkphp 带条件分页查询
  20. Java数据结构和算法总结-字符串相关高频面试题算法

热门文章

  1. cocoapods 安装中出的太多问题
  2. SpringMvc中Hashmap操作遇到 java.util.ConcurrentModificationException: null
  3. Linux 学习笔记 1
  4. mysql备份最近8天的数据库,老的自动删除方案
  5. ef 连接mysql,code first
  6. 初识“FireBug”
  7. spark原理
  8. 受限filterbanks
  9. Self Attention需要掌握的基本原理
  10. centos7下安装mysql会遇到的问题集合