使用jQuery写了一个简单的窗口和异步刷新
使用Jquery做Ajax应用，简化了繁琐的JavaScript传统的代码书写，也便于了理解。
一下使用Jquery写的一个简单的例子：
用是：一个简单的用户注册验证的信息，AJax应用简化了传统模式的使用FROM形式提交数据，而是通过JavaScript的一个事件出发某个域中的内容提交到服务端，通过异步的形式提交，别且不影响当前也的刷新，给用户增强了友好的体验。
客户端：
<body>
<input type="text" id="username" name="username" onblur="verify()" />
<input name="check" type="button" value="检查" onclick="verify()" />
<div id="result" style="color:#ff0000;">
</div>
</body>
又两个域一个是被提交的内容域，另一个是检验的，当然了，注意：onblur="verify()" 和onclick="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' />");
}
}
}
}
附件：能直接运行的项目代码：