先弄个例子吧
第一个例子追求简单，用jsp servlet javaScript实现一个AJAX小例子
只要点页面上一个按钮，不刷页面，从后台取一个值，让后显示在也面上就好
再点一下，不出现重复出现第二个就行。
?
先贴一下代码
jsp页面：ajax.jsp
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>hello_ajax_js</title>
<script type="text/javaScript" language="javaScript">
var xmlHttpReq = null;
function ajax() {
xmlHttpReq = new XMLHttpRequest();
if(xmlHttpReq != null){
xmlHttpReq.open("GET","AjaxServlet",true);
xmlHttpReq.onreadystatechange=callBack;
xmlHttpReq.send();
}
}
function callBack(){
if(xmlHttpReq.readyState == 4 ) {
if(xmlHttpReq.status == 200) {
document.getElementById("resTest").innerHTML = xmlHttpReq.responseText;
}
}
}
</script>
</head>
<body>
<form>
<input type="button" value="AJAX提交" onclick="ajax();">
<div id="resTest"></div>
</form>
</body>
</html>
?
web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"> <display-name></display-name> <servlet> <servlet-name>ajax</servlet-name> <servlet-class>cn.zinue.servlet.AjaxServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>ajax</servlet-name> <url-pattern>/AjaxServlet</url-pattern> </servlet-mapping> <welcome-file-list> <welcome-file>ajax.jsp</welcome-file> </welcome-file-list> </web-app>
?
AjaxServlet.java
package cn.zinue.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
PrintWriter out = resp.getWriter();
System.out.println("AjaxServlet.doGet invoke....");
out.println("Hello World");
out.flush();
}
}
?
来分析一下关键代码
ajax函数用来异步获取信息
callBack是回调函数
var xmlHttpReq = null;
?用来装入XMLHttpRequest对象，她是全局变量，所以，当请求从服务器返回时，它还是存在的
xmlHttpReq.open("GET","AjaxServlet",false);
?open()方法初始化XMLHttpRequest对象，指定HTTP方法和服务器指定的URL，第三个参数为true表示异步，默认页是异步。
这里同步理解为阻塞，异步理解为非阻塞即可。
xmlHttpReq.onreadystatechange=callBack;
?因为要注册的是异步调用，那什么时候回调方法执行呢？
这里时机是当readyState改变时，改变时会触发onreadystatechange事件，所以把回掉方法callBack注册给这个事件。
xmlHttpReq.send();
?send方法发送请求，因为这里是GET方法所以不传参数。
?
再来看回调函数，执行之前先确定一下readyState
xmlHttpReq.readyState == 4
?表示请求完成
xmlHttpReq.status == 200
表示相应成功?
?
到此为止传统JavaScript实现AJAX的小栗子已经完成
?
看js操作XMLHTTPRequest再来看一下JQuery实现AJAX
?
<%@ page lan
