Ajax中的XMLHttpRequest

Ajax

Asynchronous Javascript And Xml（异步的js和xml）

本质：使用JS提供的XMLHttpRequest对象，异步的向服务器发送请求，并接受响应数据

名词解释

• 同步
  • 在一段时间内，只能做一件事情
  • 同步访问：在访问服务器时，客户端只能等待服务器响应，不能做其他事情。用户体验非常差
  • 代表场合：
    • 输入网址访问页面
    • a标记的默认跳转
    • submit按钮的店表单提交
• 异步
  • 在一段时间内，可以同时干多个事情
  • 异步访问：在向服务器发送请求时，不耽误用户在网页上做其他的操作
  • 代表场合：
    • 用户名的重复性验证
    • 聊天室
    • 股票走势图
    • 搜索建议（百度，京东，淘宝）

获取Ajax核心对象---XMLHttpRequest

标准创建：var xhr = new XMLHttpRequest()

IE8以下：

​ var xhr = new ActiveXObiect("Microsoft.XMLHttp")

允许通过window.XMLHttpRequest判断浏览器是否支持XMLHttpRequest。如果window.XMLHttpRequest的值是null的话，说明需要通过ActiveXObject()创建，否则需要通过XMLHttpRequest()来创建

var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}
else{
    //浏览器不支持XMLHttpRequest
    xhr = new ActiveXObject("Microsoft.XMLHttp")
}

XMLHttpRequest的属性和方法

1. open()方法

   • 作用：创建请求
   • 语法：open(method,url,isAsyn)
     1. method：请求方式，get、post......
     2. url：请求地址
     3. isAsyn：指定采用同步(false)或者异步(true)的方式发送请求

2. readyState属性

   • 作用：表示xhr对象的请求状态
   • 值：由0-4表示五个状态
     • 0：请求初始化状态
     • 1：已经打开到web服务器的连接，正在向服务器发送请求
     • 2：请求完成
     • 3：正在接受服务器端的响应
     • 4：接收响应数据成功
     • 注意：当radyState的值为4的时候，表示所有的响应都已接收完毕

3. status属性

   • 作用：服务器的响应状态码
   • 值：
     • 200：服务器已经正确给出所有的响应

4. onreadystatechange事件

   • 作用：当xhr的readyState属性值发生改变的时候，要自动激发的操作

   • 语法：xhr.onreadystatechange = function(){

     ​ //每当xhr.readyState为4的时候，才能获取正常的响应数据

     }

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

     ​ //可以接收响应回来的数据
     ​ //responseText属性，表示服务器响应回来的文本
     ​

     }

5. send()方法

   • 发送\提交请求
   • 语法：send(body)；
     • body：请求主体
     • 没有请求主体的提交方式，body为null
     • 有请求主体的提交方式，body处就写请求主体的数据

发送异步请求的步骤

1. 创建/获取xhr对象

2. 创建请求：xhr.open()

3. 设置请求：xhr.onreadystatechange事件
   判断readyState以及status的值，并接收响应
   xhr.onreadystatechange=function(){
   ​ if(xhr.readyState==4&&xhr.status==200){
   ​ xhr.responseText
   }

   }

4. 发送请求：xhr.send()