Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度。
传统Web应用中简易的同步模型分析，如图所示：
基于Ajax技术的异步请求响应模型分析，如图所示：
Ajax技术最大的优势就是底层异步,然后局部刷新,进而提高用户体验,这种技术现在在很多项目中都有很好的应用,例如:
商品系统。评价系统。地图系统。…..AJAX可以仅向服务器发送并取回必要的数据，并在客户端采用JavaScript处理来自服务器的响应。这样在服务器和浏览器之间交换的数据大量减少，服务器响应的速度就更快了。但Ajax技术也有劣势，最大劣势是不能直接进行跨域访问。
传统Web应用中的，同步请求应用时序模型分析，如图所示：
在上图中，客户端向服务端向服务端发送请求需要等待服务端的响应结果，服务端返回数据以后，客户端可以继续发送请求。
基于Ajax技术的Web异步请求响应模型如图所示：
在上图中，客户端可以向服务端发送异步请求，客户端无需等待服务端的响应结果，可以不断向服务端发送请求。
所有的Ajax 请求都会基于DOM(HTML元素)事件，通过XHR（XMLHttpRequest）对象实现与服务端异步通讯局部更新，如下图所示：
基于上图的分析,Ajax应用的编程步骤如下:
第一步：基于dom事件创建XHR对象(XMLHttpRequest对象)
第二步：注册XHR对象状态监听，通过回调函数(callback)处理状态信息。
第三步：创建与服务端的连接
第四步：发送异步请求实现与服务端的通讯
业务描述,设计如下页面,在页面上点击Get Request按钮时,向服务端发送异步请求获取服务端数据,然后将响应结果更新到页面上.
第一步:服务端代码设计
创建AjaxController类,用于处理客户端请求
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"; } }第二步:客户端代码设计
客户端页面关键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(); }构建ajax-02页面,首先,在文本框中注册焦点事件,基于焦点事件判断输入内容是否存在.其次点击save按钮时,将用户内容异步提交到服务器端.
在服务端AjaxConotroller中添加如下代码,处理客户端请求:
private List<String> names=new ArrayList<String>();//假设这是存储数据的表 @RequestMapping("doAjax02UI") public String doAjax02UI() { return "ajax-02"; } /**通过此方法校验名字是否存在*/ @RequestMapping("doCheck") @ResponseBody public String doCheck(String name) { if(names.contains(name)) return "名字"+name+"已经存在,请选择其它名字"; return "名字"+name+"不存在,可以注册"; } /**将客户端请求数据写入到names对应的集合*/ @RequestMapping("doSave") @ResponseBody public String doSave(String name) { System.out.println("name="+name); names.add(name); return "save ok"; }构建ajax-02页面,然后添加关键元素.
第一步:html关键表单元素设计
<h1>The Ajax 02 Page</h1> <fieldset> <legend>Ajax 表单请求</legend> <form> <input type="text" name="name" id="nameId" onblur="doCheck()" onfocus="doClear()"> <input type="button" onclick="doSave()" value="Save"> </form> <span id="result"></span> </fieldset>第二步:添加JS关键业务代码
<script type="text/javascript"> function doClear(){ document.getElementById("result").innerHTML=""; } function doSave(){ //1.创建XHR对象 var xhr=new XMLHttpRequest(); //2.设置状态监听 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>"; } }; //3.打开链接 //var name=document.getElementById("nameId").value; var name=document.forms[0].name.value; xhr.open("POST","/doSave",true); //post请求要设置请求头(规定) xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //4.发送请求 xhr.send("name="+name);//Post请求send方法传值 } function doCheck(){//在此函数中向服务端发起异步请求,检测name是否存在 //1.创建XHR对象 var xhr=new XMLHttpRequest(); //2.设置状态监听 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ document.getElementById("result").innerHTML="<font color='red'>"+xhr.responseText+"</font>"; } }; //3.打开链接 //var name=document.getElementById("nameId").value; var name=document.forms[0].name.value; console.log("name",name); xhr.open("GET","/doCheck?name="+name,true); //4.发送请求 xhr.send(null);//Get请求send方法传值 }调用过程分析：
在实际编程过程中我们通常会封装代码共性,提取代码特性.然后来提高代码的可重用性.例如:
第一步:封装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.对响应结果进行处理(在回调函数中处理)。 }第三步:在业务方法中应用封装好的代码,例如:
保存业务的关键客户端代码分析及实现.
function doSave(){ //1.定义请求url var url="doSave"; //2.定义请求参数 var params="name="+document.forms[0].name.value; //3.发送异步的post请求 doAjaxPost(url,params,function(result){ document.getElementById("result").innerHTML=result; }) }检查名字是否存在的关键客户端代码实现
function doCheck(){//在此函数中向服务端发起异步请求,检测name是否存在 //1.定义请求url var url="doCheck"; //2.定义请求参数 var name=document.forms[0].name.value; var params="name="+name; //3.发送异步Get请求 doAjaxGet(url,params,function(result){ document.getElementById("result").innerHTML=result; }) }调用过程分析：
断点：调试分析：
我们在实际的js编程中经常会以面向对象的方式进行实现，例如doAjaxGet函数如何以对象方式进行调用呢？关键代码分析如下：
(function(){ //定义一个函数，可以将其连接为java中的类 var ajax=function(){} //在变量ajax指向的类中添加成员，例如doAjaxGet函数，doAjaxPost函数 ajax.prototype={ doAjaxGet:function(url,params,callback){ //创建XMLHttpRequest对象，基于此对象发送请求 var xhr=new XMLHttpRequest(); //设置状态监听(监听客户端与服务端通讯的状态) xhr.onreadystatechange=function(){//回调函数，事件处理函数 if(xhr.readyState==4&&xhr.status==200){ //console.log(xhr.responseText); callback(xhr.responseText);//jsonStr } }; //建立连接(请求方式为Get,请求url,异步还是同步-true表示异步) xhr.open("GET",url+"?"+params,true); //发送请求 xhr.send(null);//GET请求send方法不写内容 }, doAjaxPost:function(url,params,callback){ //创建XMLHttpRequest对象，基于此对象发送请求 var xhr=new XMLHttpRequest(); //设置状态监听(监听客户端与服务端通讯的状态) xhr.onreadystatechange=function(){//回调函数，事件处理函数 if(xhr.readyState==4&&xhr.status==200){ //console.log(xhr.responseText); callback(xhr.responseText);//jsonStr } }; //建立连接(请求方式为POST,请求url,异步还是同步-true表示异步) xhr.open("POST",url,true); //post请求传参时必须设置此请求头 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //发送请求 xhr.send(params);//post请求send方法中传递参数 } } window.Ajax=new ajax();//构建ajax对象并赋值给变量全局变量Ajax })()此时外界再调用doAjaxGet和doAjaxPost函数时，可以直接通过Ajax对象进行实现。
jQuery是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery中基于标准的ajax api 提供了丰富的Ajax函数应用，基于这些函数可以编写少量代码，便可以快速实现Ajax操作。常用函数有：
ajax(…)get(…)getJSON(…)post(…)…说明:jquery 中ajax相关函数的语法可参考官网(jquery.com).
get函数应用,代码如下
//向服务端发送Ajax Get 请求 function doGet(){ //1.定义请求的url var url="doAjaxGet"; //2.定义请求的参数 var params="msg=hello jquery ajax get"; //3.发送异步Get请求 //这里的$符号为jQuery中的一个对象 //get(url[,params][,callback][,dataType])为jquery中的一个ajax函数 $.get(url,params,function(result){ //document.getElementById("result").innerHTML=result; $("#result").html(result); },"text");//在这个函数中你看到ajax的代码了吗? }post函数应用,代码如下
//向服务端发送Ajax Post 请求 function doPost(){ //1.定义请求的url var url="doAjaxPost"; //2.定义请求的参数 var params="msg=hello jquery ajax Post"; //3.发送异步POST请求 //这里的$符号为jQuery中的一个对象 //post(url[,params][,callback][,dataType])为jquery中的一个ajax函数 $.post(url,params,function(result){//post请求一般用于向服务端提交数据 $("#result").html(result); });//在这个函数中你看到ajax的代码了吗? }ajax函数应用
//向服务端发送Ajax Post 请求 function doAjax(){ //1.定义请求的url var url="doAjaxGet"; //2.定义请求的参数 var params="msg=hello jquery ajax request"; //3.发送异步Get请求 //这里的$符号为jQuery中的一个对象 $.ajax({ type:"GET",//表示get请求(默认为get),省略不写为Get url:url,//":"左边的内容为语法定义,我们不能修改.":"右边为我们自己定义 data:params,//请求参数 async:true,//true表示异步 success:function(result){ //回调函数 $("#result").html(result); } });//在这个函数中你看到ajax的代码了吗? }load函数应用
function doLoad(){ //1.定义请求的url var url="doAjaxGet"; //2.定义请求的参数 var params="msg=hello jquery ajax request"; //3.发送异步Get请求 //在指定位置异步加载url对象的资源, //在当前应用中表示把url对象的资源呈现到#result位置. //$("#result").load(url,params,function(){//回调函数,资源加载完成执行此函数 // console.log("load complete"); //}); $("#result").load(url);//假如不向服务端传值,不需要处理load完以后的结果,还可以这样写 }使用ajax特点为: 局部刷新,异步响应. 同步缺点: 如果进行了同步的请求,那么用户不可以做任何的操作,只能等待任务的完成. 用户的友好性差.
