原生js和jQuery发送ajax详解

        jQuery发送ajax的方法用的多了，原生的都忘了怎么去写了。为了不忘本，现在我分别对原生js和jQuery发送ajax的每一步做一个详细的解释。

一、发送ajax的原理和步骤。

        ajax的原理是在HTTP协议的基础上以异步的方式通过XMLHttpRequest对象与服务器进行通信。XMLHttpRequest是浏览器内建对象，用于在浏览器后台与服务器通信(交换数据)。因此，可以不用刷新整个页面实现页面的部分更新。

  1、创建异步对象

        启动浏览器内建对象XMLHttpRequest，用于在浏览器后台与服务器通信(交换数据)。

  2、设置请求行

  3、设置请求头

  4、设置请求体

  5、接收返回的数据

     5.1、设置响应报文

    （1）报文行：状态码200 ok表示当前服务器响应成功。

            状态代码由三位数字组成，第一个数字定义了响应的类别，且有五种可能取值。

            1xx：指示信息 —— 表示请求已接收，继续处理。

            2xx：成功 —— 表示请求已被成功接收、理解、接受。

            3xx：重定向 —— 要完成请求必须进行更进一步的操作。

            4xx：客户端错误 —— 请求有语法错误或请求无法实现。

            5xx：服务器端错误 —— 服务器未能实现合法的请求。

     （2）报文头：服务器给客户端的一些额外的信息。

     （3）报文体：4表示返回的数据可以使用。返回responseText：普通字符串。返回responseXML：XML文件。

返回数据的属性有五个状态：

            xhr.readyState = 0时，（未初始化）还没有调用send()方法。

            xhr.readyState = 1时，（载入）已调用send()方法，正在发送请求。

            xhr.readyState = 2时，（载入完成）send()方法执行完成，已经接收到全部响应内容。

            xhr.readyState = 3时，（交互）正在解析响应内容。

            xhr.readyState = 4时，（完成）响应内容解析完成，可以在客户端调用了。

     （4）onreadystatechange 是 Javascript 的事件的一种，其意义在于监听 XMLHttpRequest 的状态是否发生改变。

        注：为什么设置请求行、请求头、请求体以及接收返回的数据涉及到了与数据库的连接的知识，由于这里不是重点，所以不做过多的叙述，有兴趣的小伙伴可以去查一下客户端与服务器交互的步骤和原理。

二、原生js发送ajax

  1、发送get请求

    启动内建对象XMLHttpRequest

       var xhr = XMLHttpRequest();

    设置请求行

       open('get','url?发送的内容（键1=值1，键2=值2…）');

    设置请求头

       get请求不需要设置请求头

    设置请求体

       send(null);

    监听 XMLHttpRequest 的状态是否发生改变

       xhr.onreadystatechange = function(){

            if(xhr.status == 200 &&xhr.readyState == 4){

                            //getAllResponseHeaders:获取所有响应头

                            //responseText：接收普通字符串

                            //在js中通过JSON.parse方法将json格式的字符串转换为js数组或者对象

                            //responseXML：专门用来接收服务器返回的xml数据的

                            //responseXML:获取的结果可以理解为一个dom结构，我们可以使用dom的方式来获取这个返回值是的数据

             }

        }

2、发送post请求

       post请求和get请求基本上都一样，只有设置请求行、请求头和请求体的时候不一样，在此仅指出其中的不同。

    设置请求行

       open(‘post’，url)；

    设置请求头

       xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

    设置请求体

        xhr.send(发送的参数);

三、jQuery发送ajax

    1、引入jQuery

    2、各个参数介绍

           $.ajax({}) 可配置方式发起Ajax请求

           $.get() 以GET方式发起Ajax请求

           $.post() 以POST方式发起Ajax请求

           $('form').serialize()序列化表单（即格式化key=val&key=val）

           url 接口地址

           type 请求方式

           timeout 请求超时

           dataType 服务器返回格式

           data 发送请求数据

           beforeSend:function () {} 请求发起前调用

           success 成功响应后调用

           error 错误响应时调用

           complete 响应完成时调用（包括成功和失败）

      3、常用格式

           $.ajax({

           type:'请求类型’,

           url:'请求地址’,

                  data:{},

                  dataType:’’,

           success:function(result){

                  成功后的操作

           }

    })

        以上为原生js发送ajax和jQuery发送ajax的详细描述，希望大家在使用jQuery这种方便的方式发送ajax的时候，不要忘记ajax发送的机理。很多东西只有你知道他是怎么来的，才能更好的使用他，并且不容易出错，即使出错了，根据其由来，也相对容易地找到错误点。