Ajax-快速上手前后端交互

Ajax

在之前自己也有总结过关于Ajax的笔记，各种的懵圈，通过一次项目和几次的总结和分享，我对Ajax终于算是有了一定的理解和自己的见解。相信大家见过和度过了很多的关于Ajax的什么前世今生、大刀阔斧等文章，我自己也受益匪浅。在这里我就谈谈自己的简单理解和用法。

• Ajax是什么？
  Ajax就是当浏览器（客户端）向服务器发送请求时用的一种技术，它的核心是XMLHttpRequest对象，他最大的特点就是向服务器请求额外的数据而无须加载页面（刷新），既异步加载。

• Ajax技术是怎样实现请求的？
  目前Ajax技术有两种方式实现请求：一、通过他的核心对象XHR（XMLHttpRequest的缩写）；二、通过window.fetch()方法进行请求。
  1.1通过XHR对象进行请求（原生js）代码如下：

    //1、创建XHR对象
    var request = new XMLHttpRequest();//在大多数浏览器中，在ie5、ie6中不支持这个方式
    //在ie5、ie6中兼容只需定义下面这个函数
    var request;
    if(window.XMLHttpRequest){
        request = new XMLHttpRequest();
    }else{
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
  
    //2、进行请求完整代码
    var xhr = '';
    var requestData = '';
    //兼容性处理
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
  
    xhr.open('GET/POST','url',true/false);//get和post请求，true为异步请求、false我为同步请求,请求的URL中可带参数进行请求
    xhr.setRequestHeader("Content-type", "application/json");//添加http头信息，该函数的顺序必须是open之后，send之前
    xhr.send(JSON.stringify({
        name: '小明',
        age: 20
    }));//post的send(String)必须要，send用于发送请求参数，如果不需要请求体发送请求参数，则为null。
        //send传输的数据是以json数据格式传给后台的。
    //返回响应
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){
                //请求成功的处理函数，服务器返回的数据存入responseText属性中
                requestData = xhr.responseText;//获取到后台响应的数据
                var date = JSON.parse(requestData);//将响应数据转化成json格式，以便使用
                //使用数据
                //~~~
            }else{
                //请求数据错误的处理函数
            }
        }else{
            //ajax发送失败，没有得到响应数据
        }
    }
  

  1.2使用jQuery的$.ajax()方法实现请求，代码如下：

     $.ajax({
        type: 'GET',//请求方式
        url: 'url',//请求资源地址或请求接口
        data: {
            //请求参数
        },
        success: function(data){//服务器响应的数据都存入data中
            //请求成功处理函数
            if(data.status === '0'){
                alert(data.message);
            } else {
                //向自己的html添加服务器响应的数据
            }
        }
        error: function(){
            //请求失败处理函数
        }
    });
  

  2、目前市场上已经在使用window.fetch()方法，XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离（Separation of Concerns）的原则，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。Fetch 的出现就是为了解决XHR的问题
  他的请求代码如下：

    window.fetch(url).then(function(response){//响应值放入response中
        return response.json();//用json()方法把相应的数据转化为javascript对象
    }).then(function(data)
        //请求成功处理函数
    }).catch(function(e){
        //请求失败处理函数
    })
  

• Ajax扩展
  Ajax为了扩充他的功能，发展了XHR2,这里我就不再详细说明，想要对Ajax的请求做详细了解的可以查看我最初的Ajax学习笔记!