2007-07-17

从Hello World开始深入Ajax

关键字: Ajax

1.       初始化XMLHttpRequest对象

  1. var xmlHttp;   
  2. function createXMLHttpRequest(){   
  3. document.getElementById("myid_02").width=100;   
  4. if(window.ActiveXObject){   
  5.         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");   
  6.         alert("Microsoft.XMLHTTP");   
  7. }else if(window.XMLHttpRequest){   
  8.         xmlHttp=new XMLHttpRequest();   
  9.         alert("Http Request");   
  10. }   
  11. }  

通过这一步，我们可以得到浏览器的支持方式，这里我的浏览器是Microsoft.XMLHTTP方式（IE6），事实上在IE7之前的版本中，浏览器都是采用"Microsoft.XMLHTTP方式，只有在IE7中，才会使用Http Request方式。因此在以下的说明中，我都将以我的浏览器版本为依据进行阐述。
2.        向服务器端发出请求

js 代码
  1. function startRequest(){   
  2.     createXMLHttpRequest();   
  3.    xmlHttp.onreadystatechange=handleStateChange;   
  4.    xmlHttp.open("GET","calculator.jsp",true);   
  5.    xmlHttp.send(null);   


         在AJAX中，许多使用XMLHttpRequest的请求都是从一个HTML事件（例如一个调用JavaScript函数的按钮点击(onclick)或一个按键(onkeypress)）中被初始化的。AJAX支持包括表单校验在内的各种应用程序。有时，在填充表单的其它内容之前要求校验一个唯一的表单域。但是目前我们最好还是简单一点的好^^。首先说明一下XMLHttpRequest对象的属性onreadystatechange。这个属性能辨识readyState 属性的改变，无论readyState值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值，该值向该方法指示无论readyState值何时发生改变，该对象都将激活。
 
　表格1.XMLHttpRequest对象的ReadyState属性值列表。
取值 描述
0  描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。
1  描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
2  描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
3  描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。
4  描述一种"已加载"状态；此时，响应已经被完全接收。

 
 
如果你是一个细心的读者你就会发现这里似乎还要在增加一个JSP页面来处理我们发出的请求信息。为此，我们在这里我们对calculator.jsp进行定义,页面全部内容如下：

--------------------------------------------------------------------------------

Hello World

--------------------------------------------------------------------------------

是不是相当简单！
 
3.       接收请求信息
       在startRequest函数中，我们声明了要使用handleStateChange对象来标识readyState。通过令xmlHttp.onreadystatechange=handleStateChange，我们就成功注册了一个事件处理器。下面就需要对handleStateChange进行具体的是实现，代码如下：

  1. function handleStateChange(){   
  2.   if(xmlHttp.readyState==4){   
  3.          if(xmlHttp.status==200){   
  4.                         document.forms[0].val.value=xmlHttp.responseText;   
  5.          }   
  6.   }   
  7. }  

当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。因此，我们一直等到readyState为4才开始将结果返回。
 
4.       第一个Ajax页面全貌(赶紧执行一把吧)
事实上，一个完整的打开服务器链接的通讯方法的定义约定格式如下：
xmlHttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)
其中：
    bstrMethod: 连接方式，可用的有GET, POST, PUT, or PROPFIND
    bstrUrl: 服务器的url
    varAsync（可选）: 调用是否异步，默认为true（调用立即返回）
    bstrUser（可选）：用户名，如果url需要验证时附上
    bstrPassword（可选）：密码，如果url需要验证时附上
但是通常情况下我们只需要提供前3个参数就足够了。
 
修改handleStateChange方法，修改后的结果如下：

xml 代码
  1. <%@ page contentType="text/html; charset=GBK" %>  
  2. <html>  
  3. <head>  
  4. <title>test</title>  
  5. <script language="javascript">  
  6.     var xmlHttp;   
  7.     function createXMLHttpRequest(){   
  8.         if(window.ActiveXObject){   
  9.             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");   
  10.             //alert("Microsoft.XMLHTTP");   
  11.             str=document.getElementById("mydiv_01").innerText;   
  12.             document.getElementById("mydiv_01").innerText="【运算结束】";   
  13.         }else if(window.XMLHttpRequest){   
  14.             xmlHttp=new XMLHttpRequest();   
  15.             //alert("Http Request");   
  16.         }   
  17.     }   
  18.     function startRequest(){   
  19.         createXMLHttpRequest();   
  20.         xmlHttp.onreadystatechange=handleStateChange;   
  21.         xmlHttp.open("GET","calculator.jsp",true);   
  22.         xmlHttp.send(null);   
  23.     }   
  24.     function handleStateChange(){   
  25.         if(xmlHttp.readyState==4){   
  26.             if(xmlHttp.status==200){   
  27.                 document.getElementById("mydiv_01").innerText=xmlHttp.responseText;   
  28.             }   
  29.         }   
  30.     }   
  31. </script>  
  32. </head>  
  33. <BODY>  
  34. <font size="+6">First Samples for Ajax</font><br>  
  35. <input type="button" name="subButton" value="获取数据" onclick="startRequest();">  
  36. <center><div id="mydiv_01">【等待触发】</div></center>  
  37. </BODY>  

 
5.       用Ajax实现与服务器的交互
修改index页面，在其中增加以下HTML代码：

xml 代码

 

  1. <center>  
  2.     <form>  
  3.         <input type="text" name="val_01" size="10" value="5">*   
  4.         <input type="text" name="val_02" size="10" value="8">=   
  5.         <input type="text" name="val_03" size="10" value="0">  
  6.     </form>  
  7. </center>  

 
修改startRequest方法，修改后结果如下：

js 代码
  1. function startRequest(){   
  2.     createXMLHttpRequest();   
  3.     xmlHttp.onreadystatechange=handleStateChange;   
  4.     var val_01=document.forms[0].val_01.value;   
  5.     var val_02=document.forms[0].val_02.value;   
  6.     xmlHttp.open("GET","calculator.jsp?val_01="+val_01+"&val_02="+val_02,true);   
  7.     xmlHttp.send(null);   
  8. }  


js 代码
  1. function handleStateChange(){   
  2.     if(xmlHttp.readyState==4){   
  3.         if(xmlHttp.status==200){   
  4.             document.getElementById("mydiv_01").innerText=xmlHttp.responseText;   
  5.             document.forms[0].val_03.value=xmlHttp.responseText;   
  6.         }   
  7.     }   
  8. }  

 
最后，运行查看结果。

js 代码

js 代码
评论
发表评论

您还没有登录，请登录后发表评论