1 Ajax 简介

1.1 Ajax 是什么

Ajax (Asynchronous JavaScript and XML) 是一种 Web 利用技术, 能够借助客户端脚本 (javascript) 与服务端利用进行异步通信，获取服务端数据当前, 能够进行部分刷新。进而进步数据的响应和渲染速度。

1.2Ajax 技术利用场景

1）Ajax 技术最大的劣势就是底层异步，而后进行部分刷新，进而进步用户体验，这种技术当初在很多我的项目中都有很好的利用。
2）Ajax 能够仅向服务器发送并取回必要的数据，并在客户端采纳 JavaScript 解决来自服务器的响应。这样在服务器和浏览器之间替换的数据大量缩小，服务器响应的速度就能够放慢。
劣势是：不能之间进行跨域拜访

2 Ajax 疾速入门

2.1 申请响应过程剖析

所有的 Ajax 申请都会基于 DOM(HTML 元素)事件，，通过 XHR(XMLHttpRequest)对象实现与服务端异步通信部分刷新。

2.2Ajax 利用的编程步骤如下

1）基于 dom 事件创立 XHR 对象(XMLHttpRequest 对象)
2）注册 XHR 对象监听状态，通过回调函数（callback）解决状态信息
3）创立于服务端的连贯
4）发送异步申请实现与服务端的通信

2.3Ajax 入门代码繁难实现

业务形容, 设计如下页面, 在页面上点击 Get Request 按钮时, 向服务端发送异步申请获取服务端数据, 而后将响应后果更新到页面上.

2.3.1 第一步服务端代码设计

**
package com.cy.ajax.controller;
@Controller
@RequestMapping("/")
public class AjaxController {@RequestMapping("doAjax01UI")
 public String doAjax01UI() {return "ajax-01";}
 // 解决 ajax 申请的服务端设计
 @RequestMapping("doAjaxGet")
 @ResponseBody // 将办法返回值以字符串模式进行输入
 public String doAjaxGet() throws Exception{System.out.println("==doGet()==");
 //Thread.sleep(3000);// 模仿耗时操作
 return "Ajax Get request result";
 }
}

2.3.2 客户端代码设计

客户端页面要害 dom 元素设计

<!-- Ajax 形式的异步申请测试 -->
 <fieldset> <!-- 分组设置 -->
 <legend> 异步申请 </legend>
 <button onclick="doAjaxGet()">Get Request</button>
 <span id="ajaxResultId">loading data ....</span>
 </fieldset>

客户端页面中要害 Ajax 代码设计与实现

//Ajax 形式的申请
 function doAjaxGet(){// 谬误调试:debugger,console.log(), 排除法
 //1. 创立 XHR 对象
 var xhr=new XMLHttpRequest();
 //2. 设置状态监听(将服务端响应的后果更新到 ajaxResultId 地位)
xhr.onreadystatechange=function(){//console.log(xhr.readState);  if(xhr.readyState==4&&xhr.status==200){console.log(xhr.responseText);
document.getElementById("ajaxResultId").innerHTML=xhr.responseText;
  }
 };
 //3. 建设连贯
xhr.open("GET","http://localhost/doGet",true);//true 示意异步(底层会启动线程与服务端通信)
 //4. 发送申请
 xhr.send();}

3 Ajax 技术进阶实现

3.1Ajax 要害代码的封装

在理论编程过程中咱们通常会封装代码共性。提取代码个性，而后来进步代码的可重用性。例如：
第一步：封装 Ajax Get 申请，要害代码剖析如下：

function doAjaxGet(url,params,callback){
 //1. 创立 XmlHttpRequest 对象
 var xhr=new XMLHttpRequest();
 //2. 设置状态监听，监听 XmlHttpRequest 对象与服务端通信的过程(例如连贯是否建设，申请是否在解决，响应是否已产生)
xhr.onreadystatechange=function(){//callback(回调函数)
 // 基于 xhr 对象获取的通信状态，对响应数据进行解决
 //readyState 状态阐明
 //0：未初始化，尚未调用 open() 办法
 //1：启动。曾经调用 open() 办法，但尚未调用 send() 办法
 //2：发送。曾经调用 send() 办法，但尚未接管到响应
 //3：接管。曾经接管到局部响应
 //4：实现。曾经接管到全副响应数据，而且曾经能够在客户端应用了
if(xhr.readyState==4&&xhr.status==200){//500 示意服务端出错了
  // 服务端响应的后果会传递给 XHR 对象，咱们能够借助 responseText 获取响应后果
  callback(xhr.responseText);
 }
 }
 //3. 创立与服务端的连贯
xhr.open("GET",url+"?"+params,true);//true 示意异步
 //4. 发送申请
 xhr.send(null); //Get 申请，send 办法不传内容
 //5. 对响应后果进行解决(在回调函数中解决)。}

第二步：封装 Ajax Post 申请

function doAjaxPost(url,params,callback){
//1. 创立 XmlHttpRequest 对象
var xhr=new XMLHttpRequest();
//2. 设置状态监听，监听 XmlHttpRequest 对象与服务端通信的过程.
xhr.onreadystatechange=function(){//callback(回调函数)
// 基于 xhr 对象获取的通信状态，对响应数据进行解决
if(xhr.readyState==4&&xhr.status==200){//500 示意服务端出错了
// 服务端响应的后果会传递给 XHR 对象，// 咱们能够借助 xhr.responseText 获取响应后果
callback(xhr.responseText);
}
}
//3. 创立与服务端的连贯
xhr.open("POST",url,true);//true 示意异步
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4. 发送申请
xhr.send(params); //post 申请将参数写到 send 办法
//5. 对响应后果进行解决(在回调函数中解决)。}

第三步：在业务办法中利用封装好的代码