AJAX

传统浏览器-服务端交互：

浏览器发送请求报文-->

浏览器监听等待回复报文-->

服务端发送回复报文（报文中包含了整个页面的HTML代码）-->

浏览器清空整个当前页面，更新为接收到的整个页面的HTML代码。

 

AJAX (Asynchronous JavaScript and XML)

浏览器委托AJAX引擎代替浏览器向服务端发送请求报文-->

AJAX引擎监听等待回复报文-->

服务端发送回复报文给AJAX引擎（报文中仅包含json字符串）-->

AJAX引擎将接收到的信息拼接成HTML语句，插入到当前页面中，完成页面的更新。

 

AJAX实现：

-------------- 创建AJAX引擎--------------------------------

var xhr = new XMLHttpRequest();  //创建AJAX引擎

----------------------------------------------------------------------

 

-------------- AJAX向服务端发送get请求----------------

xhr.open('get', 'url?param1=a¶m2=b');

xhr.send();

----------------------------------------------------------------------

 

--------------AJAX向服务端发送post请求---------------

xhr.open('post', 'url');  

xhr.setRequestHeader('Content-Type', 'application/json');  //设置Content-Type为json

var param = JSON.stringify( {param1 : 'a', param2 : 'b'} );  //将json键值对转为json字符串

xhr.send(param);

----------------------------------------------------------------------

 

---服务端接收到请求报文后，回复json字符串----

ResponseBody注解用于将方法返回的字符串直接写入响应报文的响应正文中；

RequestBody注解用于获取请求报文的请求正文；

@RequestMapping("..")
@ResponseBody
public String register(@RequestBody String requestBody) {
    //将requestBody解析为json键值对
    //...
    //将要回复的json键值对转为json字符串返回
}

 

 

 

 

 

---------------AJAX接收服务端响应-------------------------

xhr.onload = function(){  //监听到服务端的回复报文后，将触发xhr的onload事件

var responseText = JSON.parse(xhr.responseText);  //将接收到的json字符串转为键值对

  var str = '<p>' + responseText.name + '</p>';  //拼接html语句

  document.getElementById("..").innerHTML = str;  //将html语句插入到当前页面

}

----------------------------------------------------------------------