浅谈AJAX

80酷酷网    80kuku.com

  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对象的很多不同,以及浏览器对象的更多的不同

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

 



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: