ajax基础

Ajax 的定义：Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写.

HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段。
JavaScript 代码是运行 Ajax 应用程序的核心代码，帮助改进与服务器应用程序的通信。
DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用div、span和其他动态 HTML 元素来标记 HTML。
文档对象模型 DOM 用于（通过 JavaScript 代码）处理 HTML 结构和（某些情况下）服务器返回的 XML。
XMLHttpRequest 对象

属性:
 

onreadystatechange  //  每个状态改变是都会触发这个事件处理器，通常会调用一个javascript函数 
    readState   // 请求状态　０＝未初始化，１＝正在加载　，２＝已加载　，３＝交互中，４＝完成 
    responseText   // 服务器的响应，表示为一个串　 
    responseXML   // 服务器的响应，表示为xml．这个对象可以解析为一个ＤＯＭ对象 
    status  // 服务器的http状态码（２００对应ok，４０４对应not　found）　 
    statusText　　　 // 服务器的http状态码相应文本 

方法:
   

void  open(String method,String url, boolean  asynchron,String username,String password) 
/**/ /*
建立对服务器的调用，其中method可以用put，get，post，参数即可以使用绝对地址也可以使用相对地址；url是表示建立的请求将要发送到目的地中进行处理；asynchron表示是否异步。 
    该方法中的5个参数，其中前两个是必须的，后三个是可选的，调用该方法将建立Ajax对服务器的调用，即完成请求的初始化的方法。在调用该方法时，需要指定调用的方法包括GET、POST及PUT，还需要提供调用资源的URL，此外，boolead类型的asynchron用于指定在进行调用时是采用同步方式还是异步方式，默认true，即异步方式。如果参数数值为false，则采用同步方式和服务器进行交互，即进行等待知道服务器返回响应结果为止。最后两个参数用于在进行连接时指定特定的用户名和密码。
*/
  void  send(string)  // 用来向服务器发送请求。可以使用的参数包括DOM对象、字符串等等。

      void  setHeader(string,string)  // 该方法为HTTP请求中给定的一个首部设置值，其中header表示要设置的首部名称，第二个参数用于指定放在首部中的值。设置header并和请求一起发送，即指定首部设置为所提供的值，注意在设置首部前必须先使用open()方法。

 　  string getResponseHeader(string)   // 返回指定首部的字符串的值
string getAllResponseHeaders()   // 把Http请求的所有响应首部作为键/值对返回
      void  abort()   // 停止当前请求 

原理：
　　　　　　　　　　   提交
　　 XMLHttpRequest————>请求

　　　　　   返回          分析
　服务器————>数据<————JavaScript

例子：

创建一个XMLHttpRequest对象

< html xmlns = " http://www.w3.org/1999/xhtml "   >
< head runat = " server " >
     < title > 一个ajax的实例 </ title >
< script language = " javascript "  type = " text/javascript " >
     // 声明一个XMLHttpRequest对象
    var xmlHttp;
     // 创建一个XMLHttpRequest对象
    function createXMLHttpRequest()
     ... {
        //判断是否是ie的浏览器
        if(window.ActiveXObject)
        ...{
            try
            ...{
                xmlHttp = new ActiveXObject("Micrsoft.XMLHTTP");
            }
            catch(failed)
            ...{
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); //老一点版本的ie浏览器
            }
        }
        else if(window.XMLHttpRequest)
        ...{
            xmlHttp = new XMLHttpRequest();
        }
    }
    
    function Button1_onclick() 
     ... {
        createXMLHttpRequest(); //创建XMLHttpRequest对象

        //    onreadystatechange 每个状态改变是都会触发这个事件处理器,通常会调用一个javascript函数 
        xmlHttp.onreadystatechange = handleSateChange;
        /**//*
            第一个参数可以取得值为：GET,POST,HEAD,PUT,DELETE,OPTIONS,TARCE
            第二个参数为一个url
            第三个参数为bool，一般为true
        */
        xmlHttp.open("GET","response.xml",true); 
        xmlHttp.send(null);
    }
    
     // 一个回调函数,用来处理数据返回的数据
    function handleSateChange()
     ... {
        if(xmlHttp.readyState==4) //readState 请求状态　０＝未初始化，１＝正在加载　，２＝已加载　，３＝交互中，４＝完成 
        ...{
            if(xmlHttp.status==200) //服务器的http状态码（２００对应ok，４０４对应not　found）　
            ...{
                alert("来自服务器的响应:"+xmlHttp.responseText); //服务器的响应，表示为一个串　
            }
        }
    }
    
</ script >
</ head >
< body >
     < form id = " form1 "  runat = " server " >
     < div >
         < input id = " Button1 "  style = " z-index: 100; left: 132px; width: 121px; position: absolute;
            top: 18px; height: 32px "  type= " button "  value= " 发送请求 "  οnclick= " return  Button1_onclick() "  />
    
     </ div >
     </ form >
</ body >
</ html >