[JavaScript]Ajax-异步交互技术

简介

大部分时候，我们访问某个网页，会是整个页面地加载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

语法：

javascript 复制代码

<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事件 |

实例：

javascript 复制代码

$("#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方法

语法：

javascript 复制代码

$.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方法

语法：

javascript 复制代码

$.post(url,data,success(resp,status,xhr),dataType)

参数：

三者关系： $get和$ post本质上是 $ajax的一种简化形式，只要会$ ajax即可。