纯天然Ajax基础 _Ajax

原生态Ajax基础

之前写了一遍blog,很笼统的说了说Ajax的原理.新年来的第一个周末,从新来温故知新一下.
1.什么是Ajax

Ajax不是一种技术,实际上,他由几种蓬勃发展的技术以新的强大方式组合而成的.

基于XMLHTML和CSS标准的表示
使用Document Object Model进行动态显示和交互
是XMLHttpRequest与服务器进行异步通信
使用JavaScript绑定一切

2.Ajax工作原理

要了解Ajax的工作原理,就要从理解XMLHttpRequest这个对象开始

open():建立到服务器的新请求 ,XMLHttpRequest对象的open()方法会指定发送的请求.该方法有五个参数:

request-type:发送请求的类型.典型的值是GET或POST.
url:要连接的URL.
asynch:如果希望使用异步连接则为true,否则为false.该参数是可选的默认为true
username:身份验证(用户名)
password:身份验证(口令)

通常,Open()方法取3个参数:
??? 一个是指定所用方法(通常是GET或POST)的串;

??? 一个是表示目标资源URL的串;

??? 一个是Boolean值,指示请求是否是异步的

?? 2.? send():向服务器发送请求

一旦用open()配置好之后,就可以发送请求了,send()只有一个参数,就是要发送的内容,但是在考虑这个方法之前.URL本身发送过数据的.虽然可以使用send()发送数据,但也能通过URL本身发送数据.事实上.GET请求(在典型的Ajax应用大约占80%)中,用URL发送数据要容易的多.如果需要发送安全信息或XML,可能要考虑使用send()传递null作为该方法的参数即可.

?? 3.? abort():退出当前请求

?? 4.? readyState:提供当前HTML的状态

?? 5.? responseText:服务器返回的请求响应文本

?? 6.? onreadystatechange:回调方法(回调函数)

????? 该属性允许指定一个回调函数.回调允许服务器反向调用文本页面中的代码.它也给了服务器一定程度的控制权,当服务器完成请求之后,会查看XMLHttpRequest对象,特别是onreadystatechange属性.

?? 7.? responseXML:服务器返回的请求响应XML形式组织的文本

代码1:一个详细的XMLHttpRequest对象的创建
?＜script language="javascript" type="text/javascript"＞
function getXMLHttpRequest(){
　var request = false;
　try {

　request = new XMLHttpRequest();
　} catch (trymicrosoft) {
　　try {
　　　request = new ActiveXObject("Msxml2.XMLHTTP");
　　} catch (othermicrosoft) {
　　　try {
　　　　request = new ActiveXObject("Microsoft.XMLHTTP");
　　　} catch (failed) {
　　　　request = false;
　　　}
　　}
　}
　return request;

}
＜/script＞

2.设置服务器URL
首先要确定连接的服务器的URL.这并不是Ajax的特殊要求,但是建立连接所必需的.多数应用程序中都会结合一些静态数据和用户处理的表单中的数据来构造该URL.
function testCheck(){
??? var name = document.forms[0].username.value;
??? //var name = document.getElementById("username").value;
??? if(xmlHttp == null) {
??? ??? createXMLHttpRequest();
??? }
??? var url ="/buyer/checkUser.action?username="+name;
??? xmlHttp.open("POST",url,true);
??? xmlHttp.onreadystatechange = checkUsername;
??? xmlHttp.send(null);
??? ?}

3.表单
<s:form action="saveBuyer.action" method="post">

??? <s:textfield label="会员账号" name="username" required="true" id="username"
??? ??? requiredposition="left" size="36" onblur="testCheck()"/>
??? <s:actionerror/><div id="result" style="color: red; font-size: 22;"></div>
??? 
</s:form>