Ajax

2019-09-29 本文已影响0人董二干先生

ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现在页面不刷新的情况下和服务端进行数据交互。

XMLHttpRequest

Ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的 XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。

所以用一句话来总结两者的关系，就是：我们使用XMLHttpRequest对象来发送一个Ajax请求。

创建XMLHttpRequest对象

一般使用new关键字进行创建，然后赋值给一个变量，

var xhr = new XMLHttpRequest();

XMLHttpRequest对象的常用属性

1、readyState
只读属性，表示XMLHttpRequest请求当前所处的状态，共有五个数字值（0，1，2，3，4，5）。

0：表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。
1：表示已调用open方法，但还未调用send方法（请求还未被发送出去），仍然可以使用setRequestHeader()，设定HTTP请求的头信息。
2：表示send方法已调用，数据已发送，并且服务器接收到了请求。
3：表示服务器正在传输数据。
4：表示数据传输完成。

2、status
只读属性，表示本次请求所得到的HTTP状态码，返回一个整数。一般来说，如果通信成功的话，这个状态码是200。常用的有如下几个状态码:

200：OK（正常访问）；
301：Moved Permanently（永久移动）；
302：Moved temporarily（暂时移动）；
304：Not Modified（未修改）；
307：Temporary Redirect（暂时重定向）；
401：Unauthorized （未授权）；
403：Forbidden（禁止访问）；
404：Not Found（未找到该网址）；
500：Internal Server Error （找到网址但服务器发生错误）；
基本上，只有200和304的状态码，表示服务器返回是正常状态。

XMLHttpRequest对象的常用方法

open()

XMLHttpRequest对象的open方法用于指定发送HTTP请求的参数，常用的有三个参数：

第一个参数：请求的类型（常用get或者post）；

第二个参数是接口名和：这里要分两种情况：

get请求时：接口名+请求参数（键值对形式）；post请求时：只需要接口名（需要传递的参数写在send方法里）；

第三个参数：一个布尔值，指定是否异步（true为异步，false为同步，通常为true，默认为true）；

send()

send方法用于实际发出HTTP请求。如果不带参数，就表示HTTP请求只包含头信息，也就是只有一个URL，典型例子就是GET请求；如果带有参数，就表示除了头信息，还带有包含具体数据的信息体，典型例子就是POST请求。

Ajax 的get写法

var xhr = new XMLHttpRequest()
xhr.open('GET', '请求地址', true)
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4) {
        if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            //成功了
            console.log(xhr.responseText)
        } else {
            console.log('服务器异常')
        }
    }
}
xhr.onerror = function(){
    console.log('服务器异常')
}
xhr.send()

Ajax 的post写法

 var xhr = new XMLHttpRequest()
  xhr.timeout = 3000        //可选，设置xhr请求的超时时间
  xhr.open('POST', '/register', true)

  xhr.onload = function(e) { 
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
      console.log(this.responseText)
    }
  }
    //可选
  xhr.ontimeout = function(e) { 
        console.log('请求超时')
  }

  //可选
  xhr.onerror = function(e) {
      console.log('连接失败')
  }
  //可选
  xhr.upload.onprogress = function(e) {
      //如果是上传文件，可以获取上传进度
  }

  xhr.send('username=jirengu&password=123456')