AJAX

创建XMLHttpRequest对象

Ajax是对Asc也能长荣偶数JavaScript+ XML的简写，这一技术弄呢狗狗向服务器请求额外的数据而无需卸载页面，Ajax技术的核心是XMLHttpRequest（简称XHR）对象，XHR为服务器发送请求和解析服务器响应提供了流畅的接口，能够以异步方式从服务器区获取更多信息而不必刷新页面。使用XML对象取得新数据然后再通过DOM将数据插入到页面中。

image.png

XML请求

• GET请求

  对XHR而言，位于传入open（）方法的URL末尾的查询字符串必须经过正确的编码才行。使用GET请求经常发生一个错误，就是查询字符串格式有问题。查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后才能放到URL的末尾，而且所用名-值都必须有&分割

• �POST请求

  服务器对post请求不一样，所以，服务器端必须有程序来读取发送过来的原始数据，并从中解析有用的部分。

  
  image.png

通过上面的两个ajax的实例，我们可以看出get请求和post请求的一些特点：

1. get请求：

   • GET 请求可被缓存
   • GET 请求保留在浏览器历史记录中
   • GET 请求可被收藏为书签
   • GET 请求不应在处理敏感数据时使用
   • GET 请求有长度限制
   • GET 请求只应当用于取回数据

2. post请求：

   • POST 请求不会被缓存
   • POST 请求不会保留在浏览器历史记录中
   • POST 不能被收藏为书签
   • POST 请求对数据长度没有要求

XML响应

responseText 将响应信息作为字符串返回。 XMLHTTP尝试将响应信息解码为Unicode字符串，XMLHTTP默认将响应数据的编码定为UTF-8，如果服务器返回的数据带BOM(byte-order mark)，XMLHTTP可以解码任何UCS-2 (big or little endian)或者UCS-4 数据。注意，如果服务器返回的是xml文档，此属性并不处理xml文档中的编码声明。你需要使用responseXML来处理。
js代码会等到服务器响应之后再继续执行。收到响应后，响应数据会自动填充XHR对象的属性，相关属性如下：
responseText：作为响应主体被返回的文本；
responseXML：作为相应的内容类型是text/xml或application/xml，这个属性中将保存包含着相应数据的XMLDOM文档；
status：相应的http状态；
statusText：http状态的说明。

image.png
image.png

XML readyState

在接收到响应之后，第一步检查status属性，当xhr.status为200时候，说明接受成功.
0：未初始化，尚未调用open()方法。
1.启动。已经调用open()方法，但尚未调用send()方法。
2.发送，已经调用send()方法，为接受到响应。
3.接受。已经接受部分响应数据。
4.完成。全部接受响应的数据，并且可以在客户端使用。

image.png
image.png

当执行xhr.onload = function(){}方法的时候 表明XML已经响应完毕