ajax原理

时间:2024-07-02 13:41:19编辑:coo君

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怎么实例化。。。步骤详细点、、jquery怎么实现啊。。

JQuery提供Ajax实现,不需要自己去创建XMLHttpRequest对象。使用JQuery进行Ajax调用的方式很多,可以在网上查或者直接看参考手册。最常用的方式是:
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});


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 基本概念

  Asynchronous Javascript and XML

  一、典型流程

  1、 客户端触发异步操作

  区别于B->S->B的同步提交模式,有等待时间,异步式在客户操作同时又AJAX引擎与服务器交互,更加人性化和快捷

  2、 创建新的XMLHttpRequest对象

  AJAX技术的核心与服务器交互的类

  3、 与Server进行连接

  通过send()方法实现

  4、 服务器端进行连接处理

  必须的

  5、 返回包含处理结果的XML文档

  其实未必是XML文档,而是字符串TEXT

  6、 XMLHttpRequest对象接收处理结果并分析

  7、 更新页面


  二、原来的流程 browser --àserver --àbrowser 同步的编程模型, 有等待的时间


  三 AJAX的流程

  四、XMLHttpRequest 对象

  1、属性

  readystate

  0描述一种"未初始化"状态;此时,已经创建一个XMLHttpRequest对象,但是还没有初始化

  1描述一种"发送"状态;此时,代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器

  2 描述一种"发送"状态;此时,已经通过send()方法把一个请求发送到服务器端,但是还没有收到一个响应。

  3 描述一种"正在接收"状态;此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收结束。

  4描述一种"已加载"状态;此时,响应已经被完全接收

  responseText 从AJAX引擎中拿出server返回的信息

  status AJAX与sever交互成功没有?状态码200表示成功

  //-----AJAX BEGIN-----

  var xmlHttp;

  //定义变量用来装XMLHttpRequest

  function createXMLHttpRequest() {

  if(window.XMLHttpRequest) {

  xmlHttp = new XMLHttpRequest();

  //NS FIREFOX 等的初始化XMLHttpRequest实例

  } else if(window.ActiveXObject) {

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

  }

  //MS的流浪器的初始化XMLHttpRequest实例

  }

  //浏览器大战牺牲的产物,只有这样才能具有垄断地位,不过现在也在趋于标准化W3C出标准也是迟早的问题

  function validate() {

  //提供DOM模式的入口方法,在事件中调用JAVASCRIPT函数即可进入AJAX引擎

  var vUserId = trim(document.getElementById("userId").value);


  if(vUserId != "") {

  createXMLHttpRequest();

  //上面的那个方法~初始化XMLHttpRequest,状态码为0

  var url = "user_validate.jsp?userId=" + vUserId + "×tamp=" + new Date().getTime();

  //这里的URL里加入了时间戳,这样就不会提交到同一个页面,避免了IE缓存所产生的一些奇怪的问题,也不用清缓存了

  xmlHttp.open("GET", url, true);

  //准备提交给服务器进行事务处理,状态码变成2,具体的食物处理可以再user_validate.jsp中经行,不过我觉得提交给SERVERLET更好 在JSP直接out.println("用户已经存在,代码=[" + userId + "]");就可以被捕获我觉得挺奇怪的其实
  }

  xmlHttp.onreadystatechange=callback;

  //当状态码代发生变化的时候调用后面的函数

  xmlHttp.send(null);

  //提交给服务器进行处理

  } else {

  document.getElementById("resText").innerHTML = "";

  }

  }


  function callback() {

  //状态码改变时调用

  if(xmlHttp.readyState == 4) {

  //确定了变化的状态,定位是服务器处理完毕

  if(xmlHttp.status == 200) {

  //确定了处理的结果,是服务器成功处理,不是404,500错误

  var resTextSpan = document.getElementById("resText");

  //DOM

  if(trim(xmlHttp.responseText) != "") {

  //获得服务器的响应结果,response以字符串的形式返回(TEXT)

  resTextSpan.innerHTML = "" + xmlHttp.responseText + "";

  //还是DOM

  } else {

  resTextSpan.innerHTML = "";

  }

  } else {

  alert("请求失败,错误码=" + xmlHttp.status);

  //返回错误信息

  }

  }

  }

  //-----AJAX END-----


  AJAX引擎的一般步骤

  a) 创建Ajax引擎对象XMLHttpReqest

  creatXMLHttpRequest();

  b) 调用open方法与Ajax引擎建立连接,并告诉Ajax引擎我们的请求方式为get,请求url及采用异步方式

  c) 告诉Ajax引擎处理完成后,如何把结果反馈给我们,我们通常指定一个方法句柄,那么Ajax就会调用我们指定的方法,从而就可以得到Ajax引擎返回的数据(这种方式一般称为回调机制)

  onreadystatrchange()=function(...)

  d) 最后调用send方法把我们步骤b和c设置的参数发送给Ajax引擎(也就是真正的交给Ajax引擎去处理)

  实际过程

  validate() {

  createXMLHttpRequest();

  xmlHttp.open("GET", url, true);

  xmlHttp.onreadystatechange=function(...);

  xmlHttp.send(null);

  }

  其中响应处理在FUNCTION

  事务处理在URL

  我自己写的


什么是计算机网络?

计算机网络是指将地理位置不同的具有独立功能的多台计算机及其外部设备,通过通信线路连接起来,在网络操作系统,网络管理软件及网络通信协议的管理和协调下,实现资源共享和信息传递的计算机系统。另外,从逻辑功能上看,计算机网络是以传输信息为基础目的,用通信线路将多个计算机连接起来的计算机系统的集合,一个计算机网络组成包括传输介质和通信设备。从用户角度看,计算机网络是这样定义的:存在着一个能为用户自动管理的网络操作系统。由它调用完成用户所调用的资源,而整个网络像一个大的计算机系统一样,对用户是透明的。发展历程中国计算机网络设备制造行业是改革开放后成长起来的,早期与世界先进水平存在巨大差距;但受益于计算机网络设备行业生产技术不断提高以及下游需求市场不断扩大,我国计算机网络设备制造行业发展十分迅速。近两年,随着我国国民经济的快速发展以及国际金融危机的逐渐消退,计算机网络设备制造行业获得良好发展机遇,中国已成为全球计算机网络设备制造行业重点发展市场。

上一篇:类似爱情吉他谱

下一篇:mplay