简介
大部分时候，我们访问某个网页，会是整个页面地加载Web资源。但也有的场景，需要我们实时更新部分信息。举个经典的例如，使用百度搜索的时候，你输入字之后，可能还没输完关键词只输入其中一两个字，它的搜索栏下方就会跳出好几个包含输入了的字的关键词。
这是一种异步交互。在上面的例子里面，输入了字之后，你稍微停顿个一下，页面就已经把你的输入发送给百度服务器了，然后服务器会返回相关的关键字，帮助你进行搜索，改善用户体验。
而且，出来异步交互之外，它更新的也不是整个网页资源，而是网页中的部分资源会根据服务器的返回发生改变。
现在常见的异步交互技术有：Ajax、WebSockets、Server-Sent Events(SSE)。在这里我们介绍一下Ajax。
Ajax细节介绍
Ajax允许网页在不整个页面重新加载的情况下，与服务器交换数据并更新部分网页内容。它是基于JavaScript实现的一种Web异步交互技术。
交换数据时，先依靠JavaScript的XMLHttpRequest对象，创建其并设置好请求参数(比如URL、get还是post请求等等)，将该对象发送给服务器。
服务器处理请求后会返回数据，通常是XML或者JSON格式的数据。网页的JS脚本在收到数据后，就可以动态地更新网页上的元素。
当然，并非任何场景都推荐使用异步交互。异步交互虽然性能高，但请求的次数增多，服务器的压力会增大。所以只需要在需要使用异步交互改善用户体验的交互场景使用即可。
常见应用场景：搜索栏、下滑加载式网页、注册时检查表格数据等等
Ajax实现
直接通过javaScript实现Ajax比较繁琐，且可读性不强。JQuery已经将Ajax的相关的操作进行了封装，我们可以在合适的地方，使用JQuery调用AJAX相关的方法，从而实现Ajax的异步交互。
JQuery的相关方法主要是三个：$ajax、$get、$post
$ajax
语法：
<script>
//js中其他参数、方法...
$触发事件 (function(参数列表) {
$.ajax({
相关参数...
});
});
</script>参数：
| 参数 | 说明 |
| String url | 发送请求的地址,默认为当前页地址 |
| String type | 请求方式(POST或者GET,默认为GET) |
| Number timeout | 设置请求超时时间 |
| Object或String data | 发送到服务器的数据 |
| String dataType | 预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text |
| function success(Object result,String ts) | 请求成功后调用的函数 |
| function error(XMLHttpRequest xhr,String em,Exception e) | 请求失败时调用的函数参数 |
| boolean global | 默认为true,表示是否触发全局的AJAX事件 |
实例：
$("#loginForm").submit(function(event) {
event.preventDefault();
var username = $("#username").val();
$.ajax({
url: "/AServlet",
method: "GET",
data: { jsonString: jsonString },
dataType: "text",
success: function(data) {
alert(data + "用户存在");
},
error: function(xhr, status, error) {
alert("用户不存在");
}
});
});$get
$.get()方法是JQuery封装的发送HTTP GET请求从服务器加载数据的AJAX方法
语法：
$.get(url,data,success(resp,status,xhr),dataType)参数：
| 参数 | 说明 |
|---|---|
| String url | 必有参数，规定将请求发送到哪个url |
| Object、String data | 可选,规定发送给服务器的数据 |
| function success(Object result,String status,XMLHttpRequest xhr) | 可选,请求成功后调用的函数 参数result:可选,服务器返回的结果 参数status:可选,请求的状态 参数xhr: 可选,XMLHttpRequest对象 |
| String dataType | 预期服务器返回的数据类型 可用类型有 XML,HTML,Script,JSON,JSONP,Text |
$post
$.post()是jQuery封装的发送HTTP POST请求从服务器加载数据的AJAX方法
语法：
$.post(url,data,success(resp,status,xhr),dataType)参数：
三者关系：$get和$post本质上是$ajax的一种简化形式，只要会$ajax即可。