先弄个例子吧
第一个例子追求简单,用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提交" οnclick="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 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" src="common/jquery-1.6.js"></script> <script type="text/javaScript" language="javaScript"> $(document).ready(function() { $("#send").click(function() { htmlobj = $.ajax({ url : "/ajax/AjaxServlet", async : false }); $("#resTest").html(htmlobj.responseText); }); }); </script> </head> <body> <form> <input id="send" type="button" value="AJAX提交"> <div id="resTest"></div> </form> </body> </html>
JQuery实现AJAX,代码精简了很多,可是好难看懂。
下篇文章再细细总结吧。
我把连个都做了项目,在附件中可以查看。
web的url都是ajax不是项目名,我改了。