前后端通信之AJAX

前后端通信又称前后端数据交互，是 Web 开发中必不可少的一个环节。AJAX 通信是最常用的前后端通信方式。

AJAX#

AJAX 即 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

原理#

利用 XMLHttpRequest 封装对象，XMLHttpRequest 可用于与服务器交换数据。

对象方法#

XMLHttpRequest 对象中 3 个很重要的方法:open，send，setRequestHeader。

open(method, url, async);

method：请求的类型，可以是 GET 或者 POST
url：文件在服务器上的地址
async：true(异步) 或者 false(同步)

send(string)：string用于 POST 请求的数据。
setRequestHeader(header, value)：设置请求方法的请求头。

代码示例#

原生 JavaScript

function ajax() {
  var xhr;
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = new ActiveXObject("microsoft.XMLHTTP"); // 兼容IE5和IE6
  }
  var data = "name=hale&gender=male"; // 字符串
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      // 准备状态
      if (xhr.status === 200 || xhr.status === 304) {
        // http响应状态
        console.log(xhr.responseText); // 打印响应的数据（字符串）
      } else {
        console.log("error:" + xhr.status); // 打印响应的状态码
      }
    }
  };
  var url = "";
 
  // GET方法
  // xhr.open('GET', url, true);
  // xhr.send();
 
  // POST方法
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send(data);
}

使用 jQuery

jQuery 的 AJAX 对浏览器原生的 XMLHttpRequest 进行了封装，使用更加方便。

$.ajax({
  type: "POST", // 或者GET
  url: url,
  async: true, // 异步，默认true
  data: {
    // 这里的数据是对象,GET方法可以不传data
    name: hale,
    gender: male,
  },
  dataType: "json", // 数据类型
  success: function (data, textStatus, jqXHR) {
    // 成功时调用的函数
    console.log(data);
    console.log(textStatus);
    console.log(jqXHR);
  },
  error: function (error, textStatus, jqXHR) {
    // 失败时调用的函数
    console.log(error);
    console.log(textStatus);
    console.log(jqXHR);
  },
});

使用 Axios

Axios 是一个第三方请求库，封装了浏览器原生的 XMLHttpRequest 对象，另外在 Node 端也实现了相同的功能。

// get请求
axios
  .get(url)
  .then(function (res) {
    console.log(res);
  })
  .catch(function (err) {
    console.log(err);
  });
// post请求
axios
  .post(url, {
    name: "hale",
    gender: "male",
  })
  .then(function (res) {
    console.log(res);
  })
  .catch(function (err) {
    console.log(err);
  });

readyState#

0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪

AJAX 的跨域通信#

XMLHttpRequest 老版本由于受到同源策略的影响，是不支持跨域请求的。但是，XMLHttpRequest Level2 版本中可以实现跨越通信，需要在服务器端设置许可即可。这叫做“跨域资源共享”（Cross-origin resource sharing），简称 CORS。

AJAX 代码的写法和不跨域的请求完全一样。

XMLHttpRequest Level2 的兼容性：IE10 以上浏览器和现代主流浏览器都支持。