AJAX简介

AJAX(Asynchronous JavaScript And XML)是异步的JavaScript和XML；是一种用于快速创建动态网页的技术；通过在后台与服务器进行少量的数据交换，使网页实现异步更新。
使用AJAX最主要可以做以下的事情：
● 在不重新加载页面的情况下发送请求给服务器。
● 接受并使用服务器发来的数据。

AJAX发送HTTP请求

为了使用JavaScript向服务器发送一个http请求，你需要一个包含必要函数功能的对象实例，即XMLHttpRequest对象，在一些较早版本的IE浏览器中使用的是ActiveXObject对象。

创建XMLHttpRequest对象

XMLHttpRequest 用于在后台与服务器交换数据。


var XHR;

if (window.XMLHttpRequest){

    //所有现代浏览器（IE7+、Firefox、Chrome、

    //Safari 以及 Opera）均内建 XMLHttpRequest 对象。

    XHR = new XMLHttpRequest();

} else if(window.ActiveXObject){

    //老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

    XHR = new ActiveXObject("Microsoft.XMLHTTP");

}

向服务器发送请求

在创建HTTP对象后要发送一个实际的请求，通过调用我们使用 XMLHttpRequest 对象的 open() 和 send() 方法，像下面这样:

XHR.open("GET","/ajax/get",true);

XHR.send();

open(method,url,async)方法

规定请求的类型、URL 以及是否异步处理请求。
● open()方法的第一个参数是请求的方法，有GET,POST等服务器支持的方法。
● open()方法的第二个参数是你要发送的URL
● open()方法的第二个参数是可选的，用于设置请求是否是异步的。如果是异步设为 true (默认设置)。

send(string)方法

将请求发送到服务器。
● 方法的参数可以是任何你想发送给服务器的内容

处理服务器的响应

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

onreadystatechange 事件

改事件在readyState发生改变时，就会被触发。readyState属性存有XMLHttpRequest的状态信息，从0到4变化。
● 0：请求未初始化
● 1：服务器已建立连接
● 2：请求已接收
● 3：请求处理中
● 4：请求完成，准备就绪
注意： onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。

status属性

我们通过检查响应码来区别对待成功和不成功的AJAX调用。
● 200: "OK"
● 404: 未找到页面

 XHR.onreadystatechange = function () {
     if(this.readyState == 4 && this.status == 200){

          //请求完成且请求成功
          //Do Something
          
      }else{
            
          //请求发生错误
          //Do Otherthing
      }
    
 }

responseText / responseXML 属性

如需获得来自服务器的响应，可以使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。
● responseText：获得字符串形式的响应数据。
● responseXML：以 XMLDocument 对象方式返回，之后就可以使用JavaScript来处理。

一个简单的AJAX实例

如下图示通过点击"修改内容"的按钮，将“使用 AJAX 修改该文本内容”修改为从服务端获取的字符串。

38cc0eb46931fc68cd77091789e95b8.png

前端代码

ajax.html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX学习</title>
    <script type="text/javascript">
        function changeDoc() {
            var XHR = (window.XMLHttpRequest)?
                      new XMLHttpRequest():
                      new ActiveXObject("Microsoft.XMLHTTP");
            XHR.open("GET","/ajax/get",true);
            XHR.send();
            XHR.onreadystatechange = function () {
                if(this.readyState !== 4 || this.status !== 200)return;
                document.getElementById("myDiv").innerHTML = this.responseText;
            }
        }

    </script>
</head>
<body>
    <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
    <button type="button" onclick=changeDoc()">修改内容</button>
</body>

</html>

服务端代码

@Controller
@RequestMapping("ajax")
public class AjaxController {
    //访问到ajax.html页面
    @GetMapping("/ajax")
    public String ajax(){
        return "ajax";
    }

    //点击按钮通过ajax请求到'/ajax/get'路径
    //将str返回给ajax.html页面
    @GetMapping("/get")
    @ResponseBody
    public void get(HttpServletResponse response) throws IOException{
        String str = "在不重新加载页面的情况下发送请求给服务器.接受并使用从服务器发来的数据。";
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.print(str);
    }
}

运行结果：

de47e112bc535fbc50b310f9f8f40ee.png