使用Jquery做Ajax应用,简化了繁琐的JavaScript传统的代码书写,也便于了理解。
一下使用Jquery写的一个简单的例子:
用是:一个简单的用户注册验证的信息,AJax应用简化了传统模式的使用FROM形式提交数据,而是通过JavaScript的一个事件出发某个域中的内容提交到服务端,通过异步的形式提交,别且不影响当前也的刷新,给用户增强了友好的体验。
客户端:
<body>
<input type="text" id="username" name="username" οnblur="verify()" />
<input name="check" type="button" value="检查" οnclick="verify()" />
<div id="result" style="color:#ff0000;">
</div>
</body>
又两个域一个是被提交的内容域,另一个是检验的,当然了,注意:οnblur="verify()" 和οnclick="verify()",事件。
处理数据的JS代码用jQuery写的如下:
/** * 定义校验 **/ function verify() { /** * 1、获取input 中的内容。 */ //jQuery每个函数返回的是jQuery自己的一个对象,我们可以其上去操作一些其他的jQuery方法 // document.getElementById("username"); DOM /** *2、 送数据给Servlet * 调用XMLHTTPRequest对象 * jQuery.get(url,[data],[callback],[type]) */ $j.get("ajaxServlet?username="+$j("#username").val(),null,function(data){ //alert(data); $j("#result").html(data); }); /** * 3、servlet 返回数据并接受 */ /** * 4、显示数据到页面上来 */ //alert(username); }
再看看繁琐的传统的JavaScript写的代码:
function verify() { var username = document.getElementById("username").value; var xhr; if(window.XMLHttpRequest()) { xhr = new XMLHttpRequest(); if(xhr.overrideMimeType) { xhr.overrideMimeType("text/xml"); } }else if(window.ActiveXObject) { var activeName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; for(var i = 0;i<activeName.length;i++) { try { xhr = new ActiveXObject(activeName[i]); break; }catch(e) { //alert(e); } } // xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //程序的健壮性 if(!xhr) { alert("独享创建失败"); return; } /** * 3servlet */ xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status==200) { var responseText = xhr.responseText; var divNode = document.getElementById("result"); divNode.innerHTML = responseText; } } xhr.open("GET","ajaxServlet?username="+username,true); /** * GET方式下没有数据可以发送 */ xhr.send(null); /** * 4ʾݵҳ */ //alert(username); /** * post 的写法 */ /* xhr.onreadystatechange=function() { if(xhr.readyState == 4 && xhr.status==200) { var responseText = xhr.responseText; var divNode = document.getElementById("result"); divNode.innerHTML = responseText; } } xhr.open("POST","ajaxServlet",true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send("username="+username);*/ }
服务端一个很简单的Servlet
package org.bestupon.ajax.servlet;
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;
/**
* Created by IntelliJ IDEA.
* User: bestupon
* Date: 2009-9-30
* Time: 11:27:29
* Email:bestupon@foxmail.com
* To change this template use File | Settings | File Templates.
*/
public class AJAXServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//处理
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String userName = request.getParameter("username");
//2检查
if(null == userName || userName.length() == 0) {
out.println("the user name not null");
}else {
//验证
String realityName = userName.trim();
if(realityName.equals("bestupon") ) {
out.println("userName["+realityName+"]already exit in system");
}else{
out.println("<input type='text' value='your very luckly the ["+realityName+"] can used for sys' />");
}
}
}
}
附件:能直接运行的项目代码: