AJAX心得体会

在接触AJAX这个概念之前，觉得这东西好高端啊，熟悉了之后就觉得也没什么了不起，挺土的。

在WEB世界里，浏览器向服务器发送一次HTTP请求，服务器返回一个HTML页面。

栗子

提交表单时，页面会刷新，服务器会返回一个全新的html页面
百度的搜索框会根据用户输入的内容，即时进行联想，如果总是要刷新，肯定是不行的。

解决方法是，用JavaScript发送新的请求，接受到数据之后，再用JavaScript更新页面数据，这样用户感觉自己始终停留在一个页面（没有刷新）。

举个完整的栗子：

我用Spring Boot在本地部署了一个服务器，访问localhost:8080/greeting可以得到如下的结果：

返回值会根据请求里的name参数做出改变：

AJAX代码：

文件名：text.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<article>
    <h1>SOMETHING IS GOING TO HAPPEN</h1>
    <p id="content">

    </p>
</article>
<script src="test.js"></script>
</body>
</html>

文件名：text.js

let paragraph = document.getElementById('content');

function success(text) {
    paragraph.innerHTML = text;
}

function fail(code) {
    paragraph.innerHTML = 'Error code:' + code;
}

paragraph.innerHTML = 'BLACK LIVES MATTER';

let XHR = new XMLHttpRequest();

XHR.onreadystatechange = function () {
    if (XHR.readyState === 4) {
        if (XHR.status === 200) {
            return success(XHR.responseText);
        } else {
            return fail(XHR.status);
        }
    } else {
        alert('还在处理中');
    }
}

XHR.open('GET', 'http://localhost:8080/greeting', true);
XHR.send();

alert('请求已发送');

AJAX代码的核心是XMLHttpRequest对象，有了这个对象之后，先设置onreadystatechange的回调函数。可以根据readyState的值来判断请求是否已经完成，根据status值来判断响应的结果成功与否。

XMLHttpRequest对象的open方法有3个参数，第一个参数确定请求类型是GET还是POST，第二个参数是要请求的服务器的URL（此处是我之前部署的本地服务器），第三个参数布尔值指定是否异步执行。

值得一提的是CORS，我需要在我的服务器应用上设置正确的跨域请求策略（像是白名单的一种东西），才能让我的AJAX代码成功运行。在Spring里，需要这样做：

使用@CrossOrigin注解，可以指定允许来自哪些域名的跨域访问，“*” 代表允许任何域的跨域访问。