## 什么是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; @Controller public 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的对象插入内容