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.对响应后果进行解决(在回调函数中解决)。}第三步：在业务办法中利用封装好的代码