ajax实现--技术细节详解

ajax原理和XmlHttpRequest对象

 

  Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对 XMLHttpRequest有所了解。

 XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。

   所以我们先从XMLHttpRequest讲起,来看看它的工作原理。

   首先,我们先来看看XMLHttpRequest这个对象的属性。

    它的属性有:

    onreadystatechange  每次状态改变所触发事件的事件处理程序。

    responseText     从服务器进程返回数据的字符串形式。

    responseXML    从服务器进程返回的DOM兼容的文档数据对象。

    status           从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)

    status Text       伴随状态码的字符串信息

    readyState       对象状态值

    0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)

    1 (初始化) 对象已建立,尚未调用send方法

    2 (发送数据) send方法已调用,但是当前的状态及http头未知

    3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,

    4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

 

  但是,由于各浏览器之间存在差异,所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。

 

直接上一个简单的例子,不懂的可以给我留言

ajax.html

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head>

 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 5 <title>ajax</title>

 6 <script type="text/javascript">

 7     var xmlhttp = false;

 8     function send_request(url){

 9         xmlhttp = false;

10         if(window.XMLHttpRequest){//现代浏览器:FireFox,chrome,opare,Safari等

11             xmlhttp = new XMLHttpRequest();

12             xmlhttp.overrideMimeType('text/xml');//Firefox有些版本在处理服务器返回未包含XMLmime-type头部信息的内容时会出错,要确保包含

13         }else{//古代浏览器:IE5、6

14             try{

15                 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");

16             }catch(e){

17                 try{

18                     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

19                 }catch(e){}

20             }

21         }

22         if(!xmlhttp){

23             alert("xmlHttpRequest对象创建失败");

24             return false;

25         }

26         xmlhttp.onreadystatechange = progressRequest;//注意,progressRequest此函数不加括号、参数,也可以用即时定义function(){}

27         xmlhttp.open('GET',url,true);//第一个参数有三种,get、post、head,url只能是同网域的,否则没权限

28         xmlhttp.send(null);//open调用后就要调用send,但如果要post文件(图片等)要设置MIME类别(跟form表单一样:xml.setRequestHeader"Content-Type","application/x-www-form-urlencoded");

29         /*XMLHttpRequest对象方法

30             xmlhttp.abort();//停止当前请求

31             xmlhttp.getAllResponseHeaders();作为字符串返回完整的headers

32             xmlhttp.getResponseHeader("headerLabel");//作为字符串返回单个header标签

33             xmlhttp.setRequestHeader("label","value");//设置header,并和请求一起发送

34         */

35         /*XMLHttpRequest对象方法

36             xmlhttp.onreadystatechange;//状态改变事件触发

37             xmlhttp.readState;//对象状态,0:未初始化,1:读取中,2:已读取,3,交互中,4完成

38             xmlhttp.responseText;//服务器进程返回数据的文本版本,

39             xmlhttp.responseXML;//服务器进程返回数据的兼容DOM的XML文档对象,

40             xmlhttp.status;//服务器状态码。

41             xmlhttp.statusText;//服务器返回的状态文本信息

42         */

43     }

44     function progressRequest(){

45         

46         if(xmlhttp.readyState == 4){//判断对象状态

47             if(xmlhttp.status == 200){//信息已成功返回,开始执行处理信息

48                 

49                 document.getElementById("text").value  = xmlhttp.responseText;

50             }else{

51                 alert("您请求的页面有异常!");

52             }

53         

54         }

55         else{

56             //alert(xmlhttp.readyState);

57         }

58     }

59 </script>    

60 </head>

61 

62 <body>

63 

64   <div class="content">

65     <input type="text" id="text" />

66     <input type="button" value="提交" onclick="send_request('abc.php')">

67  </div>

68 </body>

69 </html>
View Code

 

 

后台程序:abc.php     (注:这里可以查询数据库,实现复杂的计算输出)

1 <?php

2     echo "i love ajax";

3 ?>
View Code

 

 

 

你可能感兴趣的:(Ajax)