Ajax技术的基本原理(方法)
日期：2014-05-16 浏览次数：20689 次
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
*/
//指定响应处理函数
x
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
