tbwshc

AJAX的学习与理解 .

1>:今天重新回到对AJAX的认识,首先从AJAX的由来说起,由于感觉自己才疏学浅,

      我感觉只有了解了WEB的发展历史,我们才能更好地理解并运用AJAX。

2>:其实AJAX最大的应用就是我们要理解XMLHttpRequest这个对象。XMLHttpRequest可以提供不重新加载页面的情况下更新网页,在页面加载后在客户端向服务器请数 据, 在  页面加载后在服务器端接受数据,在后台向客户端发送数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容。

3>:我们如何创建一个XMLHttpRequest对象呢?

     首先我们要知道XMLHttpRequest对象开始时有微软开发的一个基于IE5,IE6的一个插件,所以他在IE浏览器中肯定有自己的创建方式,IE中把他实现成一个ActiveX对象,但其他浏览器如果也想使用  XMLHttpRequest对象,就必须依靠JAVASCRIPT创建本地对象。我们在使用时不需要判断浏览器的类型,只需要看浏览器提供对ActiveX的支持。

下面就是XMLHttpRequest的创建方式:

[javascript] view plaincopyprint?
01.function createXHR() 
02.{ 
03. if(window.ActiveXObject) 
04. { 
05.  xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); 
06. } 
07. else if(window.XMLHttpRequest) 
08. { 
09.  xmlHttpRequest=new XMLHttpRequest(); 
10. } 
11. if(null==xmlHttpRequest) 
12. {  
13.  alert("浏览器不支持"); 
14. } 
15.} 
 function createXHR()
 {
  if(window.ActiveXObject)
  {
   xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if(window.XMLHttpRequest)
  {
   xmlHttpRequest=new XMLHttpRequest();
  }
  if(null==xmlHttpRequest)
  {
   alert("浏览器不支持");
  }
 }4>:介绍XMLHttpRequest的常用属性、方法:

百度其实是个好东西,我没必要复制粘贴:大家可以参考http://baike.baidu.com/view/1105115.htm

5>:XMLHttpRequest的应用:

其实要理解AJAX并学会运用我们只要掌握三方面内容,第一就是XMLHttpRequest对象的创建。第二就是如何从表单获取值并传到服务器。第三就是如何从后台获取数据显示在前台。大家想想AJAX的应用是不是就是围绕这三方面。

下面我们来简单说一下如何从表单获取值的问题:其实只要稍微了解点JavaScript的热你都知道我们DOM文档模型,通过操纵文档对象模型中对象的属性并调用其方法,可以使脚本按照一定的方式显示Web页并与用户的动作进行交互。

我们常用的就是document.getElementById("id").value.来获取网页中的数据。其他的大家用到就百度。

我们获取到值之后就是把这个值传给后台:这里我们一般采用get:方式提交,采用url传参。通过调用:xmlHttpRequest.open("get","url?paramater="+value,true);

最后就是如何从后台获取值传到前台显示:这里是通过xmlHttpRequest.responseText(返回一个字符串)xmlHttpRequest.responseXML返回一个XML文件。

我们可以通过解析这两种值插入到页面中:通常我们用到的显示在htbml中方式是:通过document.getElementById("id").value=xmlHttpRequest.responseText;

或者document.getElementById("id").innerHTML=xmlHttpRequest.responseText;

知道了这些我们先做一个简单地例子:

[javascript] view plaincopyprint?
01.<script type="text/javascript"> 
02.    var xmlHttpRequest=null; 
03.    function createXHR() 
04.    { 
05.        if(window.ActiveXObject) 
06.        { 
07.            xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP"); 
08.        } 
09.        else if(window.XMLHttpRequest) 
10.        { 
11.            xmlHttpRequest=new XMLHttpRequest(); 
12.        } 
13.        if(null!=xmlHttpRequest) 
14.        {    
15.            var v1=document.getElementById("num1").value; 
16.            var v2=document.getElementById("num2").value; 
17.            xmlHttpRequest.open("get","servlet/AjaxServlet?v1="+v1+"&v2="+v2,true); 
18.            xmlHttpRequest.onreadystatechange=callback; 
19.            xmlHttpRequest.send(null); 
20.        } 
21.    } 
22.    function callback() 
23.    { 
24.        if(xmlHttpRequest.readyState==4) 
25.        { 
26.            if(xmlHttpRequest.status==200) 
27.            { 
28.                var responseText=xmlHttpRequest.responseText; 
29.                document.getElementById("num3").innerHTML=responseText;//innerHTML不能小写  
30.            } 
31.        } 
32.    } 
33.    </script> 
<script type="text/javascript">
 var xmlHttpRequest=null;
 function createXHR()
 {
  if(window.ActiveXObject)
  {
   xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if(window.XMLHttpRequest)
  {
   xmlHttpRequest=new XMLHttpRequest();
  }
  if(null!=xmlHttpRequest)
  { 
   var v1=document.getElementById("num1").value;
   var v2=document.getElementById("num2").value;
   xmlHttpRequest.open("get","servlet/AjaxServlet?v1="+v1+"&v2="+v2,true);
   xmlHttpRequest.onreadystatechange=callback;
   xmlHttpRequest.send(null);
  }
 }
 function callback()
 {
  if(xmlHttpRequest.readyState==4)
  {
   if(xmlHttpRequest.status==200)
   {
    var responseText=xmlHttpRequest.responseText;
    document.getElementById("num3").innerHTML=responseText;//innerHTML不能小写
   }
  }
 }
 </script>[html] view plaincopyprint?
01.<form method="" action=""> 
02.    <table border="1" borderstyle="solid" cellpacing="0" > 
03.        <tr><td><input type="text" id="num1"/></td></tr> 
04.        <tr><td><input type="text" id="num2"/></td></tr> 
05.        <tr><td><input type="button" value="submit" onclick="createXHR()"/></td></tr> 
06.        <tr><td><span id="num3"></span></td></tr> 
07.    </table>  
08.   </form> 
<form method="" action="">
    <table border="1" borderstyle="solid" cellpacing="0" >
     <tr><td><input type="text" id="num1"/></td></tr>
     <tr><td><input type="text" id="num2"/></td></tr>
     <tr><td><input type="button" value="submit" onclick="createXHR()"/></td></tr>
     <tr><td><span id="num3"></span></td></tr>
    </table>
   </form>以上代码有借鉴http://blog.csdn.net/csh624366188/article/details/7670500大家也可以去看。

 

还有两哥问题一:如何将结果显示在下拉列表,第二如何读取XML文件,这个稍后介绍。

 

posted on 2012-07-24 16:49 chen11-1 阅读(1579) 评论(0)  编辑  收藏


只有注册用户登录后才能发表评论。


网站导航: