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.对响应后果进行解决(在回调函数中解决)。
}

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