在这篇文章中，我们将学习ajax的工作原理，已经使用原生的ajax和jquery的ajax来进行编程练习。

ajax原理介绍

ajax原理介绍

ajax现在是前后端交互的重要工具，可以说，只要从事于it行业，ajax那就是必须要掌握的一名技术，下面我们就来对ajax进行介绍。

什么是ajax

ajax是Asynchronous Javascript And XML的简写，意思就是异步的javascript和xml，也就是异步请求。现在主要用于前后端进行交互，从而实现动态网页，异步更新。

ajax的优点

在传统的html中，当我们向服务器发送数据后，页面会发生跳转，如果我们使用ajax，那么就可以在不发生跳转的情况下实现前后端的交互，从而实现数据的更新，进而实现局部页面更新。

ajax的应用场景

我们直接看一个最典型的案例，这就用到了ajax技术。

上面是一个搜索框，我们进行搜索的时候，下面就自动进行提示，这就是ajax的典型应用案例，我们只要输入字符，那么就会发送ajax请求，服务器返回数据，页面再进行展示。

ajax的应用场景很多，可以说，现在和后端通信，基本都是使用ajax来进行了。

ajax原理分析

我们自己定义触发事件，在触发事件里面编写ajax代码
当事件触发时，游览器将会发送ajax异步请求，本质还是http请求
服务器返回数据，我们通过回调函数来对返回数据进行处理
将数据展示到页面上，实现局部更新

使用ajax

我们这里介绍原生的ajax和jquery使用ajax，现在还有十分流行的axious，这个的原理也是ajax，我们把ajax好，学习其他异步请求也就轻松了。

原生ajax

我们使用原生的ajax，首先要创建XMLHttpRequest 对象，这个对象就可以用来实现异步请求。

var xhr = new XMLHttpRequest();

我们创建对象后就可以使用该对象的方法，我们使用open方法，这个方法可以指定请求的方法，请求的地址，参数，以及是同步还是异步请求。open(method,url,async)

xhr.open("GET","http://localhost:8080/ajax/userServlet?username=jack",true)

上面的代码表示我们使用get方式请求，请求的地址是http//localhost:8080/ajax/userServlet，参数为username，值为jack，最后一个参数true表示使用异步请求，如果填false，那么就是同步请求。

xhr.onreadystatechange = function(){};

onreadystatechange，这个就是用来指定回调函数的，也就是当请求成功后，我们要做的事情。

ajax请求有好几个状态，readyState，readyState保存在XMLHttpRequest中，不同的值表示不同状态。

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

我们在一般情况下，都是对readyState=4来进行操作

除了readyState，我们都知道，在http响应中有一个状态码，其中200表示成功，在ajax中也是一样，XMLHttpRequest对象中有一个属性为status，这个就是响应的状态码。所以，我们在进行编写回调函数的时候就可以写成下面那样。

          xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200){
                //代码段
            }
          }

我们在大多数情况下都是写成上面那样。

对于服务器返回的数据，我们使用XMLHttpRequest的responseText就可以进行接收(不能是xml),接收到值后进行处理。

var text = xhr.responseText;

我们把上面的代码都写好后，最后一步就是发送ajax请求，这个很简单，直接使用send方法即可。

xhr.send();

完整的一个原生ajax请求代码如下：

    <script>
        window.onload = function () {
            //给按钮添加点击事件
            document.getElementById("btn1").onclick = function () {
                //创建一个XMLHttpRequest对象
                var xhr = new XMLHttpRequest()
                //请求的方式，url，异步请求
                xhr.open("GET", "/ajax/userServlet?username=jack", true)
                xhr.onreadystatechange = function () {
                    //当请求已完成，且响应已就绪并且状态码为200的时候我们认为正常响应了
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        //得到响应的数据
                        var text = xhr.responseText;
                    }
                }
                xhr.send();
            }
        }
    </script>

jquery使用ajax

上面使用原生ajax还是比较麻烦的，现在我们就使用jquery的ajax请求方式。

$.ajax()

这个方法是jquery编写ajax的写法，里面传入一个对象，对象中以key:value来填写参数$.ajax({name:value, name:value, … })，常见的参数如下：

type：规定请求的类型（GET 或 POST）。
url：规定发送请求的 URL。默认是当前页面。
data：规定要发送到服务器的数据。
dataType：预期的服务器响应的数据类型。
beforeSend(xhr)：表示发送请求前运行的函数。
success(result,status,xhr)：当请求成功时运行的函数。一般只使用第一个参数，第一个参数表示响应的数据
error(xhr,status,error)：如果请求失败要运行的函数。
complete(xhr,status)：请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。

上面是一些常见的属性，详细信息请参考jquery ajax，下面给出一个$.ajax()的使用。

        //绑定点击事件
        $("#btn1").click(function () {
            $.ajax({
                url: "http://localhost:8080/ajax/userServlet",//请求的网址
                type: "post", //请求方式
                data: { //请求数据
                    username: 'jack',
                },
                error: function () { //失败后的回调函数
                    console.log("失败~")
                },
                success: function (data) {//成功后的回调函数
                    console.log("成功:" + data);
                },
                dataType: "json" //响应的类型
            })
        })

$.get()

上面的$.ajax()还是有些复杂，我们为了简化，可以直接使用$.get()，这个方法只有4个参数，写法为 $.get(URL,data,function(data,status,xhr),dataType)，我们只需要按照顺序写就行了，4个参数分别表示请求地址，请求数据，成功后的回调函数，响应类型。

其中，url是必须要写的，其他都是可选项。请求方法为get，下面给出一个$.get()的写法。

            $.get("http://localhost:8080/ajax/userServlet", {
                username: 'jack'
            }, function (data) {
                console.log("请求成功 "+ data)
            }, "json")

这种写法功能和上面一样，但是简洁了很多。