原生态Ajax基础

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

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

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

2.Ajax工作原理

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

1. 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>
    <!-- onblur当鼠标焦点离开文本框触发事件  -->
</s:form>