Ajax技术的基本原理(步骤)

ysj5125094

浏览: 1716465 次
性别:
来自: 沈阳

最近访客更多访客>>

ymcaptain

chenzehe

wangsw15

javaitface

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax

Ajax 浏览器 JSP XML json

我用一个简单的用户名验证的例子来谈一谈我对Ajax的了解:

这个例子用到了两个JSP和一个JS,我没有用后台来验证,因为原理是一样的.

1.用户注册表单页:ajaxCheckUser.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax检测用户名</title>
<script type="text/javascript" src="../js/ajaxCheckUser.js"></script>
</head>
<body>
	<form action="">
		用户名：<input type="text" id="username" onblur="checkUserAjax();"/><br/>
		<div id="msg"></div>
		密&nbsp;&nbsp;码：<input type="password" id="password"/><br/>
		Email：<input type="text" id="email"/><br/>
		<input type="button" id="submit" value="submit" />&nbsp;&nbsp;
		<input type="button" id="reset" value="reset" />
	</form>
</body>
</html>

2.用于说明Ajax技术的基本原理的JS文件:ajaxCheckUser.js

//当输入框失去焦点时触发些函数
function checkUserAjax(){
	//第一步:创建XMLHttpRequest对象
	var xhr = createXmlHttpRequest() ;
	//第二步:建立对服务器的调用
	/**
	 * open(method,url,asynch)方法和属性介绍
	 * 1.XMLHttpRequest 对象的 open 方法允许程序员用一个Ajax调用向服务器发送请求。
	 * 2.method：请求类型，类似 "GET"或"POST"的字符串。
	 * 	  若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符)。
	 *    若需要向服务器发送数据，用POST。
	 * 3.url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
	 * 	  在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。
	 *    如果对每个请求的响应不同，这就会带来不好的结果。把当前时间戳追加到URL的最后，就能确保URL的惟一性，从而避免浏览器缓存结果。
	 * 	  例如:var url = "GetAndPostExample?timeStamp=" + new Date().getTime();
	 * 4.asynch：表示请求是否要异步传输，默认值为true(异步)。
	 *    指定true，在读取后面的脚本之前，不需要等待服务器的相应。
	 *    指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。
	 */
	var username = document.getElementById("username").value ;//获得输入的用户名
	xhr.open("post","checkUser.jsp?username="+username,true) ;
	
	/**
	 * setRequestHeader()方法和属性介绍
	 * 1.当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。
	 *      首部信息用来声明一个请求是 GET 还是 POST 
	 * 2.Ajax 请求中，发送首部信息的工作可以由 setRequestHeader完成
	 * 3.参数header： 首部的名字;  参数value：首部的值。
	 * 4.如果用 POST 请求向服务器发送数据，需要将 "Content-type" 的首部设置为 "application/x-www-form-urlencoded".它会告知服务器正在发送数据，并且数据已经符合URL编码了。
	 * 5.该方法必须在open()之后才能调用
	 */
	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")//如果发送方式为POST时,需要设置首部信息 ;
	
	//第三步:向服务器发送请求
	/**
	 * send(data)方法和属性介绍
	 * 1.open 方法定义了 Ajax 请求的一些细节。send 方法可为已经待命的请求发送指令
	 * 2.data：将要传递给服务器的字符串
	 * 3.若选用的是 GET 请求，则不会发送任何数据， 给 send 方法传递 null 即可：xhr.send(null);
	 * 4.当向send()方法提供参数时，要确保open()中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null.
	 */ 
	xhr.send(null) ; 
	//第四步:接收服务器的处理结果
	/**
	 * 用 XMLHttpRequest 的方法可向服务器发送请求。在 Ajax 处理过程中，XMLHttpRequest 的如下属性可被服务器更改：
	 * 1.readyState: 
	 * 		该属性表示Ajax请求的当前状态。它的值用数字代表:
	 * 		(1).0 代表未初始化。 还没有调用 open 方法
	 * 		(2).1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
	 * 		(3).2 代表已加载完毕。send 已被调用。请求已经开始
	 * 		(4).3 代表交互中。服务器正在发送响应
	 * 		(5).4 代表完成。响应发送完毕
	 * 		每次 readyState 值的改变，都会触发 readystatechange 事件。
	 * 		如果把 onreadystatechange 事件处理函数赋给一个函数，那么每次 readyState 值的改变都会引发该函数的执行。
	 * 		readyState 值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把 readyState 的值统一设为 4
	 * 2.status:
	 * 		服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分。
	 * 		常用状态码及其含义：
	 * 		(1).404 没找到页面(not found)
	 * 		(2).403 禁止访问(forbidden)
	 * 		(3).500 内部服务器出错(internal service error)
	 * 		(4).200 一切正常(ok)
	 * 		(5).304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
	 * 		在 XMLHttpRequest 对象中，服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较，可以确保服务器是否已发送了一个成功的响应
	 * 3.responseText:
	 * 		该属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本，这取决于服务器发送的内容。
	 * 		当 readyState 属性值变成 4 时, responseText 属性才可用，表明 Ajax 请求已经结束。
	 * 4.responseXML:
	 * 		如果服务器返回的是 XML， 那么数据将储存在 responseXML 属性中。
	 * 		只用服务器发送了带有正确首部信息的数据时， responseXML 属性才是可用的。 MIME 类型必须为 text/xml
	 */
	//指定响应处理函数
	xhr.onreadystatechange = function(){
		//对象的状态为4表示已完成
		if(xhr.readyState==4){
			//成功返回200,没有修改返回304
			if(xhr.status==200||xhr.status==304){
				//开始处理信息
				//alert(xhr.responseText) ;
				document.getElementById("msg").innerHTML = xhr.responseText ;
			}
		}
	}

}

