Ajax：（Asynchronous JavaScript And Xml）是一种整合了JavaScript、XML、CSS等现有技术
Ajax工作流程：
纯javaScript的Ajax请求
XMLHttpRequest
XMLHttpRequest对象可以提供在不刷新当前页面的情况下向服务器发送异步请求，并接收服务器端的返回结果。
1.创建XMLHttpRequest对象语法
老版本IE（IE5和IE6）
XMLHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
新版本IE和其他大部分浏览器（推荐使用）
XMLHttpRequest = new XMLHttpRequest();
2.XMLHttpRequest对象常用属性和方法
常用属性
| 属性名称 |
说明
|
|
readyState
|
返回请求的当前状态
常用值：
0——未初始化
1——开始发送请求
2——请求发送完成
3——开始读取相应
4——读取响应结束
|
|
status
|
HTTP相应状态码：
200——相应正常
400——错误请求，如语法错误
403——没有访问权限
404——资源不存在
500——服务器内部错误
|
|
responseText
|
以文本形式获取相应值
|
|
responseXML
|
以XML形式获取相应值，并且解析成DOM对象返回
|
| statusText |
返回当前请求的相应行状态
|
| onreadystatechange |
设置回调函数
|
常用方法
|
方法
|
说明
|
|
open(String method,String url,boolean async,String user,String password)
|
用于创建一个新的HTTP请求 参数method：设置HTTP请求方法，如POST、GET等，不区分大小写 参数url:请求的url地址（如果是get请求，参数在这里拼接） 参数async：可选，指定此请求是否为异步方法，默认为true 参数user：可选，如果服务器需要验证，此处指定用户名，否则弹出验证窗口 参数password：可选，验证中的密码 |
|
send(String data)
|
发送请求到服务器端
参数data：字符串类型，通过此请求发送的数据。POST方式需要指定，GET方式则不指定
|
|
abort()
|
取消当前请求
|
|
setRequestHeader(String header,String value)
|
单独设置请求的某个HTTP头信息 参数header：要指定的HTTP头名称 参数value：要指定的HTTP头名称所对应的值 常用的：setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8") |
|
getResponseHeader(String header)
|
从响应中获取指定的HTTP头信息
参数header：要获取指定的HTTP头
|
|
getAllResponseHeaders()
|
获取相应的所有的HTTP头信息 |
服务器主要代码(s_1 servlet)
1 request.setCharacterEncoding("utf-8");
2 response.setHeader("content-Type", "text/html;charset=utf-8");
3 // 读取参数
4 String mail = request.getParameter("mail");
5 System.out.println("debug:mail:" + mail);
6 String result = "false";
7 if (mail.equalsIgnoreCase("qq")) {
8 result = "true";
9 }
10 // 输出结果
11 PrintWriter out = response.getWriter();
12 out.print(result);
13 out.flush();
JS代码(j_1)
1 /**
2 * 创建xmlHttpRequest对象
3 *
4 * 兼容版本
5 *
6 * 开发时间：2016-5-18 上午10:00:49
7 * @author MrFalse
8 */
9 function createXMLHttpRequest(){
10 // 定义变量
11 var request=null;
12 if(window.XMLHttpRequest){
13 request=new XMLHttpRequest();
14 }else{
15 // 兼容早期IE5、IE6浏览器
16 request=new ActiveXObject("Microsoft.XMLHTTP");
17 }
18 return request;
19 }
20 /**
21 * 验证邮箱
22 *
23 *
24 * 开发时间：2016-5-18 上午10:05:07
25 * @author MrFalse
26 * @param oInput
27 */
28 function checkUserName(oInput){
29 // 读取输入框的的值
30 var strUserName=oInput.value;
31 if(strUserName==null||strUserName==""){
32 userNameMessage.innerHTML="邮箱不能为空";
33 return;
34 }
35 // 创建XMLHttpRequest对象
36 var xmlHttpRequest=createXMLHttpRequest();
37 // 设置回调函数
38 xmlHttpRequest.onreadystatechange=function(){
39 if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){
40 var strReturnString=xmlHttpRequest.responseText;
41 if(strReturnString.indexOf("true")>=0){
42 userNameMessage.innerHTML="用户名已经被占用";
43 userNameMessage.className="red";
44 }else{
45 userNameMessage.innerHTML="用户名可以使用";
46 userNameMessage.className="blue";
47 }
48 }
49 }
50 var url="RegisterServlet";
51 xmlHttpRequest.open("post",url,true);
52 // 设置头信息
53 xmlHttpRequest.setRequestHeader("Content-Type",
54 "application/x-www-form-urlencoded;charset=utf-8");
55 // 参数数据,使用key=value&key=value……的方式
56 var urlParam="mail="+strUserName;
57 //发送请求
58 xmlHttpRequest.send(urlParam);
59 }
HTML代码(h_1)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>注册页面</title>
6 <script type="text/javascript" src="register.js"></script>
7 <style type="text/css">
8
9 .blue{
10 color: blue;
11 font-weight: normal;
12 }
13
14 .red{
15 color: red;
16 font-weight: bold;
17 }
18 </style>
19 </head>
20 <body>
21 <form action="">
22 <p>注册邮箱：<input type="text" onblur="checkUserName(this);"/>*<span id="userNameMessage"></span></p>
23 </form>
24 </body>
25 </html>
jQuery实现Ajax
jquery常用Ajax方法
$.ajax() 综合的请求，比较强大，功能较全，但是复杂$.get() get方式请求，但是带参数时转为post请求
$.post() post方式请求$.getJSON() 获取服务器返回的json数据$(selecter).load() 将服务器返回的数据加载到选择器选中的内容中
使用$.ajax()
1.服务器代码使用上面代码（s_1）
2.html代码(h_2)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>ajax请求jquery</title> 6 </head> 7 <body> 8 <form action=""> 9 <p><input type="text" name="email" id="email" onblur="requestxx(this);"/> 10 <span id="prompt">*</span> 11 </p> 12 </form> 13 </body> 14 </script> 15 </html>
3.为h_1添加jquery代码如下
encodeURI(thisobj.value)使用情况
1.get模式时
2.传参是url模式
3.参数中有中文
jq_1
1 <!-- 导入jquery库 -->
2 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
3 <script type="text/javascript">
4 function requestxx(thisobj){
5 //对中文进行uri编码
6 email=encodeURI(thisobj.value);
7 $.ajax({
8 url:"RegisterServlet",
9 type:"get",
10 data:"mail="+email,
11 //执行成功的回调函数
12 success:function(result,textStatus){
13 if(result.indexOf("true")>=0){
14 $("#prompt").text("用户名已经被占用");
15 }else{
16 $("#prompt").text("用户名可以使用");
17 }
18 },
19 //执行失败或错误的回调函数
20 error:function(){
21 alert("ajax执行失败");
22 }
23 });
24 }
25 </script>
使用$.get()
1.服务器代码使用上面代码（s_1）
2.html代码使用上面代码(h_2)
3.为h_2添加jquery代码如下
jq_2
1 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
2 <script type="text/javascript">
3 function check(input){
4 $.get("RegisterServlet","mail="+input.value,function(result){
5 if(result.indexOf("true")>=0){
6 $("#prompt").text("用户名已经被占用");
7 }else{
8 $("#prompt").text("用户名可以使用");
9 }
10 });
11 }
12 </script>
使用$.post()
1.服务器代码使用上面代码（s_1）
2.html代码使用上面代码(h_2)
3.为h_2添加jquery代码如下
jq_3 1 <script type="text/javascript">
2 function check(input){
3 $.post("RegisterServlet","mail="+input.value,function(result){
4 if(result.indexOf("true")>=0){
5 $("#prompt").text("用户名已经被占用");
6 }else{
7 $("#prompt").text("用户名可以使用");
8 }
9 });
10 }
11 </script>
使用$.getJSON()
1.服务器代码(s_2 Servlet)
1 request.setCharacterEncoding("utf-8");
2 //两种响应头都可以使用
3 response.setHeader("Content-Type", "application/json;charset=utf-8");
4 //response.setHeader("content-Type", "text/html;charset=utf-8");
5 PrintWriter out=response.getWriter();
6 //返回的json格式必须是严格的json格式，否则浏览器无法调用
7 out.print("{\"name\":\"张三\"}");
8 out.flush();
2.html代码
h_3
1 <button onclick="clickTest()">提交</button>
3.为h_2添加jquery代码如下
jq_4
1 <script type="text/javascript">
2 function clickTest() {
3 $.getJSON("ResponseJSON",function(data) {
4 alert(data.name);
5 })
6 }
7 </script>
使用$(selecter).load()
1.使用上面服务器代码s_2
2.html代码使用上面代码(h_2)
3.为h_2添加jquery代码如下
jq_5
1 <script type="text/javascript">
2 function check(input){
3 $("#prompt").load("RegisterServlet","mail="+input.value);
4 }
5 </script>
注意：
- 一定要注意JSON字符串的书写格式，如果传入的字符串不是JSON格式，如果传入的字符串不是JSON格式或者格式错误，将不能得到正确的值。
- 使用$.getJSON()方法时，默认从服务器接收到的数据就是JSON对象，不需要再使用$.parseJSON()方法去解析即可使用
$.parseJSON(str)的使用
demo
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>jqueryParseJSON</title>
6 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
7 <script type="text/javascript">
8 function test() {
9 //json的字符串
10 var jsonStr = '{"name":"张三","age":20}';
11 //解析成json对象
12 var jsonObj = $.parseJSON(jsonStr);
13 alert("name:" + jsonObj.name + "age:" + jsonObj.age);
14 }
15 </script>
16 </head>
17 <body>
18 <button onclick="test()">测试</button>
19 </body>
20 </html>
result:
来源：https://www.cnblogs.com/AIThink/p/5506707.html