jquery是对javascript很好的封装，而且很轻量级，可以近似的将其称其为框架，下面就来对比javascript与jquery对ajax的实现，以突出jquery对其封装后，在实现方便的简易性，而且不仅如此，用jquery代替javascript来实现一些功能对于浏览器的兼容性也会带来意想不到的好处；
首先也一个简单的页面端：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户名校正的ajax实例</title>
<script type="text/javascript" src="jslib/verifyown.js"></script>
</head>
<body>
用户名校正的ajax实例,请输入用户名：<br/>
<input type ="text" id="userName"/><span id="result"></span> <br/><div id="result"></div>
<input type="button" value="检验" onclick="verify()"/>
</body>
</html>
页面端定义了一个单击事件onclick = "verify()";即点击按钮后调用事件方法verify()；
这里我们首先用javascript来实现整个ajax
//用户校验的方法 //这个方法将使用XMLHttpRequest对象进行AJAX的异步交互 var xmlhttp;//设定全局变量，使回调函数也能使用它 function verify(){ //1.dom的方法获文本框中的值方法 // document.getElementById("username")是dom获取元素节点的一种方法，一个元素节点对应HTML页面中的一个标签，如<input> //value可以获取一个元素节点的value属性值 var userName=document.getElementById("userName").value //2.创建XMLHTTPRequest对象 //这是XMLHTTPRequest对象使用中最复杂的一步 //需要针对IE和其他类型的浏览器建立这个对象的不同方式写不同的代码 if(window.XMLHttpRequest){ //针对firefox Mozillor Opera Safari,IE7,IE8 xmlhttp=new XMLHttpRequest(); //针对某些特定版本的 Mozillor 的浏览器的bug进行修正 if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/xml"); } }else if(window.ActiveXObject){ //针对IE6 IE5.5 IE5 //两个可以用于创建XMLHttpRequest对象的控件名称，保存在一个js的数组中 //排在前面的版本较新 var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for( var i = 0;i < activexName.length;i++){ try{ //取出一个创建名进行创建，如果创建成功就终止循环 //如果创建失败，会抛出异常，然后可以继续循环，继续尝试连接 xmlhttp=new ActiveXObject(activexName[i]); break; }catch(e){ } } } //确认XMLHttpRequest创建成功 if(!xmlhttp){ alert("XMLHttpRequest创建失败！"); return; }else{ alert(xmlhttp.readyState); } //2.注册回调函数 //该处注册函数时，只需函数名，不需加括号 //我们需要将函数名注册，如果加上括号，就会把函数返回值注册上，这是错误的 xmlhttp.onreadystatechange=callback; //3.设置连接信息 //第一个参数表示Http的请求方式，支持所有的Http请求方式，主要使用get和post。 //第二个参数表示请求的URL地址，get方式请求的参数也在URL中， //第三个参数表示采用同步还是异步，true表示采用异步 xmlhttp.open("GET","AjaxServer?name="+userName,true); /*post方式的请求 xmlhttp.open("POST","AJAXServer",true); post方式需要自己设置http的请求头 xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded") xmlhttp.send("name"+username); */ //4.发送信息，和服务器端交互 //同步方式下，send这句话会在服务器端的数据回来后才执行完 //异步方式下，send这句话会立即执行完 xmlhttp.send(null); } function callback(){ alert(xmlhttp.readyState); //测试 readyState 的不同时间的状态 , //判断对象的状态是交互完成 if(xmlhttp.readyState==4){ //判断http的交互是否成功 if(xmlhttp.status==200){ //最好不要将两个if条件写一起，因为开始readyState会有0，1，2，3的过程，此时都会调用回调函数，此是就不满足判断的条件了 // 获取服务器端返回的数据 //获取服务器端输出的纯文本数据 var responseText=xmlhttp.responseText; //将数据显示在页面上 // 通过dom方式找到div标签所对应的元素的节点 var divNode=document.getElementById("result"); //设置元素节点中html的内容 divNode.innerHTML = responseText; } } }
代码中已经包含了详细的注释了，我这里就不进行解释了；
下面采用jquery来实现上面的代码：
//定义用户名校正的方法 function verify(){ //首先测试下页面的按钮按下，可以调用这个方法 //使用javascript里的alert方法，显示个弹出提示框 // alert("按钮被按下"); 测试是否已进到了js内 //1获取到文本框中的内容 // document.getElementById("username") dom的获取方法 //jquery查找节点的方式，参数中的#加id参数值可以找到一个节点 //jquery的方法返回的都是jquery的对象，可以在上面继续执行其他的jquery方法 var jqueryObj= $("#userName") //获取节点的值 var userName=jqueryObj.val(); // alert(userName);测试是否得到username //2.将文本框的数据发送给服务器端的servlet //使用jquery的XMLHttprequest对象get请求的封装 $.get("AjaxServer?name="+userName,null,callback); } //回调函数,data为服务器端返回的数据 function callback(data){ //alert("服务器端的数据回来了");测试与服务器端的交互 //3.接受服务器端返回的数据 // alert(data); 测试data //4.将服务器端返回的数据动态的显示在页面上 // 找到保存数据的节点 var resultObj=$("#result"); //动态的改变页面中div的内容 resultObj.html(data); }
大家发现了吧，用jquery来实现，出去注释以后代码不足10行，可见jquey已经帮我们做了大量的基础工作了
为了将整个过程展示下，我现在将后台的操作类AjaxServer.java也进行实现，我这里为了简单起见就不使用框架了，直接用servlet进行实现：
package com.xidian.ajax; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.ServletException; import java.io.IOException; import java.io.PrintWriter; import java.net.URLDecoder; public class AjaxServer extends HttpServlet { protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { try{ httpServletResponse.setContentType("text/html;charset=utf-8"); PrintWriter out= httpServletResponse.getWriter(); Integer inte = (Integer)httpServletRequest.getSession().getAttribute("total"); //用来测试缓存的；在IE下如果多次请求的地址相同，则他不会再去服务器端交互读数据，而是直接读取缓存 int temp=0; if(inte==null){ temp=1; }else{ temp=inte.intValue()+1; } httpServletRequest.getSession().setAttribute("total",temp); //1.取参数 String old =httpServletRequest.getParameter("name"); // String name=new String(old.getBytes("iso8859-1"),"utf-8"); //处理中文乱码1，需和前台js文件中的encodeURI配合 String name= URLDecoder.decode(old,"utf-8"); //处理中文乱码2 //2.检查参数是否有问题 if(old==null||old.length()==0){ out.println("用户名不能为空！"); } else{ //String name=old; //3.校验操作 if(name.equals("123")){ //4.与传统应用不同的是，这一步将用户感兴趣的数据返回给页面端。而不是将一个新的页面返回给页面端 //写法没有改变，本质变化了 out.println("用户名【"+name+"】已经存在，请使用其他的用户名！,"+temp); } else{ out.println("用户名【"+name+"】未存在，您可以使用该用户名！,"+temp); } } }catch(Exception e){ e.printStackTrace(); } } protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException { doGet(httpServletRequest,httpServletResponse); } }
大家在上面的代码时可以看到这里对缓存的处理，其实我们在时间应用中很少会这样处理，这里我只是为了就这个问题而写了上面的代码，我们一般情况下是不希望浏览器
去读取缓存的，所有我们为了骗过浏览器，就会在Ajax请求的地址中加上一个参数时间戳，这样就能保证每次请求的地址都不一样的了；
具体的使用大家可以去看：http://www.cnblogs.com/shenliang123/archive/2012/04/19/2456758.html
还有就是基于Ajax的两种交互方式：http://www.cnblogs.com/shenliang123/archive/2012/04/19/2456800.html
我们这边实现的是基于HTML交互的；