/**
 * 创建XMLHttpRequest实例(兼容IE和Firefox等浏览器)
 */
function createXmlHttpRequest(){
	var xmlhttp = null;
	try{
		//适用的浏览器Firefox, Opera 8.0+, Safari
        xmlhttp=new XMLHttpRequest();
	}catch(e){
		//IEIE7.0以下的浏览器以ActiveX组件的方式来创建XMLHttpRequest对象
		var MSXML = 
		['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
		'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
		'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
		for(var n = 0; n < MSXML.length; n ++){
			try{
				//根据MSXML数组循环获得支持ActiveX插件的IE版本号,如果抛出异常,那么继续判断下一个否则产生XMLHttpRequest对象跳出循环
				xmlhttp = new ActiveXObject(MSXML[n]);
				break;
			}catch(e){}}
		}
	return xmlhttp;
}

3.用于处理显示结果的JSP文件:checkUser.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String username = request.getParameter("username") ;
	String msg = "" ;
	if(username!=null){
		if("admin".equals(username)){
			msg = "用户名已经存在" ;
		}else{
			msg = "用户名可以使用" ;
		}
	}else{
		username = "" ;
	}
	out.print(msg) ;
%>

以上就OK了,我也是为了学习ExtJS所以才看了看Ajax,现在我把我的学习笔记贴上了,供大家参考,同时给予指正.

如果在后台想往前台传XML格式的结果,那么可以在上面的JS文件中加入这个方法.并且修改返回结果的JSP文件.具体如下:

ajaxCheckUser.js文件增加函数如下:

//适用于返回结果为XML格式
function checkUserAjaxXML(){
	//第一步:创建XMLHttpRequest对象
	var xhr = createXmlHttpRequest() ;
	//第二步:建立对服务器的调用
	xhr.open("post","checkUserXML.jsp",true) ;	
	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")//如果发送方式为POST时,需要设置首部信息 ;
	//第三步:向服务器发送请求
	var username = document.getElementById("username").value ;//获得输入的用户名
	xhr.send("username="+username) ; 
	//第四步:接收服务器的处理结果
	//指定响应处理函数
	xhr.onreadystatechange = function(){
		//对象的状态为4表示已完成
		if(xhr.readyState==4){
			//成功返回200,没有修改返回304
			if(xhr.status==200||xhr.status==304){
				//开始处理信息
				//document.getElementById("msg").innerHTML = xhr.responseText ;
				//此处用XML专有的方式接收
				var xmlResult = xhr.responseXML ;
				/*
				第一种拆分XML的方法 start
				var root = xmlResult.documentElement ;//获得XML的根节点
				var codeNode = root.firstChild ;//获得Code节点
				var msgNode = root.lastChild ;//获得Msg节点
				if(codeNode.firstChild.nodeValue){
					document.getElementById("msg").innerHTML = lastNode.msgNode.nodeValue ;
				}
				第一种拆分XML的方法 end
				*/
				
				//第二种拆分XML的方法DOM start
				var codeNode = xmlResult.getElementsByTagName("code")[0] ;//获得code节点
				var msgNode = xmlResult.getElementsByTagName("msg")[0] ;//获得msg节点
				if(codeNode.firstChild.nodeValue){
					document.getElementById("msg").innerHTML = msgNode.firstChild.nodeValue ;
				}
				//第二种拆分XML的方法DOM end
				
			}
		}
	}

}

注意:此处的下面部分,已经做了修改.

xhr.open("post","checkUserXML.jsp",true) ;

接收方式也改为.

var xmlResult = xhr.responseXML ;

之后重新建立一个checkUserXML.jsp文件,用于返回XML格式的结果.代码如下:

<%@ page language="java" contentType="text/xml; charset=UTF-8"
    pageEncoding="UTF-8"%><?xml version="1.0" encoding="UTF-8"?>
<%
	String username = request.getParameter("username") ;
	String msg = "" ;
	int code = 0 ;
	if(username!=null){
		if("admin".equals(username)){
			msg = "用户名已经存在" ;
			code = 0 ;
		}else{
			msg = "用户名可以使用" ;
			code = 1 ;
		}
	}else{
		username = "" ;
	}
	//out.print(msg) ;
%><result><code><%=code%></code><msg><%=msg%></msg></result>

注意 :

1.<?xml version="1.0" encoding="UTF-8"?>这个XML首部分,必须追加到脚本末尾,不能有回车,不然会出现意想不到的结果.... ....

2.contentType="text/xml; charset=UTF-8"中已经由原来的text/html改为text/xml了.如果不改为xml会很麻烦.

如果想在后台往回传JSON格式的内容,那么请在ajaxCheckUser.js文件中增加下面这个函数:

//适用于返回结果为JSON格式
function checkUserAjaxJSON(){
	//第一步:创建XMLHttpRequest对象
	var xhr = createXmlHttpRequest() ;
	//第二步:建立对服务器的调用
	xhr.open("post","checkUserJSON.jsp",true) ;
	xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")//如果发送方式为POST时,需要设置首部信息 ;
	
	//第三步:向服务器发送请求
	var username = document.getElementById("username").value ;//获得输入的用户名
	xhr.send("username="+username) ; 
	//第四步:接收服务器的处理结果
	//指定响应处理函数
	xhr.onreadystatechange = function(){
		//对象的状态为4表示已完成
		if(xhr.readyState==4){
			//成功返回200,没有修改返回304
			if(xhr.status==200||xhr.status==304){
				//开始处理信息
				var xmlResult = xhr.responseText ;
				var msgJson = eval("("+xmlResult+")") ;//注意此处必须写"("和")",目的是先解析xmlResult的内容,再将其转换
				if(msgJson){
					document.getElementById("msg").innerHTML = msgJson.msg ;
					if(msgJson.code==1){
						//如果用户名已经存在那么将光标重新定位
						document.getElementById("msg").focus ;
					}
				}
			}
		}
	}

}

checkUserJSON.jsp文件内容如下:

<%@ page language="java" contentType="text/json; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String username = request.getParameter("username") ;
	String msg = "" ;
	int code = 0 ;
	if(username!=null){
		if("admin".equals(username)){
			msg = "用户名已经存在" ;
			code = 0 ;
		}else{
			msg = "用户名可以使用" ;
			code = 1 ;
		}
	}else{
		username = "" ;
	}
	//out.print(msg) ;
%>{"code":"<%=code %>","msg":"<%=msg %>"}

注意 :需要将contentType="text/html; charset=UTF-8"中的text/html改为text/json.

在后台Action中可以用request.getParameter("参数名称") ; 方法获取。

其他的没啥了,请做试验... ...

当然,我已经通过试验了.

刚才有个哥们第一时间给我指出了错误,说我这个不是原理是步骤,我也是比较赞同的,呵呵.不过我还属于菜鸟,刚开始接触Ajax,所以还得大家多多指教啊.呵呵,我自己认为Ajax就是异步刷新的代名词吧,且是局部刷新,呵呵.

1
顶

2
踩

分享到：

利用Java向Oracle中插入图片(BLOB)文件 | 存储过程的调用和执行

2011-05-26 14:53
浏览 2478
评论(4)
分类:Web前端
查看更多

4 楼 ysj5125094 2011-05-26

badboyer 写道

ysj5125094 写道

ekea0407 写道

你这是基本步骤不是基本原理

呵呵,误会误会...其实原理也没啥吧?就是异步刷新呗,还有什么呢?我是刚刚学Ajax,还请多多指教啊.

异步刷新和同步刷新只是一部分，

哈哈,俺要走的步还很长...

3 楼 badboyer 2011-05-26

ysj5125094 写道

ekea0407 写道

你这是基本步骤不是基本原理

呵呵,误会误会...其实原理也没啥吧?就是异步刷新呗,还有什么呢?我是刚刚学Ajax,还请多多指教啊.

异步刷新和同步刷新只是一部分，

2 楼 ysj5125094 2011-05-26

ekea0407 写道

你这是基本步骤不是基本原理

呵呵,误会误会...其实原理也没啥吧?就是异步刷新呗,还有什么呢?我是刚刚学Ajax,还请多多指教啊.

1 楼 ekea0407 2011-05-26

你这是基本步骤不是基本原理

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论