浅谈AJAX

ajax

 这两年在WEB上有一个技术新名词挺惹眼的就是那个什么AJAX,当初我一直在做JAVASCRIPT的相关应用听说过但一直没有注意它,后来看了一下,来说说自己的理解。  AJAX是Asynchronous JavaScript and XML的缩写(虽说它名字的发明人Jesse James Garrett并不承认这是那一串单词的缩写),看名字就知道这是一个关于异步的JAVASCRIPT和XML的应用。  说实话我挺反感这个名词,原因很简单,它不是什么新技术,而是炒作出来的一个新名词。而其内容也就是调用微软的那个还未成熟,功能还未完善的XMLHTTP对象来读取远程的XML文档而已。后来也被其他浏览器拿来据为己有。  废话不多说,先说说这个玩意的一些必要代码

    这两年在WEB上有一个技术新名词挺惹眼的就是那个什么AJAX,当初我一直在做JAVASCRIPT的相关应用听说过但一直没有注意它,后来看了一下,来说说自己的理解。
  AJAX是Asynchronous JavaScript and XML的缩写(虽说它名字的发明人Jesse James Garrett并不承认这是那一串单词的缩写),看名字就知道这是一个关于异步的JAVASCRIPT和XML的应用。
  说实话我挺反感这个名词,原因很简单,它不是什么新技术,而是炒作出来的一个新名词。而其内容也就是调用微软的那个还未成熟,功能还未完善的XMLHTTP对象来读取远程的XML文档而已。后来也被其他浏览器拿来据为己有。
  废话不多说,先说说这个玩意的一些必要代码
  以下是一个典型的XMLHTTP对象声明实例的例子:

  /* Create a new XMLHttpRequest object to talk to the Web server */
  var xmlHttp = false;
  /*@cc_on @*/
  /*@if (@_jscript_version >= 5)
  try {
    xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
    try {
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (e2) {
      xmlHttp = false;
    }
  }
  @end @*/

  if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
    xmlHttp = new XMLHttpRequest();
  }

  呵呵!是不是觉得定义一个对象么,干嘛写这么多。没错!如果只是单一的浏览器的话确实没必要写这么多,但是…… 噩梦开始了…… 我们要应对的可不是单一的浏览器,而是种类繁多,千奇百怪的。我们为了让这些乱七八糟的浏览器客户端都适应我们的产品,没办法,我们妥协了。
  然后就是对该实例的调用(具体细节请参看JAVASCRIPT的相关文档,以及XMLHTTP的相关文档),庆幸的是各种浏览器对此对象的方法和属性还是比较一致的。

  XMLHTTP对象的属性

  onreadystatechange 这是一个事件,当你采用异步的方式来调用该对象的时候,当读取状态改变的时候,该对象会调用这个事件。他是一个属性,你可以给它赋值一个函数指针。
  readyState     读取状态。用来判断当前的读取状态,他有四个值:

           (0) 未初始化 对象被创建,但未用open方法初始化时产生的状态代码
           (1) 等待读取中 对象被创建,但send方法未调用时产生的状态代码
           (2) 读取结束 发送请求,但请求不可用时产生的状态代码
           (3) 通讯中 数据读取中时产生的状态代码
           (4) 完成 所有数据读取完毕时时产生的状态代码

  responseBody   获取一段数据
  responseStream  获取一个数据流
  responseText   获取一个文本文档
  responseXML   获取一个XML文档
  status      获取HTTP的请求状态
  statusText    获取HTTP的请求状态信息

  XMLHTTP对象的方法

  abort         取消一个请求
  getAllResponseHeaders 取得所有的HTTP的头信息
  getResponseHeader   取得HTTP头信息中的数据
  open         初始化对象实例
  send         发送一个请求
  setRequestHeader   设置请求的HTTP头信息

  其实方法属性也不多也并不是很难掌握,我们看一下它的一个事例就可以轻松掌握
  以下是一个调用的例子:

  var xmlhttp=null;
  function PostOrder(xmldoc)
  {
    var xmlhttp = new ActiveXObject("Msxml2.XMLHttp");
    xmlhttp.Open("POST", "http://myserver/orders/processorder.asp", false);
    xmlhttp.onreadystatechange= HandleStateChange;
    xmlhttp.Send(xmldoc);
    myButton.disabled = true;
  }
  function HandleStateChange()
  {
    if (xmlhttp.readyState == 4)
   {
      myButton.disabled = false;
      alert("Result = " + xmlhttp.responseXML.xml);
    }
  }
  

  当然这是一种开发模式,不算是一种新的开发模式,个人认为他在XMLHTTP对象出现的时候就同步的出现了(至少我再这个名词出现之前就已经使用这种开发模式很久了)。它的好处就是,我们可以不用刷新当前页面而做到和数据服务器通讯的目的,而且数据通信的量也随之减少。原因很简单,因为它只返回数据,而不用服务器重复生成大量的页面格式化用的代码。我们完全可以将整站的模版下载到本地,分担服务器生成页面的负担。并且可以使得客户端的浏览比较流畅,用户使用上也可以做到很多有趣的,而在以前的开发模式上这是很难实现的功能。
  但任何开发模式都不凡有它的缺点,AJAX这玩意的缺点是什么呢,其实它的缺点也导致从它的出现到现在的流行中间经历了很漫长的时间。那就是开发难度大。你有想象过调试一个JAVASCRIPT最资深的程序员还在使用ALERT么?你有想象过在某种状态下的未知错误并不提示代码出错,并且就算提示,也不能说明出错具体位置以及对象么?你有想象过没有完善的代码提示么?你有想象还要面对多如牛毛的浏览器的兼容问题么?很不幸,这些我们都会遇到,因为还没有一个完善的用于开发调试的集成环境,几乎所有的JAVASCRIPT程序员都在使用最普通的文本编辑器来完成这些复杂的任务。
  这是一个恶梦,确实是一个真实而存在在我们身边的噩梦,有所庆幸的是随着AJAX的声势大振,大部分的开发商正在着手解决这个问题,还有很多的JAVASCRIPT框架的不断出现。就像ASP.NET的开发方式一样,逐渐的出现。
  也许AJAX的前景是乐观的,也许这又是一个永无止境的噩梦……

  再来谈谈用这种开发模式的前提条件
  第一:你要熟练掌握HTML,CSS,XML。如果这些你还不清楚的话,麻烦自己去熟悉它,否则你寸步难行。
  第二:你要熟练掌握一门浏览器客户端编程语言,不管你是什么JavaScript也好,还是VBScript或者其他什么PerlScript等等,一定要掌握一门,并且熟练。为什么要熟练?呵呵,原因很简单,因为这是脚本语言,因为它语法语义定义规则简单,所以你能遇到的麻烦就越难以解决。就好像汇编总是那么难以掌握一样,就像围棋,规则越简单的东西,其棋局变化就越多。
  第三:你要熟悉了解HTML,CSS,XML的浏览器提供给你的文档对象,也就是DOM,否则你可以下课了,因为不熟悉了解这些内容,我可以很负责任的告诉你,AJAX对你没用,放弃吧。
  第四:你要熟悉了解XMLHTTP的属性和方法,也可能你要说:切!就那几个!~~呵呵,浏览器提供的对象可不一样哦,就是相同的浏览器提供的相关对象都不相同,何况是多如牛毛的浏览器?
  第五:一门服务器端语言来提供XML数据,以及可能会用到的数据库相关的SQL语言,当然这也是必须的(除非你不用存取读取数据)。我就不做详细介绍了,可选择的确实很多,ASP,ASP.NET,PHP,CGI,JSP……太多了

  你需要做好的心理准备
  第一:你可能还没机会遇到比较顺手的编程环境,不过面包会有的……
  第二:你可能几乎没有顺手的调试环境,不过微软的脚本debug环境还凑和
  第三:你可能要面对众多浏览器的挑战,其中包括HTML,CSS,XML的一些差异,以及JSCRIPT和JAVASCRIPT上的细微差异,当然更头痛的是DOM对象的很多不同,以及浏览器对象的更多的不同

  如果这些条件您都满足的话,我只能默默地祝你好运了……

 

