## 什么是Ajax
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
1. 异步通信：浏览器利用独立的线程与服务器进行通信，交换少量信息。
2. 局部刷新：不更新全部页面，只对页面的局部进行更新。
## Ajax的优点
相对表单提交，全部页面更新来说：
1. 异步通信流量少，网络延迟少，用户体验好。
2. 局部刷新，只更新局部信息，避免了全部页面刷新，提升了用户体验。
## 如何进行异步通信
说明：浏览器中提供了异步通信组件XMLHttpRequest，调用其API即可实现异步通信
XMLHttpRequest 经常简称为 XHR 或 Ajax 对象
1.创建XHR对象：
var xhr = new XMLHttpRequest();
2.设置 xhr 对象的通信参数：
xhr.open("get","http://doc.tedu.cn/index.html", true);
> 默认情况下：AJAX 只能与当前页面的原网站进行通信（不能跨域名通信！）
3.发起通信：
xhr.send(); //发起get请求，不发送body
xhr.send(body);//发起post请求，携带body参数
4.获取通信结果：
var body = xhr.responseText;//响应body中的内容
监听通信状态事件：
xhr.onreadystatechange=function (){
//readyState==4 表示请求处理完成以后
//status==200 表示返回结果是正常的
if(xhr.readyState==4 && xhr.status==200){
var data = xhr.responseText;
console.log(data);
}
}
检查通信状态属性：
xhr.readyState
xhr.status
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript">/** * 异步通信 */function demo01(){ ???var xhr = new XMLHttpRequest(); ???//监听 xhr对象的状态改变事件 ???//在通信组件状态改变时候，会自动回调 事件函数 ???xhr.onreadystatechange=function (){ ???????//readyState==4 表示请求处理完成以后 ???????//status==200 表示返回结果是正常的 ???????if(xhr.readyState==4 && xhr.status==200){ ???????????var data = xhr.responseText; ???????????console.log(data); ???????} ???} ???xhr.open("get", "index.html", true); ???xhr.send(); ???//xhr通信是异步的，由send()发起的子线程进行通信， ???//在通信没有结束之前，responseText的内容一直是空的！ ???var body = xhr.responseText; ???console.log(body);//输出是 空的！！！}/** * 局部更新 */function demo02(){ ???var p = document.getElementById("msg"); ???p.innerHTML="这就是更新了！"; } /** * 异步通信+局部更新 */function demo03(){ ???var xhr = new XMLHttpRequest(); ???//注册通信成功事件, 在通信成功以后执行 ???xhr.onreadystatechange = function(){ ???????if(xhr.readyState==4 && xhr.status==200){ ???????????var msg = xhr.responseText; ???????????//局部刷新 ???????????var p = document ???????????????.getElementById("message"); ???????????p.innerHTML=msg; ???????} ???}; ???xhr.open("get", "msg.txt", true); ???xhr.send();}</script></head><body> ???<h1>Ajax 演示</h1> ???<input type="button" value="demo01" ????????onclick="demo01()"> ???<p id="msg">局部更新</p> ???<input type="button" value="demo02" ???????onclick="demo02()"> ???????????<h1>异步通信+局部更新</h1> ???<p id="message">显示信息</p> ???<input type="button" value="demo03" ???????onclick="demo03()"></body></html>---------------------------------------------------------------------------------------------------------------------
## 利用 AJAX 解决用户名存在检查
配置Spring MVC
1. 复制了 pom.xml 中的组件坐标
2. 复制 web.xml 中的前端控制器配置，等。
3. 复制Spring的配置文件
## 利用JSON简化服务器端编程
JSON： Java Script 的对象直接量书写规则（一种数据交换格式）
eg:
var obj = {}; //空对象
var user = {"name":"Tom", "age":10}; //包含属性的对象
var arr = [1,2,3,4];
var users = [{"name":"Jerry","age":10},{"name":"Tom","age":3}];
为了解决服务器向客户端传输多个对象数据，可以将多个数据对象封装为 JSON 规则字符串，将JSON字符串传输到客户端。
JSON 字符串可以通过JS API 简单的转换为 JS 对象。
package cn.tedu.ssm.controller;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.ResponseBody;@Controllerpublic class TestController { ???????//produces 可以在SpringMVC的控制器中设置响应的 ???//ContentType, 也包含服务端的编码 ???@RequestMapping(value="/checkUserName.do", ???????????produces="text/plain;charset=utf-8") ???//ResponseBody 注解是自动化注解，会自动解析控制器 ???//方法的返回值，并且将返回值填充到 响应消息的body中 ???//1. 如果控制器返回值是字符串，就直接将字符串放到body ???@ResponseBody ????public String checkUserName(String name){ ???????//模拟逻辑 ???????if("Tom".equals(name)){ ???????????return "已经注册"; ???????}else{ ???????????return "可以注册"; ???????} ???} ???????/* ????* 在控制器方法中返回 Java Bean 对象，与@ResponseBody ????* 注解配合时候，ResponseBody注解会自动调用Jackson ????* API 将 Java Bean 转换为 JSON 字符串，放到响应Body ????* 中，发送到浏览器。并且会自动设置 ContentType 头 ????* 以及 ContentType 中的编码 ?????*/ ???@RequestMapping("/check.do") ???@ResponseBody ???public Message check(String name){ ???????if("Jerry".equals(name)){ ???????????return new Message(0, "已经使用"); ???????}else{ ???????????return new Message(1, "可以注册"); ???????} ???} ???????}<!DOCTYPE html><html><head><meta charset="UTF-8"><title>注册</title></head><body> ???<h1>注册表单</h1> ???<form action="regist.do" method="post" ????????> ???????<h2>注册</h2> ???????<div> ???????????<label>用户：</label> ???????????<input id="name" type="text" name="name"> ???????????<span id="name-msg"></span> ???????????????????</div> ???????<div> ???????????<label>密码：</label> ???????????<input id="pwd" type="password" name="pwd"> ???????</div> ???????<div> ???????????<label>电话：</label> ???????????<input id="mobile" type="text" name="mobile"> ???????</div> ???????<div> ???????????<input type="submit" value="保存"> ????????</div> ???</form><script type="text/javascript">var nameField = document.getElementById("name");//为 nameField 添加失去焦点事件nameField.onblur=function(){ ???//console.log("失去焦点！"); ???//获取用户名 ???var name = document.getElementById("name").value; ???//发起异步通信将用户名传递到服务器 ???var xhr=new XMLHttpRequest(); ???xhr.onreadystatechange=function(){ ???????//通信完成以后，利用局部更新显示结果 ????????if(xhr.readyState==4 && xhr.status==200){ ???????????var msg=xhr.responseText; ???????????document.getElementById("name-msg") ???????????????.innerHTML=msg; ???????} ???}; ???//xhr.open("post", "checkUserName.do", true); ???//xhr.setRequestHeader("Content-Type", ????// ???????"application/x-www-form-urlencoded"); ???//xhr.send("name="+name); ???xhr.open("get", "checkUserName.do?name="+name, true); ???xhr.send();};</script></body></html><!DOCTYPE html><html><head><meta charset="UTF-8"><title>注册</title></head><body> ???<h1>注册表单</h1> ???<form action="regist.do" method="post" ????????> ???????<h2>注册</h2> ???????<div> ???????????<label>用户：</label> ???????????<input id="name" type="text" name="name"> ???????????<span id="name-msg"></span> ???????????????????</div> ???????<div> ???????????<label>密码：</label> ???????????<input id="pwd" type="password" name="pwd"> ???????</div> ???????<div> ???????????<label>电话：</label> ???????????<input id="mobile" type="text" name="mobile"> ???????</div> ???????<div> ???????????<input type="submit" value="保存"> ????????</div> ???</form><script type="text/javascript" src="jquery-1.4.2.js"></script><script type="text/javascript">$(function(){ ???$(‘#name‘).blur(function(){ ???????var n = $(‘#name‘).val(); ???????//异步请求: Jquery 封装了XHR，使用更加简便 ???????$.ajax({ ???????????url:‘check.do‘, ??//请求目标地址 ???????????data: {‘name‘:n}, //向服务器发送的数据 ???????????type: ‘post‘, ????//请求方式 ???????????dateType: ‘json‘, //服务器返回数据类型 ???????????success: function(obj){ //请求成功后执行的方法 ???????????????//obj 代表服务器返回的数据， ???????????????//返回数据已经解析为js对象 ???????????????//局部更新网页中的数据 ???????????????$(‘#name-msg‘).text(obj.message); ???????????} ???????}); ???});});</script></body></html>---------------------------------------------------------------------------------------------------------------------
##javascript中的innerHTML是什么意思，怎么个用法？
innerHTML在js中的功能：获取或插入对象内容。
eg1:
var obtain=document.getElementById("aa").innerHTML;//获取为aa的对象的内容
...
<div id="aa"></div>
...
eg2:
document.getElementById("abc").innerHTML;//向id为abc的对象插入内容
AJAX（表单验证）/JSON之一
原文地址：https://www.cnblogs.com/shijinglu2018/p/9532525.html