Ajax技术的基本原理
我用一个简单的用户名验证的例子来谈一谈我对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>
密 码：<input type="password" id="password"/><br/>
Email：<input type="text" id="email"/><br/>
<input type="button" id="submit" value="submit" />
<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;
}
以上就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.
其他的没啥了,请做试验... ...
当然,我已经通过试验了.
刚才有个哥们第一时间给我指出了错误,说我这个不是原理是步骤,我也是比较赞同的,呵呵.不过我还属于菜鸟,刚开始接触Ajax,所以还得大家多多指教啊.呵呵,我自己认为Ajax就是异步刷新的代名词吧,且是局部刷新,呵呵.
