标签归档：Ajax实例

Ajax总结

2条回复

在工作中用了Ajax N多次了，也看过一些相关方面的书籍，也算是认识了它，但是一直没有认真总结和整理过相关的东东，失败！
近有闲情，将之总结如下：

【名称】
Ajax是Asynchronous JavaScript and XML(以及 DHTML 等)的缩写。
详情请移步Ajax: A New Approach to Web Applications

【原理】
简单一些，就是通过使用XmlHttpRequest对象向服务器发送异步请求，获取返回的数据，并使用Javascript和DOM操作页面内的元素，从而达到改变页面内容的目的。
其中XmlHttpRequest对象是关键，因为它支持异步请求。XMLHttpRequest是完全用来向服务器发出一个请求的。它所包含的方法和属性如下所示：
方法：
●abort() 导致当前正在请求被取消
●getAllResponseHeaders() 返回一个字符串，包含氖 响应标头的名称和值
●getResponseHeader(name) 返回指定的响应标头的值
●open(method, url, async, username, password) 设置请求的方法和目标URL。请求可以声明为同步的（可选），也可以给需要基于窗口谁的请求而提供用户名和口令（可选）
●send(content) 发起带有指定内容（可选）的请求
●setRequestHeader(name, value) 利用指定的名称和值，设置一个请求标头

属性：
●onreadystatechange 指派在请求的状态发生变化时所使用的事件处理程序
●readyState 一个整数值，指示请求的状态如下：
0—-未初始化
1—-正在加载
2—-已加载
3—-交互
4—–完成
●responseText 在响应里所返回的内容
●responseXML 如果内容是XML，就根据内容而创建XML DOM
●status 从服务器所返回的响应状态码。例如：200表示成功，404表示未找到，参考HTTP规范
●statusText 响应所返回的状态文本消息

对于此对象其它介绍请移步：XMLHttpRequest概述

【所包含的技术】
· 基于XHTML和CSS标准的表示；
· 使用Document Object Model进行动态显示和交互；
· 使用XMLHttpRequest与服务器进行异步通信；
· 使用JavaScript绑定一切；
· 使用XML和XSLT;交换和操作数据。
以上的技术都是一些广泛使用了的技术，都属于比较旧的技术，ajax是这几种技术的结合体。

【简单实例】

 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function ajax() {
                var xmlHttp;
				//	 依据对象判断，而不是依据浏览器
                if(window.XMLHttpRequest)                {
                    xmlHttp=new XMLHttpRequest();//mozilla浏览器
                }else if(window.ActiveXObject){
                    try{
                        xmlHttp=new ActiveXObject("Msxmlx2.XMLHTTP");   //IE老版本
                    }catch(e){}
                    try{
                        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE新版本
                    }catch(e){}
 
                    if(!xmlHttp){
                        window.alert("不能创建XMLHttpRequest对象实列");
                        return false;
                    }
                }
 
                if (!xmlHttp) {
                    alert("创建XMLHttpRequest对象失败！");
                    return false;
                }
 
                xmlHttp.open('POST', 'index.php?get_a=2&get_b=3', false);
     xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=UTF-8;');
                xmlHttp.send("post_a=1&post_b=2");
                xmlHttp.onreadystatechange = function() {
                    alert(xmlHttp.readyState);
                }
                if(xmlHttp.readyState == 4){    //判断对象状态
                    var content_obj = document.getElementById("content");
                    content_obj.innerHTML = "正在处理数据...";
                    if(xmlHttp.status == 200){  //信息已经成功返回，开始处理信息
                        var returnStr = xmlHttp.responseText;
                        content_obj.innerHTML =  returnStr;
                    }else{  //页面不正常
                        content_obj.innerHTML = "您所请求的页面存在异常！";
                    }
                }
            }
 
 
        </script>
    </head>
    <body>
        <input type="button" value="ajax" onclick="ajax();" />
        <div id="content">ajax内容显示区</div>
    </body>
</html>

切记：当发起一个POST请求时，需要对报头 Content-type（内容类型）进行设置。这样，服务器就知道如何来处理上传的内容。如果要模拟通过HTTP协议的POST方式来发送表单，则应将内容类型设置为application/x-www-form-urlencoded。

【优点】

●页面无刷新，用户体验好；
●异步，不打断用户操作，响应速度快；
●“按需取数据”，减少冗余请求，减轻服务器负担；
●基于标准化的并被广泛支持的技术，无需额外的插件；
●可以使数据和表现分离；

【存在的问题】
●一些设备还不支持
●开发成本提高
●使back按钮失效，用户操作后无法返回；
●对流媒体支持没有flash之流好；
●对搜索引擎不友好
●破坏程序的异常机制
●存在一些安全问题，暴露了一些程序接口和数据逻辑