`
longgangbai
  • 浏览: 7340058 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论
阅读更多

Ajax的工作原理

 

使用Ajax的主要原因:1、通过适当的Ajax应用达到更好的用户体验;2、把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。  

AjaxAsynchronous JavaScript and XML的缩写。它包括

使用XHTMLCSS标准化呈现;

使用DOM实现动态显示和交互;

使用XMLXSLT进行数据交换与处理;

使用XMLHttpRequest进行异步数据读取;

最后用JavaScript绑定和处理所有数据;

工作原理

    Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

    Ajax其核心只有JavaScriptXMLHTTPRequestDOM,在旧的交互方式中,由用户触发一个HTTP请求到服务器,服务器对其进行处理后再返回一个新的HTHL页到客户端, 每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML,而用户每次都要浪费时间和带宽去重新读取整个页面。而使用Ajax后用户从感觉上几乎所有的操作都会很快响应没有页面重载(白屏)的等待。

1XMLHTTPRequest

    Ajax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。

XMLHttpRequest 对象方法描述 

abort() 停止当前请求 

getAllResponseHeaders() 作为字符串返问完整的headers 

getResponseHeader("headerLabel") 作为字符串返问单个的header标签 

open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 设置未决的请求的目标 URL, 方法, 和其他参数 

send(content) 发送请求

setRequestHeader("label", "value") 设置header并和请求一起发送 ('post'方法一定要 )

XMLHttpRequest 对象属性描述 

onreadystatechange 状态改变的事件触发器,readyState 对象状态(integer):

0 = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成 

responseText 服务器进程返回数据的文本版本 

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

responseBody 服务器返回的主题(非文本格式)

responseStream 服务器返回的数据流

status 服务器返回的状态码, 如:404 = "文件末找到" 200 ="成功" 

statusText 服务器返回的状态文本信息 

2JavaScript

JavaScript是一在浏览器中大量使用的编程语言。

3DOM Document Object Model

DOM是给 HTML XML 文件使用的一组 API。它提供了文件的结构表述,让你可以改变其中的內容及可见物。其本质是建立网页与 Script 或程序语言沟通的桥梁。所有WEB开发人员可操作及建立文件的属性、方法及事件都以对象来展现(例如,document 就代表“文件本身“这个对像, table 对象则代表 HTML 的表格对象等等)。这些对象可以由当今大多数的浏览器以 Script 来取用。一个用HTMLXHTML构建的网页也可以看作是一组结构化的数据,这些数据被封在DOMDocument Object Model)中,DOM提供了网页中各个对象的读写的支持。

4XML

可扩展的标记语言(Extensible Markup Language)具有一种开放的、可扩展的、可自描述的语言结构,它已经成为网上数据和文档传输的标准。

5、综合

Ajax引擎,实际上是一个比较复杂的JavaScript应用程序,用来处理用户请求,读写服务器和更改DOM内容。JavaScriptAjax引擎读取信息,并且互动地重写DOM,这使网页能无缝化重构,也就是在页面已经下载完毕后改变页面内容,这是我们一直在通过JavaScriptDOM在广泛使用的方法,但要使网页真正动态起来,不仅要内部的互动,还需要从外部获取数据,在以前,我们是让用户来输入数据并通过DOM来改变网页内容的,但现在,XMLHTTPRequest,可以让我们在不重载页面的情况下读写服务器上的数据,使用户的输入达到最少。

Ajax使WEB中的界面与应用分离(也可以说是数据与呈现分离),而在以前两者是没有清晰的界限的,数据与呈现分离的分离,有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。也可以把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理。

四、应用

Ajax理念的出现,揭开了无刷新更新页面时代的序幕,并有代替传统web开发中采用form(表单)递交方式更新web页面的趋势。

五、Ajax的优势

1、减轻服务器的负担。因为Ajax的根本理念是“按需取数据”,所以最大可能在减少了冗余请求和响影对服务器造成的负担;

2、无刷新更新页面,减少用户实际和心理等待时间;

3、也可以把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,节约空间和带宽租用成本;

4Ajax使WEB中的界面与应用分离(也可以说是数据与呈现分离);

 

Ajax原始代码如下:常用的东东

 function() {

var xhr = new AjaxXmlHttpRequest();

$("#btnAjaxOld").click(function(event) {

var xhr = new AjaxXmlHttpRequest();

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {

 document.getElementById("divResult").innerHTML = xhr.responseText;

 }

}

 xhr.open("GET", "data/AjaxGetCityInfo.aspx?resultType=html", true); xhr.send(null); });

 }

 

//跨浏览器获取XmlHttpRequest对象

function AjaxXmlHttpRequest() {

var xmlHttp;

try {

// Firefox, Opera 8.0+, Safari

xmlHttp = new XMLHttpRequest();

} catch (e) {

// Internet Explorer

 try {

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

 } catch (e) {

 alert("您的浏览器不支持AJAX!");

return false; } }

}

 return xmlHttp;

}

分享到:
评论

相关推荐

    ajax常用实例代码

    【Ajax常用实例代码】主要涵盖了Web开发中的几个关键应用场景,包括用户登录注册注销、数据库交互、跨页面数据传递、文本片段展示以及获取服务器信息。这些功能在构建动态、交互性强的Web应用时非常常见,而Ajax技术...

    Ajax常用技术集合

    以下是对Ajax常用技术的详细说明: 1. **XMLHttpRequest对象**:Ajax的核心是XMLHttpRequest(XHR)对象,它是JavaScript内置的对象,负责与服务器进行异步通信。通过创建XMLHttpRequest实例,可以发送HTTP请求到...

    JQuery与Ajax常用代码实现对比

    下面是一个传统的AJAX请求的示例代码: ```javascript var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); else if (window....

    Ajax示例代码

    ### Ajax技术解析与示例代码详解 在现代Web开发中,Ajax(Asynchronous JavaScript and XML)是一种用于创建异步Web应用程序的技术。它允许网页在不重新加载整个页面的情况下,通过后台加载数据并更新部分页面内容...

    疯狂ajax讲义源代码

    《疯狂Ajax讲义》是由知名IT作者李刚编写的一本深入解析Ajax技术的教程,其源代码是书中实例和练习的实现,旨在帮助读者更好地理解和掌握Ajax的核心概念和技术。Ajax,全称Asynchronous JavaScript and XML(异步...

    Ajax常用设计模式

    本资源主要探讨了Ajax常用的设计模式及其实际应用场景,这对于提升Web应用的用户体验和性能至关重要。 首先,我们来了解一下Ajax的核心组成部分: 1. JavaScript:它是实现Ajax交互的关键,通过创建XMLHttpRequest...

    Java中的Ajax编程常用类库打包

    本压缩包包含了一些Java环境下进行Ajax编程常用的类库,下面将详细介绍这些类库及其在Ajax开发中的作用。 1. dom4j:这是一个Java的XML处理库,提供了丰富的API来读取、写入、修改和操作XML文档。在Ajax中,dom4j...

    Ajax教程及源代码

    本教程的源代码应该包含了一个使用Ajax的小项目,你可以通过阅读和运行代码来加深对上述知识点的理解。这个项目可能是模拟一个简单的数据交互,比如从服务器获取数据并在页面上显示,或者将用户输入的数据发送到...

    asp 分页 源代码 ajax源代码

    总结来说,ASP分页源代码是实现服务器端数据分块显示的脚本,而AJAX源代码则涉及利用JavaScript进行异步数据加载。两者结合,可以构建出既高效又用户体验良好的数据分页系统。在实际应用中,需要考虑性能优化、错误...

    jquery中ajax常用的方法,jQuery ajax框架常用方法总结.docx

    jQuery 中 AJAX 常用的方法总结 jQuery 是一个功能强大且流行的 JavaScript 库,它提供了许多有用的方法来处理 AJAX 请求。AJAX(Asynchronous JavaScript and XML)是一种创建交互式网页的技术,它允许网页从...

    ajax常用等待图片

    而"ajax常用等待图片"则是在进行Ajax请求时显示的一种视觉提示,让用户知道后台正在处理数据或加载内容。 当用户触发一个Ajax请求时,由于网络延迟或者服务器处理时间,用户可能需要等待一段时间才能看到结果。这...

    《Ajax编程技术与实例》源代码

     全书内容由浅入深,充分考虑了Ajax学习者的特点,并在配套光盘中提供了书中实例的全部源代码,以方便读者能够举一反三,编写出适合需求的程序。  本书不仅适合Ajax技术的初学者,还能够帮助有一定编程...

    ajax常用框架api文档

    本文将深入探讨Ajax的常用框架及其API,包括DWR (Direct Web Remoting),jQuery,Ext JS,MooTools和Prototype,以及Scriptaculous。 1. **DWR**:DWR是一款开源Java库,它允许JavaScript与服务器端的Java对象进行...

    Ajax程序经典小例子,《Ajax入门教程》代码

    这段代码会在收到服务器响应后,将数据插入到id为'result'的元素中。 **总结** Ajax技术是现代Web开发中的重要组成部分,它使得网页交互更加高效、平滑。通过理解和掌握Ajax,开发者能够创建出更具吸引力的用户...

    AJAX 常用案例 gridview updatepanel

    在压缩包中的"AJAX.sln"可能是一个包含使用AJAX技术的ASP.NET解决方案,而"Web"可能是一个项目文件夹,里面包含了使用AJAX的Web应用程序代码。开发者可以研究这些文件以了解AJAX在实际项目中的应用和实现方式,包括...

    Base64和AjaxUpload上传文件代码实例

    Base64和AjaxUpload上传文件代码实例是两种常用的文件上传方式,它们都可以实现文件上传到服务器端,但它们之间有着明显的区别。 Base64上传文件是一种基于文本编码的上传方式,它将文件转换为Base64字符串,然后将...

    jQuery常用代码片段

    这篇博文"jQuery常用代码片段"很可能是为了分享一些实用的jQuery代码示例,帮助开发者提高工作效率。下面我们将深入探讨jQuery的一些核心功能和常见用法。 1. **选择器**: jQuery的选择器类似于CSS,可以轻松地选取...

    Ajax控件集合(包含各种常用控件原码)

    在"Ajax控件集合"中,包含了各种常用的Ajax控件,这些控件可以帮助开发者轻松地在Web应用中实现Ajax功能。这些控件通常是由JavaScript、HTML和CSS构建的,并可能利用XML或其他数据格式来传递信息。以下是一些可能...

Global site tag (gtag.js) - Google Analytics