AJAX

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

XMLHttpRequest 对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象

var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

xmlhttp.open("GET","/ajaxTest",true);
xmlhttp.send();

方法	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。1. method：请求的类型；GET 或 POST 2. url：文件在服务器上的位置 3. async：true（异步）或 false（同步）
send(string)	将请求发送到服务器。string：仅用于 POST 请求

POST 请求

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化；1: 服务器连接已建立；2: 请求已接收；3: 请求处理中；4: 请求已完成，且响应已就绪。
status	200: “OK”；404: 未找到页面

当 readyState 等于 4 且状态为 200 时，表示响应已就绪。

Spring Boot实现例子

IndexController.java

package com.example.mysite.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class IndexController {

    @RequestMapping("/")
    public String index(){
        return "index";
    }

    @ResponseBody
    @RequestMapping("/ajaxTest")
    public String ajaxTest(){
        return "AJAX 是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下。";

    }
}

index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>主页</title>
<script type="text/javascript">
//<![CDATA[
function ajaxTest()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4&&xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","/ajaxTest",true);
    xmlhttp.send();
}
//]]>
</script>
</head>
<body>
<h2>使用 AJAX修改该文本内容</h2>
<button type="button" onclick="ajaxTest()">修改内容</button>
<div id="myDiv">
</div>
</body>
</html>

Thymeleaf使用标准的XML语法解析视图文件，所以&符号理应被转义；但是JS又要求&符号不能被转义。所以，可以使用<![CDATA[JS代码]]>语法将需要转义的&符号包裹起来；但是这样一来，又不符合HTML语法了。但是，如果使用//将<![CDATA[JS代码]]>注释掉，就既能符合XML语法又能符合HTML语法了。

AJAX学习-JavaScript