快速上手ajax
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
