`

Ajax总结

    博客分类:
  • AJAX
阅读更多

在工作中用了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之流好;
●对搜索引擎不友好
●破坏程序的异常机制
●存在一些安全问题,暴露了一些程序接口和数据逻辑

分享到:
评论

相关推荐

    WebService和Ajax总结

    **WebService和Ajax总结** 在IT领域,WebService和Ajax是两种重要的技术,它们分别在Web应用程序的交互和用户体验提升上发挥了重要作用。本篇文章将全面探讨这两种技术的原理、应用及其在.NET环境下的实现。 **一...

    ajax总结:formdata,get,post,ajax等

    ajax总结,load,get,post,ajax总结,还有formdata~~~

    ajax总结,自己的总结

    很好的ajax总结,有助于刚学ajax的初学者

    jQuery和AJAX总结[定义].pdf

    【jQuery和AJAX总结】 jQuery是一个广泛应用于网页开发的JavaScript库,它的主要目的是简化JavaScript的使用,让开发者能够更高效地处理DOM操作、事件处理、动画效果以及与服务器的异步通信。jQuery的核心特性包括...

    Jquery Ajax总结性文档示例

    ### Jquery Ajax总结性文档知识点解析 #### 一、引言 JQuery 是一款轻量级的 JavaScript 库,以其简化 HTML 文档遍历、事件处理、动画以及 Ajax 交互而闻名。Ajax(Asynchronous JavaScript and XML)是一种在无需...

    对AJAX总结记录 为什么要用ajax?

    对AJAX总结记录 为什么要用ajax?

    开发Ajax总结

    ### 开发Ajax总结 #### 一、Ajax概述 ##### 1.1 什么是Ajax **Ajax**(Asynchronous JavaScript and XML)是一种创建交互式网页应用的技术。它通过在后台与服务器进行少量数据交换的方式,使网页能够实现局部更新...

    初学者必看的Ajax总结篇

    一、Ajax简介、优劣势、应用场景以及技术 Ajax简介 : Asynchronous Javascript And XML (异步的JavaScript和XML) 它并不是一种单一的技术,而是有机利用一系列交互式网页应用相关的技术所形成的结合体 AJAX 是...

    ajax总结.doc

    一些基础的ajax点,帮助大家在使用ajax的同时,能够更深入的了解和体验。有了Ajax之后,就可以实现在网页不跳转不刷新的情况下,在网页后台提交数据,部分更新页面内容。

    AJAX技术 详细总结

    自己总结的非常好的AJAX总结,用于页面的一种非常流行的技术。

    mvc中ajax总结及运用

    ajax的基本运用和js的复习,能够实现一些很好的效果,没有用过的朋友可以用用

    ajax自我总结(初版)

    ajax自我总结 ajax自我总结 ajax自我总结 ajax自我总结

    jQuery ajax总结

    总结jQuery的AJAX功能提供了丰富的API,简化了与服务器端的异步通信。无论是简单的GET和POST请求,还是复杂的设置和回调,jQuery都提供了简洁易用的接口。理解并掌握这些知识点对于前端开发工作至关重要,可以有效...

    AJAX_技术总结_设计模式

    **AJAX 技术总结与设计模式** AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了用户体验。...

    AJAX技术总结.doc

    ### AJAX技术精析 #### 一、AJAX技术概述 AJAX,即"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种用于构建交互式网页应用的网页开发技术。它结合了多种关键技术,包括XHTML+CSS用于表现,DOM...

    JavaScript实现Ajax总结

    **总结** Ajax的核心在于XMLHttpRequest对象的使用,通过它与服务器进行异步通信。虽然存在一些缺点,但在优化用户体验方面,Ajax依然是Web开发中的重要技术。理解并掌握Ajax的工作原理和实现方式,对于构建交互性强...

    ajax应用个人总结

    Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。在这个例子中,我们看到一个简单的Ajax应用,...

    ajax知识点总结

    **Ajax(Asynchronous JavaScript and XML)技术概述** Ajax是一种在无需刷新整个网页的情况下,能够更新部分网页内容的技术。它的核心是利用JavaScript与服务器进行异步数据交换,通过XML或者JSON等格式传输数据,...

    AJAX电子书(总结)

    **AJAX电子书总结** AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。这种技术的出现极大地提升了用户体验,因为它允许后台与服务器进行数据交换,而用户界面...

    Ajax课程总结

    ajax总结知识,大家一起共赏吧,很不错的,希望能给你帮助!

Global site tag (gtag.js) - Google Analytics