4.6.AJAX
4.6.1.什么是ajax
Ajax（Asynchronous JavaScript and XML , Asynchronous 异步的）指的是一种使用 JavaScript、XML 和 HTTP 请求进行前端数据异步交互的技术。Ajax 不需要刷新整个页面就可以更新其中的一部分，使得网页的反应更快、更灵活，用户体验更好。
通俗来说，Ajax 就是通过 JavaScript 发送 HTTP 请求到服务器，接收服务器的响应，并对网页内容进行更新，使得服务端和客户端之间不需要进行页面的完全刷新。
使用 Ajax 可以实现许多功能，如：
- 异步更新页面内容，来提高页面的动态性和响应速度，从而改善用户的使用体验。
- 通过动态获取数据，实现部分数据的更新，减少数据传输量，从而提高页面加载速度。
- 在不离开当前页面的情况下，提交表单并处理请求的响应结果。
- 实现在线自动检查和验证表单输入，避免提交错误的表单数据。
在 JavaScript 中使用 Ajax 技术通常需要通过 XMLHttpRequest （XHR）对象来完成，XHR 可以通过 JavaScript 代码向服务器发送请求和接收响应。也可以使用一些第三方库来简化 Ajax 请求，如 jQuery、fetch 等。
4.6.2.同步/异步
4.6.2.1.什么是同步请求？
同步请求是指当前发出请求后，浏览器什么都不能做，
必须得等到请求完成返回数据之后，才会执行后续的代码，
相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。
4.6.2.1.什么是异步请求？
异步请求就当发出请求的同时，浏览器可以继续做任何事，
Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
异步请求可以完全不影响用户的体验效果，
无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。
4.6.3.XMLHttpRequest
4.6.3.1.得到XMLHttpRequest对象
XMLHttpRequest 是JavaScript等脚本语言中使用的API，它通过HTTP协议异步向服务器发送请求，并获取服务器返回的响应。
最大的用处是提供与服务器异步通信的能力。
1999年上半年提出的。ie5.0首次使用的一个ActiveX对象，叫XMLHTTP。
2000年，Mozilla实现了相同接口的原生对象XMLHttpRequest。其它浏览器也相继实现了同样的对象。
var xhr;
function createXMLHttpRequest(){
var xmlRequest;
if(window.XMLHttpRequest){ //Mozilla
xmlRequest = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
xmlRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlRequest = new ActiveXObject(Microsoft.XMLHTTP);
}catch(e){
}
}
}
return xmlRequest;
}
4.6.3.2.XMLHttpRequest 对象方法
abort() : 停止发送当前请求
getAllResponseHeaders() : 获取服务器返回的全部响应头
getResponseHeaders() : 根据响应头的名字，获取对应的响应头
setRequestHeader("label","value") : 在发送请求之前，设置请求头
//设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
open（“method”，"URL",asyncFlag） : ( 核心方法 ) 建立与服务器URL的连接
method : 请求方式 get / post
url : 请求的资源URL
asyncFlag : true 异步请求 , false 非异步请求
send(content) : ( 核心方法 ) 发送请求 , 可以在括号中加入请求参数, 要通过 send() 传值 , open() 的method要设置成POST
// 无参数
xhr.send(null)
// 有参数
xhr.send("id=" + id + "&name=" + name);
4.6.3.3.XMLHttpRequest 对象属性
readyState : ( 核心属性 ) XHR对象的处理状态
0 XHR对象还没有完成初始化 尚未调用open()方法
1 XHR对象开始发送请求 已调用open()方法，但尚未调用send()方法
2 XHR对象的请求发送完成 已调用send()方法，但尚未接收到响应
3 XHR对象开始读取服务器的响应 已接收到部分响应数据
4 XHR对象读取服务器响应结束 已接收到全部响应数据，而且已经可以在客户端使用了
responseText : ( 核心属性 ) 文本形式的响应内容
responseXML : XML 形式的响应内容
status : ( 核心属性 ) 响应状态码
200 服务器响应正常
404 需要访问的资源不存在
500 服务器内部错误
statusText : 服务器返回的状态文本信息
4.6.3.4.XMLHttpRequest 对象事件
onreadystatechange : ( 核心事件 ) 用于指定XHR对象状态改变时的事件处理函数
ontimeout : IE8 支持 超时事件
load : firefox支持，只要接收到响应就处发的事件
porgress : 接到新数据j时触发
4.6.4.实例
4.6.4.1.页面 通过 send() 传参
<html>
<body>
<h1>hello ajax</h1>
<input onblur="ajaxTest(this)" value="ajax-test">
</body>
<script>
var xhr;
// 创建XHR对象
function createXMLHttpRequest(){
var xmlRequest;
if(window.XMLHttpRequest){ //Mozilla
xmlRequest = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
xmlRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlRequest = new ActiveXObject(Microsoft.XMLHTTP);
}catch(e){
}
}
}
return xmlRequest;
}
function ajaxTest(inp) {
console.log(inp.value)
// 得到XHR对象
xhr = createXMLHttpRequest()
var url = "/test";
// 发请求
xhr.open("POST", url)
// 监听事件
xhr.onreadystatechange = function () {
if (xmlRequest.readyState == 4) {
if (xmlRequest.status == 200) {
console.log( xmlRequest.responseText )
}
}
}
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
var data = 'data=' + inp.value;
xhr.send(data);
}
</script>
</html>
4.6.4.2.Controller接参
使用 @RequestParam("标识") 接参
使用 @ResponseBody 将默认 转页 转换成返回数据
package com.yuan.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class AjaxTestController {
@RequestMapping("/test")
@ResponseBody
public String test( @RequestParam("data") String data){
System.out.println("data = " + data);
return "response msg";
}
}
4.6.4.3.传对象(JSON)数据
修改 send() 传 对象 JSON结构 参数
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
var params = { data: inp.value };
xhr.send(JSON.stringify(params));
4.6.4.4.Controller 接收对象
通过 @RequestBody 接 对象, 再使用 JSONObject 将字符串转对象
@RequestMapping("/test")
@ResponseBody
public String test(@RequestBody String data){
System.out.println("data = " + data); // data = {"data":"ajax-test"}
JSONObject jsonObject = JSONObject.parseObject(data);
String value = jsonObject.getString("data");
System.out.println("value = " + value);
return "response msg";
}
