`
零度弥合
  • 浏览: 19345 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
heruyi
社区版块
存档分类
最新评论

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

 
阅读更多

先弄个例子吧

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

分享到：
| 【自虐1.2】Srping+MyBatis完成CRUD
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics