ajax原理

时间:2024-06-26 06:53:30编辑:优化君

AJAX 的原理及实现方式??

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是页面的部分从服务器获得请求数据。实现方式就利用页面部分刷新数据来给用户更好的体验。其中 XMLHttpRequest 是ajax的核心机制,Ajax本身是很多技术的集合,里面有很多要说的,自己可以从一些ajax的实例学习下。


Ajax 工作原理?

Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。这样把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理,减轻服务器和带宽的负担,从而达到节约ISP的空间及带宽租用成本的目的。

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。

  在创建Web站点时,在客户端执行屏幕更新为用户提供了很大的灵活性。下面是使用Ajax可以完成的功能:

动态更新购物车的物品总数,无需用户单击Update并等待服务器重新发送整个页面。

提升站点的性能,这是通过减少从服务器下载的数据量而实现的。例如,在某购物车页面,当更新篮子中的一项物品的数量时,会重新载入整个页面,这必须下载整个页面的数据。如果使用Ajax计算新的总量,服务器只会返回新的总量值,因此所需的带宽仅为原来的百分之一。 消除了每次用户输入时的页面刷新。例如,在Ajax中,如果用户在分页列表上单击Next,则服务器数据只刷新列表而不是整个页面。
直接编辑表格数据,而不是要求用户导航到新的页面来编辑数据。对于Ajax,当用户单击Edit时,可以将静态表格刷新为内容可编辑的表格。用户单击Done之后,就可以发出一个Ajax请求来更新服务器,并刷新表格,使其包含静态、只读的数据。

  一切皆有可能!但愿它能够激发您开始开发自己的基于Ajax的站点。然而,在开始之前,让我们介绍一个现有的Web站点,它遵循传统的提交/等待/重新显示的范例,我们还将讨论Ajax如何提升用户体验。


AJAX的具体工作原理是什么?

