Ajax 原理和使用

Ajax，全称是 Asynchronous JavaScript and XML，即异步 JavaScript 和 XML。

Ajax 请求的核心是 JavaScript 中的 XMLHttpRequest 对象，它使用 XMLHttpRequest 对象向 Web 服务器发送 HttpRequest 请求，接收 Web 服务器返回的数据，然后使用 JavaScript 操作 DOM 更新页面。

 

Ajax 实现异步交互的过程

1）创建 XMLHttpRequest 对象

2）通过该对象 open 方法与服务器建立连接

3）通过该对象 send 方法发送数据到服务器

4）通过该对象 onreadystatechange 事件监听服务器状态

5）接收并处理服务器返回的数据

6）将数据更新到当前请求页面

 

JQuery 对Ajax请求的封装

JQuery 提供了$.get, $.post, $.ajax方法进行 Ajax请求。

1) get 方法

$.get(url, data, callback, type)

url 为服务地址，

data 为请求参数，json对象，key/value键值对，

callback 为回调函数，

type 为返回的数据类型，可以为 xml, html, script, json, text, _default。

2）post 方法

$.post 用法和 $.get  方法类似。

3）$.ajax 方法

因为配置多，使用更加灵活，

$.ajax({

    async: true/false, 默认 true，为异步请求

    url: url,

    type:'get'/'post',

    contextType: 'application/x-www-form-urlencoded'/'application/json',请求数据的编码类型，默认为 'application/x-www-form-urlencoded'

    data: {key:value}, 发送到服务器的数据

    dataType: xml/html/script/json/jsonp/text,期望服务器返回的数据类型

    complete: function() {},请求完成时调用的函数

    success: function() {},请求成功时调用的函数

    error: function() {} 请求失败时调用的函数

})

 

Spring MVC 接收并处理 Ajax 请求

ajax 方法使用 contextType 的默认值 'application/x-www-form-urlencoded' 向服务器发送请求时，

Spring MVC 接口方法可以使用自定义类来接收参数，自定义类中的属性与 Ajax 请求参数中的 key 一致即可。

如果 ajax 方法中 contextType 设置为 'application/json'，Spring MVC 接口方法中需要使用 @RequestBody 注解，否则接收不到请求参数。