时间: 2024-06-11 20:52:33

浅谈AJAX的相关文章

浅谈ajax请求技术_AJAX相关

1.写在前面: 阅读要求: 具有一定的HTML.CSS.JavaScript.Json基础 2.什么是ajax Ajax:即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. 3.为什么使用ajax 在动态网页开发技术中,客户端(通常是浏览器)与服务端进行数据交互是十分频繁的,如何节省网络资源,提供良好的用户体验是十分关键的.Ajax采用异步请求方式,使得不用刷新整个页面就可以和后台实现数据

浅谈Ajax请求与浏览器缓存_AJAX相关

在现代Web应用程序中,前端代码充斥着大量的Ajax请求,如果对于Ajax请求可以使用浏览器缓存,那么可以显著地减少网络请求,提高程序响应速度. 1. Ajax Request 使用jQuery框架可以很方便的进行Ajax请求,示例代码如下: $.ajax({ url : 'url', dataType : "xml", cache: true, success : function(xml, status){ } }); 非常简单,注意其中的第4行代码:cache:true,显式的要

浅谈ajax请求技术

1.写在前面: 阅读要求: 具有一定的HTML.CSS.JavaScript.Json基础 2.什么是ajax Ajax:即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. 3.为什么使用ajax 在动态网页开发技术中,客户端(通常是浏览器)与服务端进行数据交互是十分频繁的,如何节省网络资源,提供良好的用户体验是十分关键的.Ajax采用异步请求方式,使得不用刷新整个页面就可以和后台实现数据