Ajax和服务器端技术毫不相关;DOM模型是Ajax最本质的技术;在使用Ajax控件前理解它们的实现;学好JavaScript ;Ajax点缀:CSS 。 观点一:Ajax和服务器端技术毫不相关 严格的说,与传统web开发相比,Ajax是完完全全的客户端技术。由于很多控件封装了客户端和服务器端的通信过程,因此很多问题也因通信而起。事实上,不论何种Ajax技术,服务器端都是返回的一个纯文本流,再由客户端来处理这个文本。这段文本可以是xml格式,也可以是一个Html片段,也可以是一段JavaScript脚本,或者仅是一个字符串。服务器端仅仅是作为一个数据接口,客户端使用XMLHttpRequest对象来请求这个页面,服务器端在页面内写入结果文本,这个过程和普通的web开发没有任何区别。所不同的只是,客户端在异步获取结果后,不是直接显示在页面,而是由客户端的Javascript脚本处理后再显示在页面。至于各种控件所谓的能返回DataSet对象,Date对象,或者其他的数据类型,都是封装了这个处理过程的结果。 观点二:DOM模型是Ajax最本质的技术 之所以没有把XMLHttpRequest列为最本质的技术,因为本人觉得它实在是太简单了,它只是可以让浏览器在后台请求一个页面,并将其内容交给JavaScript处理。真正的核心应该是:DOM模型,即文档对象模型。在DOM模型里,Html标记都被认为是一个对象,例如:div对象,table对象等等。DOM模型就规定了这些对象所具有的属性、方法和事件。通过这些性质,可以对一个已经显示于浏览器的页面进行内容的修改,例如增加节点、修改节点位置,删除节点等等。而不仅仅是一个innerHTML属性这么简单,虽然这是一个很有用的属性。 观点三:在使用Ajax控件前理解它们的实现 使用Ajax控件的确可以提高效率,但如果你空中楼阁般使用控件,那就得不偿失了。从一个控件换到另外一个控件又会有一个漫长的学习曲线。所以应该从底层了解其,况且Ajax实在不是什么高深的技术。其实任何东西的最底层其实都是简单的,但如果封装了这些底层的东西,事情会变得复杂和难以理解。以Asp.net为例,它的定制特性可以使得只要在方法前加上[ajax method]类似这样的标志就可以称为一个异步方法,相信这使得Asp.net的Ajax开发显得更加“高效”或者是“神秘”,而更多的事情则被封装了。同样记住一条,任何对服务器端的请求仅仅是返回纯文本,我们不一定要依赖于封装好的处理过程,而完全可以自己来实现。 观点四:学好JavaScript 在大多数人看来,JavaScript总不是那么一种正规的语言,随便copy一段就碰巧能运行,学过c之类的人,一看也能看懂,而且在浏览器中常常有脚本错误提示,所以潜意识觉得总不能付之以大任。事实上,要学好Ajax,这就完全是一种错误的看法。javascript作为一种脚本语言,其语法的确不是很严格,但并不妨碍其完成诸多复杂的任务,没有JavaScript,就没有Ajax。所以本人强烈建议,学Ajax前,一定要好好研究一番JavaScript,一般来讲,如果能顺利看懂prototype框架的代码(如:prototype-1.3.1.js),你的JavaScript水平就基本过关了。同时对DOM模型也可以算有一个基本的了解。 观点五:Ajax点缀:CSS 用JavaScript控制CSS其实很简单,基本上每个DOM对象都有一个style对象,只要把css属性里的"-"去掉,并让随后的字母变为大写就可以作为属性使用了,例如:element.style.backgroundColor="#f00";在css是:选择符 {background-color:#f00}采纳哦


AJAX怎么实现异步刷新和局部刷新

这次给大家带来AJAX怎么实现异步刷新和局部刷新,AJAX实现异步刷新和局部刷新的注意事项有哪些,下面就是实战案例,一起来看一下。Overriew: onReadyStateChange被回调函数赋值,则能实现异步调用,回调函数直接操作DOM,则能实现局部刷新。那么XMLHttpRequest的onReadyStateChange如何知道服务ready了呢?状态如何change了呢(观察者模式)?则是通过客户端对服务的状态询问(定期轮询)所实现的。详解:1. XMLHttpRequest 负责与服务器端的通讯,其内部有很多重要的属性:readyStatus=4,status=200等等。当XMLHttpRequest的整体状态并且保证它已经完成(readyStatus=4),即数据已经发送完毕。然后根据服务器的设定询问(类似于客户端会轮询服务器的返回状态,仍然是http短连接,并非长连接的服务器端push)请求状态,如果一切已经就绪(status=200),那么就执行需要的操作。操作一般就是直接操作DOM,所以AJAX能做到所谓的“无刷新”用户体验。document.getElementById("user1").innerHTML = "数据正在加载..."; if (xmlhttp.status == 200) { document.write(xmlhttp.responseText); }2. 那么在AJAX客户端如何做到的异步呢?实际上就是Javascript的回调函数起的作用提供一个回调JavaScript函数,一旦服务器响应可用,该函数就被执行业务函数:function castVote(rank) { var url = "/ajax-demo/static-article-ranking.html"; var callback = processAjaxResponse; executeXhr(callback, url);}需要异步通讯的函数: function executeXhr(callback, url) { // branch for native XMLHttpRequest object if (window.XMLHttpRequest) { req = new XMLHttpRequest(); req.onreadystatechange = callback; req.open("GET", url, true); req.send()(null); } // branch for IE/Windows ActiveX version else if (window.ActiveXObject) { req = new ActiveXObject("Microsoft.XMLHTTP"); if (req) { req.onreadystatechange = callback; req.open("GET", url, true); req.send()(); } }}req.onreadystatechange = callbackreq.open("GET", url, true)第一行定义了JavaScript回调函数,一旦响应就绪它就自动执行,而req.open()方法中所指定的“true”标志说明想要异步执行该请求。一旦服务器处理完XmlHttpRequest并返回给浏览器,使用req.onreadystatechange指派所设置的回调方法将被自动调用。回调函数:function processAjaxResponse() { if (req.readyState == 4) { // only if "OK" if (req.status == 200) { document.getElementById("user1").innerHTML = req.responseText; } else { alert("There was a problem retrieving the XML data:" + req.statusText); } }}相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!推荐阅读:laypage分页插件+ajax怎样做出异步分页JS+ajax实现php异步提交表单


AJAX 如何实现异步刷新?

这样给你解释。

首先,我们打开一个URL地址的时候是直接在浏览器地址栏里面输入,回车后,在浏览器里面就会显示出服务器相应的内容。也就是说,我们常规浏览器打开一个URL地址时,需要浏览器才行。

而Ajax是怎么一回事呢?它实际是通过JavaScript里XMLHttpRequest对象来打开一个URL地址,然后读URL地址相应回来的内容,换句话说,我们可以用另外打开一个窗口,而通过js就能打开一个URL地址并且获得响应的信息。这些信息被JS捕获到后,就可以通过JS把它们按照一个规则组合并显示在页面上。这一个过程就叫做Ajax的异步刷新。

你要真实感受这个过程,你得用js实际操作下才行。

我给你编写一个例子,你自己看看吧:
=====================================================
/**
* 创建XMLHttpRequest对象
* @return
* 创建成功返回该对象,否则返回null
*/
function createXMLHttpRequest() {
var xmlHttpReq=null;
if (window.XMLHttpRequest) {//IE7以及以上版本、FF等浏览器的window对象是有XMLHttpRequest子对象的
xmlHttpReq = new XMLHttpRequest();
} else {
if (window.ActiveXObject) {//IE6以及以下的版本没有XMLHttpRequest,但它可以通过ActiveXObject创建该对象
try {
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
try {
xmlHttpReq = new ActiveXObject("Msxml12.XMLHTTP");
} catch (e) {
}
}
}
}
return xmlHttpReq;
}


/**
* 向指定地址发送请求
* @param url
* 要发送请求的URL地址
*/
function sendRequest(url) {
var xmlHttpReq=createXMLHttpRequest();
if(xmlHttpReq){
xmlHttpReq.open("GET", url, true);
xmlHttpReq.onreadystatechange = function() {
if (xmlHttpReq.readyState == 4) {
if (xmlHttpReq.status == 200) {
var out = "";
var res = XMLHttpReq.responseText;
alert("服务器响应的字符串:"+res);
}
}
};
xmlHttpReq.send(null);
}
}
/**
* 调用Ajax,向服务器发送请求,其中
* ./pages/userlist.jsp?sid=12
* 是要请求的URL地址
*/
function userCheck() {
sendRequest("./pages/userlist.jsp?sid=12");
}


ajax是什么?干什么用的?以及什么时候用?

AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 主要包含了以下几种技术Ajax(Asynchronous JavaScript + XML)的定义 基于web标准(standards-based presentation)XHTML+CSS的表示; 使用 DOM(Document Object Model)进行动态显示及交互; 使用 XML 和 XSLT 进行数据交换及相关操作; 使用 XMLHttpRequest 进行异步数据查询、检索; 使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文。类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX”。 AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。


Ajax有什么用?什么时候使用Ajax?

AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

Ajax(Asynchronous JavaScript + XML)的定义
  基于web标准(standards-based presentation)XHTML+CSS的表示;
  使用 DOM(Document Object Model)进行动态显示及交互;
  使用 XML 和 XSLT 进行数据交换及相关操作;
  使用 XMLHttpRequest 进行异步数据查询、检索;
  使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文,原文题目(Ajax: A New Approach to Web Applications)。
  类似于DHTML或LAMP,AJAX不是指一种单一的技术,而是有机地利用了一系列相关的技术。事实上,一些基于AJAX的“派生/合成”式(derivative/composite)的技术正在出现,如“AFLAX”。
  AJAX的应用使用支持以上技术的web浏览器作为运行平台。这些浏览器目前包括:Mozilla、Firefox、Internet Explorer、Opera、Konqueror及Safari。但是Opera不支持XSL格式对象,也不支持XSLT。
该技术在1998年前后得到了应用。允许客户端脚本发送HTTP请求(XMLHTTP)的第一个组件由Outlook Web Access小组写成。该组件原属于微软Exchange Server,并且迅速地成为了Internet Explorer 4.0[3]的一部分。部分观察家认为,Outlook Web Access是第一个应用了Ajax技术的成功的商业应用程序,并成为包括Oddpost的网络邮件产品在内的许多产品的领头羊。但是,2005年初,许多事件使得Ajax被大众所接受。Google在它著名的交互应用程序中使用了异步通讯,如Google讨论组、Google地图、Google搜索建议、Gmail等。Ajax这个词由《Ajax: A New Approach to Web Applications》一文所创,该文的迅速流传提高了人们使用该项技术的意识。另外,对Mozilla/Gecko的支持使得该技术走向成熟,变得更为易用。
  AJAX前景非常乐观,可以提高系统性能,优化用户界面。AJAX现有直接框架AjaxPro,可以引入AjaxPro.2.dll文件,可以直接在前台页面JS调用后台页面的方法。但此框架与FORM验证有冲突。另微软也引入了AJAX组建,需要添加AjaxControlToolkit.dll文件,可以在控件列表中出现相关控件。
传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,然後返回一个新的网页。这个做法浪费了许多带宽,因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
  与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。
  使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息。
  Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHTML应用程序那样,Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟,一些简化Ajax使用方法的程序库也相继问世。同样,也出现了另一种辅助程序设计的技术,为那些不支持JavaScript的用户提供替代功能。
  对应用Ajax最主要的批评就是,它可能破坏浏览器后退按钮的正常行为[4]。在动态更新页面的情况下,用户无法回到前一个页面状态,这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;用户通常都希望单击后退按钮,就能够取消他们的前一次操作,但是在Ajax应用程序中,却无法这样做。不过开发者已想出了种种办法来解决这个问题,当中大多数都是在用户单击后退按钮访问历史记录时,通过建立或使用一个隐藏的IFRAME来重现页面上的变更。(例如,当用户在Google Maps中单击后退时,它在一个隐藏的IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时的状态。)
  一个相关的观点认为,使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现,大部分都使用URL片断标识符(通常被称为锚点,即URL中#后面的部分)来保持跟踪,允许用户回到指定的某个应用程序状态。(许多浏览器允许JavaScript动态更新锚点,这使得Ajax应用程序能够在更新显示内容的同时更新锚点。)这些解决方案也同时解决了许多关于不支持后退按钮的争论。
  进行Ajax开发时,网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应 [5],没有恰当的预读数据 [6],或者对XMLHttpRequest的不恰当处理[7],都会使用户感到延迟,这是用户不欲看到的,也是他们无法理解的[8]。通常的解决方案是,使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。
  一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax;
  用JavaScript作的Ajax引擎,JavaScript的兼容性和DeBug都是让人头痛的事;
  Ajax的无刷新重载,由于页面的变化没有刷新重载那么明显,所以容易给用户带来困扰――用户不太清楚现在的数据是新的还是已经更新过的;现有的解决有:在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等;
  对串流媒体的支持没有FLASH、Java Applet好;
[编辑本段]基础应用
  创建XMLHttpRequest 方法如下
  XMLHttpRequest 类首先由Internet Explorer以ActiveX对象引入,被称为XMLHTTP。 后来Mozilla﹑Netscape﹑Safari 和其他浏览器也提供了XMLHttpRequest类,不过它们创建XMLHttpRequest类的方法不同。
  对于Internet Explorer浏览器:
  xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
  xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
  xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
  由于在不同Internet Explorer浏览器中XMLHTTP版本可能不一致,为了更好的兼容不同版本的Internet Explorer浏览器,因此我们需要根据不同版本的Internet Explorer浏览器来创建XMLHttpRequest类,上面代码就是根据不同的Internet Explorer浏览器创建XMLHttpRequest类的方法。
  对于Mozilla﹑Netscape﹑Safari等浏览器
  创建XMLHttpRequest 方法如下:xmlhttp_request = new XMLHttpRequest();
  如果服务器的响应没有XML mime-type header,某些Mozilla浏览器可能无法正常工作。 为了解决这个问题,如果服务器响应的header不是text/xml,可以调用其它方法修改该header。
  xmlhttp_request = new XMLHttpRequest();
  xmlhttp_request.overrideMimeType('text/xml');


Jquery和ajax的具体区别是什么?

jquery 是以原始javascript为基础, 提高javascript 开发效率的轻量级库 可以理解为对原始javascript的包装

ajax 是近几年新起的 一种异步加载技术 是对 原javascript 技术的补充 是javascript的一个分支

所以 jquery 和 ajax 没有可比性。 jquery 也有自己的ajax 框架 如其中的$.ajax();$.post()等等

-------------autocomplete属于jquery插件.
2010年网络营销评比,现在国内网络营销做的最好的南京新雨恒网络h9


ajax和js和jquery 三者有什么关系

jquery 是JS的一个框架,JS是网页的脚本语言,AJAX是指一种创建交互式网页应用的网页开发技术。操作方法如下:1、打开eclipse创建一个web工程项目,在WebContent下创建文件夹js,把JQuery的js文件放到js文件夹下,并创建index.html和doRequest.jsp。2、index.html文件内容如图。3、doRequest.jsp和web.xml文件内容如图。4、对原生JS版的做测试,在index.html加入如图代码,测试结果如图。5、最后测试一下页面无法访问的情况,测试结果如图,就完成了。

上一篇:3d打印机模型

下一篇:bootymusic是什么意思