AJAX学习（二）

通过上篇博客认识Ajax之后，我们通过一个简单的实例来消化消化理论知识，一睹Ajax的庐山真面目。

1.实例功能：


当用户输入用户名，文本框失去焦点后，通过异步调用来判断该用户名是否已经存在。若存在，则在上图中红框处显示提示。当用户名可用时，提交按钮变为可用状态。

 

2.设计Html页面：

 

[html] view plain copy
 
  1. <span style="font-family:SimSun;font-size:18px;"><strong><span style="font-family:SimSun;font-size:18px;"><strong><body>  
  2.     <form name="myForm">  
  3.         用户名：<input type="text" name=" myName" onblur="checkName()" />  
  4.         <span id="myDiv"> </span><br />  
  5.         密　码：<input type="text" name="myPwd"/><br />  
  6.         <input type="button" value=" 提交" name="submitButton" disabled />  
  7.     </form>  
  8. </body></strong></span></strong></span>  

在“用户名”文本框后添加了一个span标签，该标签划分一个区域，用于显示用户名的验证信息。 还要添加一个事件，当失去焦点时触发“checkName（）”。

 

 

3.JavaScript代码部分：

 

[javascript] view plain copy
 
  1. //定义用户存储XMLHttpRequest对象的变量  
  2.         var xmlHttp = null;  
  3.         //创建XMLHttpRequest对象  
  4.         function creatXMLHTTP()  
  5.         {  
  6.             //判断浏览器是否支持ActiveX控件，针对IE6及之前版本  
  7.             if (window.ActiveXObject)  
  8.             {  
  9.                 //将所有可能出现的ActiveXObject版本都放在一个数组中  
  10.                 var arrXmlHttpTypes = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];  
  11.                 //通过循环创建XMLHttpRequest对象  
  12.                 for (var i=0;i<arrXmlHttpTypes.length;i++)  
  13.                 {  
  14.                     try  
  15.                     {  
  16.                         //创建XMLHttpRequest对象  
  17.                         xmlHttp = new ActiveXObject(arrXmlHttpTypes[i]);  
  18.                         //如果创建XMLHttpRequest对象成功，则跳出循环  
  19.                         break;  
  20.                     }  
  21.                     catch(ex)  
  22.                     {  
  23.                     }  
  24.                 }  
  25.             }  
  26.             //判断浏览器是否将XMLHttpRequest作为本地对象实现，针对IE7，Firefox，Opera等浏览器  
  27.             else if(window.XMLHttpRequest)  
  28.             {  
  29.                 xmlHttp = new XMLHttpRequest();  
  30.             }  
  31.         }  
  32.         //响应XMLHttpRequest对象状态变化的函数  
  33.         function httpStateChange()  
  34.         {  
  35.             if (xmlHttp.readyState==4)//异步调用完毕  
  36.             {  
  37.                 if (xmlHttp.status==200 || xmlHttp.status==0)//异步调用成功，在本机上调试  
  38.                 {  
  39.                     //获得服务器返回的数据  
  40.                     var userNames = xmlHttp.responseText;  
  41.                     var arrUserName = userNames.split(";");//把获取到的一个字符串分割成字符串数组。  
  42.   
  43.                     //定义一个变量，用于判断用户名是否已经存在  
  44.                     var bFlag = false;  
  45.   
  46.                     for(i=0;i<arrUserName.length;i++)  
  47.                     {  
  48.                         if (arrUserName[i]==myForm.myName.value)  
  49.                         {  
  50.                             bFlag = true;//用户名存在  
  51.                             break;  
  52.                         }  
  53.                     }  
  54.   
  55.                     //查找用于显示提示信息的节点  
  56.                     var node = document.getElementById("myDiv");  
  57.                     //更新数据  
  58.                     if (bFlag)  
  59.                     {  
  60.                         node.firstChild.nodeValue = "用户名已存在";  
  61.                         myForm.submitButton.disabled = true;//提交按钮不可用  
  62.                     }  
  63.                     else   
  64.                     {  
  65.                         node.firstChild.nodeValue = "用户名不存在，可以使用";  
  66.                         myForm.submitButton.disabled = false;//提交按钮可用  
  67.                     }  
  68.                 }  
  69.             }  
  70.         }  
  71.         //校验用户名是否有效  
  72.         function checkName()  
  73.         {  
  74.             //创建XMLHttpRequest对象，调用前面定义好的函数  
  75.             creatXMLHTTP();  
  76.   
  77.             if (xmlHttp!=null)  
  78.             {  
  79.                 //创建响应XMLHttpRequest对象状态变化的函数  
  80.                 xmlHttp.onreadystatechange = httpStateChange;  
  81.                 //创建http请求  
  82.                 xmlHttp.open("get","userName.txt", true);  
  83.                 //发送http请求  
  84.                 xmlHttp.send(null);  
  85.             }  
  86.             else  
  87.             {  
  88.                 alert("您的浏览器不支持XMLHTTP");  
  89.             }  
  90.         }  

 

注意：需要建一个userName.txt存储已存在的用户名，各个用户名之间用分号隔开。

    

    通过这个小例子，我们从理论阶段向代码实现迈了一步。从代码中很容易发现XMLHttpRequest是Ajax的核心对象。也正是因为各大浏览器对XMLHttpRequest对象的广泛支持，使得Ajax成为一项热门技术。IE浏览器将XMLHttpRequest实现为一个ActiveX对象，其他三大浏览器（Firefox，Opera，Netscape）将其实现为一个本地javascript对象，所以在创建XMLHttpRequest对象时要经历一番周旋。虽然创建方式不同，但XMLHttpRequest对象拥有的方法和属性大致相同。下篇博客我们来一起揭开XMLHttpRequest对象的神秘面纱，深入解读上面的代码，敬请期待！

posted @ 2017-06-30 10:30  chu_叶子  阅读(167)  评论(0)    收藏  举报