浅谈Ajax和JavaScript的区别

javascript是一种在浏览器端执行的脚本语言,Ajax是一种创建交互式网页应用的开发技术 ,它是利用了一系列相关的技术其中就包括javascript. Javascript是由网景公司开发的一种脚本语言,它和sun公司的java语言是没有任何关系的,它们相似的名称只是一种行销策略. 在一般的web开发中,javascript是在浏览器端执行的,我们可以用javascript控制浏览器的行为和内容. 在 Ajax应用中信息是如何在浏览器和服务器之间传递的. 通过XML数据或者字符串 以上这篇

浅谈Ajax技术中的先进性与局限性

先进性: 1.表单驱动的交互 传统的表单提交,在文本框输入内容后,点击按钮,后台处理完毕后,页面刷新,再回头检查是否刷新结果正确.使用Ajax,在点击sunmit按钮后,立刻进行异步处理,并在页面上快速显示了更新后的结果,这里没有整个页面刷新的问题. 2.深层次的树的导航 深层次的级联菜单(树)的遍历是一项非常复杂的任务,使用JavaScript来控制显示逻辑,使用Ajax延迟加载更深层次的数据可以有效的减轻服务器的负担. 3.快速的用户与用户间的交流响应 在众多人参与的交流讨论的场景下,最不爽

浅谈Ajax相关及其优缺点_AJAX相关

AJAX,即Asynchronous Javascript And XML,可实现无刷新状态更新页面和异步提交 优点: 不需要插件支持 用户体验极佳 提升Web程序性能 减轻服务器和宽带的负担 缺点: 前进后退按钮被破坏 搜索引擎的支持不够 开发调试工具缺乏 同步和异步 同步:也就是必须一件一件事做,等前一件做完了才能做下一件事 异步:不需要等到前一件事做完,可多事同做 JQuery对AJAX进行了三层封装 最底层:封装了基础Ajax一些操作: 全局方法:$.ajax() 提交的数据在data中

浅谈Ajax的缓存机制_AJAX相关

Ajax的缓存机制和浏览器处理资源时的缓存机制是一样的. 三条简单规则: 只要是URL相同的GET请求,浏览器会使用缓存(当然还要看服务器的Cache-Control/Expires/Last-Modified/ETag头的设置). 只要是POST请求,浏览器都不会缓存. Https的请求,浏览器不会缓存(绝大数情况如此,但是也有例外,据说FF浏览器是例外). 补充: 在URL中拼入随机的查询字符串可以使浏览器认为这是一个新的请求,从而不使用缓存. 在Ajax的请求中设置Http头: If-Mo

浅谈AJAX开发技术_AJAX相关

AJAX(Asynchronous JavaScript and XML,异步JavaScript和XML),AJAX并不是一项新的技术,它产生的主要目的是用于页面的局部刷新,从之前的代码开发来看,读者可以发现,每当用户向服务器端发出请求时,那怕需要的只是简单的更新一点点的局部内容,服务器端都会将一个整体的页面进行刷新,并重新生成代码,这样一来程序的性能肯定会有所降低的,而如果采用了AJAX技术之后,就可以实现局部的内容变更,而不用再进行整体的页面刷新,显然处理的性能要比前者高很多 . 在AJA

浅谈Ajax跨域Session和跨域访问_AJAX相关

一.关于ajax跨域请求,用jsonp老是不成功,虽然可以返回数据,但是error处报错.原因是返回的数据格式不是jsonp格式.但是用C#构造的请求却能够返回数据. 二.第三方的ajax请求肯定是不能获取得到你当前用户的session. 任务是这样的的,支付宝的页面返回notify页面(这个页面是异步访问的),而我的C#处理有一个处理模块,需要判断如果是已经登录则加积分之类的操作,结果老是获取不到session数据,可是明明登录了啊.这里的误区是,我们当前域肯定是已经登录了,可对于支付宝那边的