AJAX小结

 

原出处:http://blog.163.com/zwx_gis/blog/static/32434435200971072634757/

Web编程相关    2009-08-10 19:26   阅读15   评论0  

 

Ajax (Asynchronous JavaScript and XML) 是多种技术的集合，包括JavaScript、XHTML、CSS、DOM、XML、XSTL、XMLHttpRequest等，其中XHTML和CSS 实现标准化呈现，DOM 负责数据的动态显示和交互，XML和XSTL进行数据交换和处理， JavaScript负责操作XMlHttpRequest对象来跟数据库打交道，XMLHttpRequest负责数据的异步获取。

优点：无刷新请求处理数据。

缺点：要求IE5.0,Mozilla1.0,NetScape7以上；

         更新页面内容时没有刷新整个页面，故后退功能是失效的；

         对流媒体和PDA之类的支持不是很好。

 

一、核心对象：XMLHttpRequest对象（是XMLHTTP组件的对象）。

一个页面可以通过一个HttpRequest发送一个请求来获取服务器响应，而当前页面不做刷新。XMLHttpRequest对象不是W3C标准，目前支持此对象操作的浏览器有：IE5.0+、Firefox、Netscape7、Mozilla1.0、Safari1.2等。

属性：

属性名	描述
onreadystatechange	一个事件，用来捕获所有的状态变换,通常调用javascript函数
readyState	返回对象状态： 0 = uninitialized（没有初始化） 1 = loading（正在读取中） 2 = loaded（已读取） 3 = interactive（交互中） 4 = complete（完成）
responseText	响应文本，表示一个串
responseXML	响应XML数据，可以解析为DOM对象
status	返回服务器状态的数字 404 = Not Found（没发现） 200 = OK（成功）
statusText	返回状态文本（如：“Not Found” ，“OK”）

方法：

方法	描述
open( 'GET/POST', url, true/flase,   user,passwd)	打开一个请求 get/post：请求方法 url：请求的url true/flase:异步/同步模式。即发送请求后是否等待回应而去执行别的操作。 访问用户，访问密码（可选）
send(content)	向服务器发送请求 可以是DOM对象的实例、输入流，或者串
getAllResponseHeaders()	获取完整的Http header信息 包括Content-Length、Date、url
getResponseHeader(headername)	获取指定的Http header信息
setRequestHeader("label","value")	设置请求头部信息 在设置任何头部之前必须先调用open()
abort	取消当前请求

 

二、Ajax的一般流程：(Request/Server模式)

1、大致流程：

（1）客户端触发ajax事件；

（2）初始化并发出XMLHttpRequest请求

（3）指定相应处理函数：.onreadystatechange=函数；

（4）向服务器做出请求：使用open()调用，然后send()；

（5）处理服务器返回的信息：.readyState==4  .status==200

 

2、具体流程：

<!—创建XMLHttpRequest类-->

function createXmlHttpRequest()

{

var xmlHttp=null;

if(window.XMLHttpRequest) //Mozilla浏览器

{

xmlHttp=new XMLHttpRequest(); //Mozilla浏览器

if(xmlHttp.overrideMimeType)  //设置MIME类别

        {

                xmlHttp.overrideMimeType("text/xml");

         }

}

else if(window.ActiveXObject)   //IE浏览器

{

try

{

xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); //IE老版浏览器（3.0、4.0、5.0）

}

catch(e)

{

xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  //IE新版浏览器

        }

        if(!xmlHttp)    //异常，创建对象实例失败

        {

            window.alert("你的浏览器不支持创建XMLhttpRequest对象");

                return false;

        }

        return xmlHttp;

}

 

<!--发送请求：open()和send()方法-->

xmlHttp.open('GET/POST', URL, true/false); 

    //GET/POST：必须大写，否则某些浏览器(如Firefox)可能无法处理请求。

        GET方式将参数追加到URL中发送，对URL的长度有限制

POST方式将参数串放在请求体中发送，对URL的长度无限制

    //URL：处理AJAX请求的页面的URL，通常URL中要传送若干参数过去。

      （如果URL传送中有包含汉字的字符串变量，记得用encodeURI(字符串变量)方式）

    //true/false：异步/同步模式

xmlHttp.send(null);

 

<!--服务器的响应：告诉XMLHttpRequest对象用哪一个JavaScript函数处理这个响应-->

方式一：xmlHttp.onreadystatechange = 函数名;

方式二：xmlHttp.onreadystatechange = function()

{

if(xmlHttp.readyState==4) //服务器响应状态（0-未初始化;1-正在装载;3-交互中;4-完成）

{

if(xmlHttp.status==200)   //代码执行状态（200表正常）

{

xmlHttp.responseText=将响应信息作为字符串返回

        xmlHttp.responseXML=将响应信息格式化为XMLDOM对象并返回

        //该值=处理AJAX请求页面Response.Write("…");Response.End();中"…"的值

        ...

}

}

}