AJAX

1 什么是AJAX

Asynchronous Javascript And Xml
异步的 JS 和 xml
通过JS 异步的向服务器发送请求并接收响应数据

优点:

1.异步访问
2.局部刷新

使用场合:

1.搜索建议
2.表单验证
3.前后端完全分离

2 AJAX 核心对象 - 异步对象(XMLHttpRequest)

1. 什么是XMLHttpRequest

简称 xhr
称为"异步对象" 代替浏览器向服务器发送异步的请求并接收响应
xhr 是由JS 来提供的

2. 创建 异步对象 (xhr)

主流的异步对象是 XMLHttpRequest 类型的, 并且主流浏览器(IE7+, Chrome, Firefox, Safari, Opera)全部都支持 XMLHttpRequest。
但在IE低版本浏览器中(IE6及以下), 就不支持XMLHttpRequest, 需要使用 ActiveXObject() 来创建异步对象

function createXhr(){
  if(window.XMLHttpRequest){
    var xhr = new XMLHttpRequest();
  }else{
    var xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  return xhr;
}

xhr 的成员

1. 方法 - open()
   作用: 创建请求
   语法: open(method, url, asyn)
   method: 请求方式, 取值'get', 或 'post'
   url: 请求地址, 字符串
   asyn: 是否采用异步的方式提交请求. true: 异步; false:同步

例如:
xhr.open('get', '/server?key1=value1&key2=value2', true)

2. 属性 - readyState
   作用: 请求状态, 通过不同的请求状态来表示xhr与服务器的交互情况
   由 0-4 共 5 个值来表示 5 个不同的状态
   0: 请求尚未初始化
   1: 已经与服务器建立了连接
   2: 服务器端已接受请求
   3: 请求正在处理中
   4: 响应已经完成

3. 属性 - status
   作用:服务器端的响应状态码
   200: 表示服务器正确处理所有的请求以及给出响应
   404: 请求资源不存在
   500: 服务器内部错误

注意: readyState==4 and status==200 时,响应正常

4. 事件 - onreadystatechange
   作用: 每当xhr的readyState发生改变的时候都要触发的操作 - 回调函数

5. 属性 - responseText
   作用: 响应数据

6. 方法 - send()
   作用: 通知 xhr 向服务器端发送请求
   语法: send(body)
   1 ) get 请求:body的值为 null
   send(null)
   2 ) post 请求:此处为要提交的数据
   send("请求数据")

3 AJAX 的操作步骤

1. GET请求
   1 )创建xhr对象
   2 ) 创建请求 - open()
   3 ) 设置回调函数 - onreadystatechange 判断状态并接受响应数据
   4 ) 发送请求 - send()
2. POST 请求
   AJAX的POST请求, 会把 Content-Type 请求消息头的值修改为 "text/plain;charset=utf-8", 导致了服务器端没有办法正常接收数据
   解决方案: 将Content-Type 请求消息头的值再更改回application/x-www-form-urllencoded 即可
   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");