异步请求ajax介绍，原生ajax，$

---

ajax的应用场景

---

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

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

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

---

ajax原理分析

---

1. 我们自己定义触发事件，在触发事件里面编写ajax代码

2. 当事件触发时，游览器将会发送ajax异步请求，本质还是http请求

3. 服务器返回数据，我们通过回调函数来对返回数据进行处理

4. 将数据展示到页面上，实现局部更新

---

使用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请求代码如下：

---

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”)

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