【AJAX】传统JavaScript实现AJAX的小栗子

零度弥合

浏览: 20616 次
性别:
来自: 上海

最近访客更多访客>>

heruyi

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

J2EE基础

先弄个例子吧

第一个例子追求简单，用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 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不是项目名，我改了。

AJAX_01_helloAJAX.zip (9.2 KB)
下载次数: 0

AJAX_02_JQuery.zip (76.5 KB)
下载次数: 0

分享到：

【笔试面试】四道有点难笔试题（数据结构） | 【自虐1.2】Srping+MyBatis完成CRUD

2014-04-01 00:38
浏览 685
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论