Ajax学习日记(一)

1、创建XMLHttpRequest对象的实例
      如果浏览器支持ActiveX对象,就可以使用ActiveX来创建XMLHttpRequest对象。否则,就要使用本地JavaScript对象技术来创建。
   var xmlHttp;
   function createXMLHttpRequest(){
   if (window.ActiveXObject){
       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
   else if(window.XMLHttpRequest){
      xmlHttp=new XMLHttpRequest();
      }
   }
  
   XMLHttpRequest对象的一些方法:
   A、void open(string method,string url,boolean asynch,string username,string password):
   这个方法会建立对服务器的调用。这是一个初始化一个请求的纯脚本方法。它有两个必要的参数,还有三个可选参数。条提供特定方法(GET、POST、PUT),还有提供所调用资源的URL。另外还可以传递一个Boolean值,指示这个调用是异步还是同步的。默认值为true,表示请求本质上是异步的。如果这个参数为false,处理就会等待,直到从服务器返回响应为止。异步调用是使用Ajax的主要优势。最后两个参数允许指定一个特定的用户名和密码。
   B、void send(content):
   这个方法具体向服务器发出请求。如果请求声明为异步的,这个方法就会立即返回,否则它会等待直到接收到响应为止。可选参数可以是DOM对象的实例、输入流,或者串。传入这个方法的内容会作为请求体的一部分使用。
   C、void setRequestHeader(string header,string value):
   这个方法为HTTP请求中一个给定的首部设置值。它有两个参数,第一个串表示要设置的首部,第二个串表示要在首部放置的值。需要说明这个方法必须在调用open()之后才能调用。
  
   在所有这些方法中最有可能用到的是open()和send().
   D、void abord():停止请求
   E、string getAllResponseHeaders():
   这个方法返回一个串,其中包含HTTP请求的所有响应首部,首部包括Content-Length、Data和URL。
   F、string getResponseHeader(string header):
   这个方法与getAllResponseHeaders()是对应的,不过它有一个参数表示你希望得到的指定首部值,并且把这个值作为串返回。
  
   XMLHttpRequest对象的属性:
   onreadystatechange:每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数。
   readyState:请求的状态,有5个可取值:0=未初始化,1=正在加载,2=已加载,3=交互中,4=完成。
   responseText:服务器的响应,表示为一个串。
   responseXML:服务器的响应,表示为XML,这个对象可以解析为一个DOM对象。
   status:服务器的HTTP状态码(200对应OK,404对应Not Found,等等)。
   statueText:HTTP状态码的相应文本(OK或Not Found等等)。
  
   Ajax的标准请求响应方法:
   A、一个客户端触发一个Ajax事件。从简单的onchange事件到某个特定的用户动作,很多这样的事件都可以触发Ajax事件。
      <input type="text" id="email" name="email" onblue="validateEmail()";>
   B、创建XMLHttpRequest对象的一个实例。使用open()方法建立调用,并设置URL以及所希望的HTTP方法(通常是否GET或POST),请求实际上是通过一个send()方法调用触发。
      var xmlHttp;
      function validateEmail(){
        var email=document.getElementById("email");
        var url="validate?email="+escape(email.value);
        if(window.ActiveXObject){
           xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
           }
        else if(window.XMLHttpRequest){
           xmlHttp=new XMLHttpRequest();
           }
        xmlHttp.open("GET",url);
        xmlHttp.onreadystatechange=callback;
        xmlHttp.send(null);
       }
    C、向服务器做出请求。可能调用servlet、CGI脚本、或者任务服务器端技术。
    D、服务器可以做你想做的事情,包括访问数据库,甚至访问另一个系统。
    E、请求返回到浏览器。Content-Type设置为text/xml——XMLHttpRequest对象只能处理text/html类型的结果。在另外一些更复杂示例中,响应可能涉及更广,还包括JavaScript、DOM管理以及其他相关技术。需要说明,你还需要设置另外一些首部,使浏览器不会在本地缓存结果。为些可以使用下面的代码:
        response.setHeader("Cache-Control","no-cache");
        response.setHeader("Pragma","no-cache");
    F、在这个示例中,XMLHttpRequest对象配置为处理返回时要调用callback()函数。这个函数会检查XMLHttpRequest对象的readyState属性,然后查看服务器返回的状态码。如果一切正常,callback()函数就会在客户端上做些有意思的工作。
        function callback(){
           if(xmlHttp.readyState==4){
              if(xmlHttp.status==200){
                 //do something interesting here
                 }
              }
           }


2、发送简单请求
向服务器发送请求以及如何处理服务器的响应。
最简单的请求是不要查询参数或提交表单数据的形式向服务器发送任何信息。在实际中,都期望向服务器发送一些信息。
使用XMLHttpRequest对象发送请求的基本步骤是:
A、为得到XMLHttpRequest对象的一个引用,可以创建一个新的实例,也可以访问包含有XMLHttpRequest对象的一介变量。
B、告诉XMLHttpRequest对象,那个函数会处理XMLHttpRequest对象状态的改变,为此要把对象的onreadystatechange属性设置为指向JavaScript函数的指针。
C、指定请求的属性。XMLHttpRequest对象的open()方法会指定将发出的请求。open()方法有三个参数:一个是指示所用方法(通常是Get或Post)串;一个是表示目标资源的URL串;一个是Boolean值,表示请求是否是异步的。
D、将请求发送绐服务器,XMLHttpRequest对象的send()方法把请求发送到指定的目标资源。send()方法接受一个参数,通常是一个串或一个DOM对象。这个参数作为请求体的一部分发送到目标URL。当向send()方法提供参数时,要确保open()中指定的方法是POST。如果没有数据作为请求体的一部分被发送时,则使用NULL。
       你需要XMLHttpRequest对象的一个实例,告诉它如果状态有变化应该怎么做,还要告诉它向那里发送请求以及如何发送请求,最后还需要指导XMLHttpRequest以送请求。

函数指针:
与其它变量类似,只不过它指向的不是像串、数字甚至对象实例之类的数据,而是指向一个函数。在JavaScrip中,所有的函数在内存中都编在地址,可以使用函数名引用。这就提供了很大的灵活性,可以把函数指针作为参数传递绐其它函数,或者在一个对象的属性中存储函数指针。

3、简单请求示例
simpleResponse.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Simple XMLHttpRequest</title>
<script type="text/javascript">
  var xmlHttp;
 
  function createXMLHttpRequest(){
      if(window.ActiveXObject){
       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
   else if(window.XNLHttpRequest){
       xmlHttp=new XMLHttpRequest();
   }  
  }
 
  function startRequest(){
       createXMLHttpRequest();
    xmlHttp.onreadystatechange=handleStateChange;
    xmlHttp.open("GET","simpleResponse.xml",true);
    xmlHttp.send(null);
  }
 
  function handleStateChange(){
       if(xmlHttp.readyState==4){
         if(xmlHttp.status==200){
       alert("THe server replied with:" + xmlHttp.responseText);
   }
    }
  }
</script>
</head>

<body>
<form action="#">
  <input type="button" value="Start Basic Asynchronous Request" onclick="startRequest();" />
</form>
</body>
</html>

simpleResponse.xml
任意文本
51

你可能感兴趣的:(Ajax)