AJAX的理解和原生实现

唠嗑

        如果你面试过前端方面的岗位，肯定对AJAX不陌生，因为几乎是前端工程师必问的问题，概念在此不再叙述，简单来说就是在不更新整个页面的前提下更新某个页面的模块内容，为什么这么说呢，因为以前的form表单提交时，会指定一个action选项，当表单发出提交请求时会跳转到这个页面，拿PHP举例，PHP是一种后台语言，浏览器将PHP语言输出的代码（echo出来的部分）转为HTML代码最终显示在客户端上面，页面发生了重写。而AJAX就是为了解决这一问题而引申出来的一种技术。
        而AJAX就是利用JavaScript和XMLHTTPRequest对象来实现不重载整个页面的前提下，视图的更新。现在很多对AJAX的封装，JQuery的ajax方法、axios、ES6中提出来的fetch等等。为了更好的了解AJAX的流程，在此用原生JS来实现AJAX的封装，话不多说，上代码：

代码

var Ajax={
  get: function(url, fn) {
    // XMLHttpRequest对象用于在后台与服务器交换数据   
    var xhr = new XMLHttpRequest();            
    xhr.open('GET', url, true);
    xhr.onreadystatechange = function() {
      // readyState == 4说明请求已完成，status为200和304分别表示请求成功和用户刷新页面时候的http状态码
      if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) { 
        // 从服务器获得的数据存储在xhr的responseText中，执行回调函数
        fn.call(this, xhr.responseText);  
      }
    };
    xhr.send();
  },
  // data应为json格式，在jq里如果data为对象会自动将对象转成这种字符串格式
  post: function (url, data, fn) {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    // 添加http头，发送信息至服务器时内容编码类型
    xhr.setRequestHeader("Content-Type", "application/json");  
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
        fn.call(this, xhr.responseText);
      }
    };
    xhr.send(data);
  }
}

        将ajax封装成一个对象，里面有get和post两个方法，以get为例，首先创建XMLHTTPRequest对象用于与服务器之间交换数据，然后调用xhr的open方法，传递三个参数，第一个参数为传递信息的方式get/post，第二个为服务器的url，第三个参数为是否异步传递。然后就是给xhr设置监听状态变化的处理函数，当请求成功时调用回调函数fn,在fn中执行对DOM元素的值或视图的更新即可。调用xhr的send方法，将请求发送至服务器，等待服务器的响应（此时监听函数一直在运行，当服务器成功返回则调用回调函数），因为get方法不需要向服务器发送数据，所以send的参数为空。
        post的思想和get差不多，差别主要就是post需要设置一个请求的头部，告诉服务器，我发送的是一个什么类型的数据，然后在调用send方法时将要传送的数据当参数传入即可。
        后面还会更新几篇在开发过程中遇到的关于AJAX和跨域的问题，如果对这方面实际应用还不是很明白的朋友可以关注一下，如果有什么异议的地方，欢迎大家留言评论~