AJAX详解

1.AJAX概述

AJAX指Asynchronous JavaScript And XML，即异步的JavaScript和XML，是一种无需刷新页面便能向服务器发送请求的技术。在没有AJAX之前，浏览器向服务器发送一次请求必须要刷新一次页面，很不方便。举个例子，当我们在表单上填写账号密码之后，向服务器请求验证，如果验证失败，页面刷新，就需要重新填表单，十分不方便。

2.AJAX原生使用方法

1.新建XMLHttpRequest对象

    let req = null
    if(XMLHttpRequest){
      req = new XMLHttpRequest()
    }else{
      //为了兼容IE浏览器
      req = new ActiveXObject('Microsoft.XMLHTTP');
    }

2.建立前端到服务器的请求

req.open('get', 'https://www.baidu.com',true)

open函数有三个参数，第一个是方法（get或post），第二个参数是url链接，第三个参数是是否异步，默认true。

3.发送请求

req.send()

4.处理响应结果

XMLHttpRequest的实例上有一个readystate属性，每当readystate改变的时候会调用onreadystatechange()函数。readystate有如下取值：

1.0，请求没有发出，即使用send()之前；

2.1，已调用send()方法，正在发送请求；

3.2，send()方法执行完成，已经接收到全部响应内容；

4.3，正在解析响应内容；

5.4，响应内容解析完毕；

指定onreadystatechange函数来处理响应结果：

    req.onreadystatechange = function(){
      if(req.readyState === 4 && req.status === 200){
        console.log(req.responseText)
      }
    }

3.jQuery封装使用

    $.ajax({
      type: "post",  //请求方式
      url: "a.php", //服务器的链接地址
      dataType: "json", //传送和接受数据的格式
      data: {
        username: "james",
        password: "123456"
      },
      success: function (data) {//接受数据成功时调用的函数
        console.log(data);//data为服务器返回的数据
      },
      error: function (request) {//请求数据失败时调用的函数
        alert("发生错误:" + request.status);
      }
    });

此外还有两种更简化的写法：

 $.get(url, data，success)
 $.post(url, data, success)