`

白话 Ajax 及其入门基础

    博客分类:
  • Ajax
阅读更多

一、白话Ajax的原理

这个可以从 C/S 和 B/S 的原理说起。Windows操作系统的诞生,为单机通信提供了很大的支持,程序设计也从早期DOS的单任务单用户向网络的分布式应用过度。C/S提供的客户/服务器编程模式为网络应用提供了一个有效的通信手段。浏览器与Web服务器之间的请求/ 服务,就是一个典型的C/S应用。
有人说,怎么是C/S?这应该是B/S呀!其实是这样理解的:浏览器/Web服务器作为我们实现网页发布的一个平台,对于我们在这个平台上开发的应用,我们的应用是由浏览器从Web服务器上下载下来然后展示在浏览器的“容器”里的,我们的应用是B/S模式的。但是浏览器与Web服务器的通信,却是C/S模式的。可以说,B/S模式是建立在C/S模式之上的。
Windows早期的桌面应用程序(包括单机程序和C/S结构的网络应用程序),其界面是调用Windows的API来实现的,后来,出现了VB、Delph(VCL)、VC++(MFC)等应用程序框架,把繁杂的API包装起来,使Windows程序开发大大降低、效率大大提高。
进入B/S编程阶段后,我们只需要面向Web服务器和浏览器编程,不需要考虑网络通信和并发等复杂的问题。但是在浏览器和Web服务器之间,为了进行数据交互,浏览器经常频繁的向Web服务器提交一些信息,现在的网络环境又极差,使我们经常等待于浏览器与Web服务器的通信状态,用户体验很差。而传统的桌面程序没有这个缺陷。
怎样既能利用B/S程序极强的界面表现力,又能避免其提交后的那一段眩晕的“真空”状态呢?
其实,在浏览器的设计阶段,设计师已经为我们考虑到了这个问题。这就是我们要说到的Ajax!Ajax英文是Asynchronous JavaScript and XML,就是在浏览器里通过一个机制,实现浏览器端与Web服务器端的一个异步通信,参与这个过程的有javascript、XML等技术。Ajax的引入,使B/S信息传递的量减少了,浏览器界面不再闪烁了,浏览者的感觉好多了。
Ajax并不是一项新技术,而是几个现有技术的新组合,而且它的发展也得益于几家大的互联网企业的率先应用(大家常拿Google的在线Maps来举例)。连浏览器寡头微软当初都没怎么看得起这项技术,后来才在VS.NET2.0时代玩命的赶呀追。

二、Ajax的实现

Ajax是由浏览器通过内部的一个组件实现的,这个组件负责接收用户的请求,以XML作为信息中介,并与Web服务器实现异步通信,并把请求的结果返回给浏览器,再由浏览器呈现给用户界面。“异步”的意思就是组件在后台工作期间,浏览器与用户保持在交互状态,并不更新当前窗口。也不是所有的数据都被组件提交到后台去。
Ajax实现的基础是:浏览器有一个Ajax引擎;浏览器支持Javascript;Web服务器端也支持XML数据格式。并不是所有浏览器都支持Ajax技术的,但支持Ajax的浏览器越来越多。
这个组件在Windows下是一个COM组件,由IE浏览器调用。IE浏览器也是在5.0版本以后才提供这个组件的。不同的浏览器实现和创建XMLHttpRequest对象的方式是不太一样的。但作为一个通用的Ajax接口,其外在表现是一致的。
Ajax其实是一项复杂的技术,牵扯到的东西很多。除过XMLHttpRequest对象和Javascript,还有DOM(文档对象模型),XML等。Javascript是一个粘合剂,它通过XMLHttpRequest对象对浏览器端页面的诸多元素进行操控,实现与Web服务器的后台交互,实现数据验证、存取等功能。

三、Ajax编程示例

1,客户端(文件client.htm)

<html>
    <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
    <title>AJAX 客户端</title>
    <script language=”javascript”>
     var xmlhttp = false;
     ////开始初始化XMLHttpRequest对象
      //这段代码考虑到了xmlhttp对象与目前主流浏览器的兼容
      //如果在IE浏览器下测试,一条
      //xmlhttp = new ActiveXObject(”Msxml2.XMLHTTP”)
      //或xmlhttp = new ActiveXObject(”Microsoft.XMLHTTP”)语句就可以了
     if(window.XMLHttpRequest)
     {
      //Mozilla 浏览器
      xmlhttp = new XMLHttpRequest();
      if (xmlhttp.overrideMimeType)
      {//设置MiME类别
       xmlhttp.overrideMimeType(’text/xml’);
      }
     }
     else
     if (window.ActiveXObject)
     {
      // IE浏览器
      try
      {  xmlhttp = new ActiveXObject(”Msxml2.XMLHTTP”); }
      catch (e)
      {
       try
       { xmlhttp = new ActiveXObject(”Microsoft.XMLHTTP”); }
       catch (e)
       { }
      }
     }

     function send_request(url, data)
     {
      //初始化、指定处理函数、发送请求的函数
      if (!xmlhttp)
      { //异常,创建对象实例失败
       window.alert(”不能创建XMLHttpRequest对象实例.”);
       return false;
      }

      // 确定发送请求的方式和URL以及是否同步执行下段代码
      xmlhttp.open(”POST”, url, true);
      xmlhttp.onreadystatechange = processRequest;  //根据Web服务器应答,触发该状态改变事件
       xmlhttp.setRequestHeader(”Content-Type”,”application/x-www-form-urlencoded”);
      xmlhttp.send(”username=” + data);  //发送信息到后台程序
     }

     ////状态改变事件处理函数:处理返回的信息
     function processRequest()
     {
        if (xmlhttp.readyState == 4)
        { // 判断对象状态
          if (xmlhttp.status == 200)  //正常返回信息,状态编号200
          { // 信息已经成功返回,开始处理信息
            alert(xmlhttp.responseText);
          }
          else
          { //页面不正常
            alert(”您所请求的页面有异常。”);
          }
        }
     }

     function userCheck()
     {
      var f = document.form1;
      var username = f.username.value;
      if(username==”")
      {
       window.alert(”用户名不能为空。”);
       f.username.focus();
       return false;
      }
      else
      {
          //该语句由用户按“唯一性检查”按钮后执行
          send_request(’server.php’, username);
        }
     }
    </script>

    </head>

    <body>
    <body>
      <form name=”form1″ action=”" method=”post”>
      用户名:<input type=”text” name=”username” value=”">
      <input type=”button” name=”check” value=”惟一性检查” onClick=”userCheck()”>
      <input type=”submit” name=”submit” value=”提交”>
      </form>
    </body>
    </html>

 

2,Web服务器端(文件server.php)

<?php
    //取得客户端数据
    $username = $_POST[”username”];

    //判断用户名的惟一性
    if( $username==”网眼”)  //实际工程中,这里一般是从数据库取用户名的值
    {
     printf(”用户名“%s”已经被注册,请更换一个用户名”, $username);
    }
    else
    {
      printf(”用户名“%s”尚未被使用,您可以继续”, $username);
    }
    ?>



  在以上Client.htm代码中,首先建立XMLHttpRequest对象实例,然后很据对象的状态触发事件处理函数,对返回的信息进行处理。一切控制逻辑都是用Javascript脚本来书写的,XMLHttpRequest对象与Web服务器的XML信息交换对我们是隐含的,我们不必关心。

    这是一个最原始的Ajax编程框架,它能简单的处理一些少量数据。经过代码重构,完全可以用在我们自己的小型工程中。

    注意Ajax本身是一种浏览器端技术,它和Web服务器端采用什么脚本书写代码是没有关系的。比如我们把Client.htm的语句send_request(’server.php’, username)换为send_request(’server.asp’, username),再相对应的建立server.asp文件,内容为:

<%
    dim username
    username = request(”username”)

    if username=”Thomas” then
     response.write(”用户名” & username & “已经被注册,请更换一个用户名”)
    else
     response.write(”用户名” & username & “尚未被使用,您可以继续”)
    end if
    %>

 

做了这样的改变后,在浏览器端,用户看到的效果是一模一样的。

四、常见Ajax编程框架
    既然上述Ajax框架已经能工作了,为什么还有那么多的框架呢?
    随着页面的复杂,可能需要书写大量的Javascript脚本来对页面中的DOM对象进行控制,工作量和复杂度会大大增加。Ajax编程框架通常利用面向对象的方法,对一些基本的对象和行为及其复杂性进行了合理的封装,建造了一套有自己特色的类库,并且考虑了效率和可扩充性等优点。我们在开发时,可以使用较少的、更清晰的代码,完成自己的工作。也使程序员有更多的时间和精力考虑业务逻辑本身,而不是与一堆脚本纠缠在一起。
    框架都是与后台脚本相关的。通过后台脚本编程,我们可以不必书写大量的Javascript脚本就能构建浏览器兼容的Ajax应用。
    比如,我使用一个比较流行的PHP xAjax框架,对前边的示例程序进行了改写:

<?php
      require_once ("../xajax/xajax.inc.php");

      //服务器处理函数
      function processForm($aFormValues)
      {
       $objResponse = new xajaxResponse();
       $bError = false;

       //清空错误信息
       $objResponse->addClear("usernameInfo", "innerHTML");

       //判断账号
       if (trim($aFormValues['username']) == "")
       {
        $objResponse->addAppend("usernameInfo", "innerHTML", "Please Input user name.");
        $bError = true;
       }
       else
       {
          if(trim($aFormValues['username'])=="Thomas")
           $objResponse->addAppend("usernameInfo", "innerHTML", "Has been registed");
          else
           $objResponse->addAppend("usernameInfo", "innerHTML", "Has not been registed");
        $bError = false;
       }

       if (!$bError)
       {
        $sForm .="<div>账号:" .$aFormValues['username']. "</div>\n";
       }
       else
       {
        $objResponse->addAssign("submitButton", "value", "Submit");
        $objResponse->addAssign("submitButton", "disabled", false);
       }

       return $objResponse;
      }

      //构造对象
      $xajax = new xajax();

      //注册处理函数
      $xajax->registerFunction("processForm");

      //接管HTTP请求
      $xajax->processRequests();
    ?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
      <?php
       //生成必要的JavaScript
       $xajax->printJavascript('../xajax/');
      ?>

      <title>XAJAX 用户注册</title>
      <style type="text/css">
        #formWrapper{ color: #111111; background-color: rgb(200,200,200); width: 360px;}
        #title{color: #FFFFFF; text-align: center; background-color: #000000; }
        #formDiv{ padding: 20px;}
        .submitDiv{ margin-top: 10px; text-align: center; }
        .errorSpan{ color:red;}
      </style>

      <script type="text/javascript">
      <!--//提交表单
        function submitSignup()
        {
         xajax.$('submitButton').disabled=true;
         xajax.$('submitButton').value="验证中...";
         xajax_processForm(xajax.getFormValues("signupForm"));
         return false;
        }
      //-->
      </script>

    </head>

    <body>

      <form id="signupForm" action="javascript:void(null);" onsubmit="submitSignup();">
      用户名:<input type="text" name="username" value=""> 
      <input type="button" name="check" value="Check Only one" onClick="submitSignup();">
      <input type="submit" id="submitButton" name="submit" value="Submit">
      </form>

      <div id="usernameInfo" class="errorSpan"> </div>

    </body>
    </html>

 

大家看到了这段代码前边的包含语句了吧:require_once ("../xajax/xajax.inc.php")。xajax.inc.php就是定义xajax等相关类库的文件,这个文件里还包含了大量的javascript脚本文件和其他的常数定义等。Xajax类有一条自己的属性和方法,接管和封装了原始的Ajax的行为和方法,用于处理用户的事件和页面文档对象的属性和外观。
    Ajax框架有它自己的好处,但是,目前由于Ajax框架太多,各有各的优点和缺点,特别是对PHP语言,我们很难在众多的框架中选中一个最适合我们自己的项目的框架。框架太多加大了交流的成本。框架本身在降低了代码复杂度的同时,也带来了学习的成本。不像.NET,背靠财大气粗的公司,就一套程序库,一套通用的IDE,熟练一门语言(比如C#),就可以开发Web和桌面应用。
    最后还要注意一下,Ajax并不是万金油,任何项目都想用一下。Ajax目前大多数应用在数据校验等应用上,在项目中用的时候请慎重考虑。

张庆(网眼)http://blog.why100000.com
    2008-3-24 

 

分享到:
评论

相关推荐

    白话c++入门自学的好书

    总的来说,《白话C++入门自学的好书》以其易懂的语言和丰富的实例,旨在帮助初学者建立起坚实的基础,为他们在C++的世界里开启一段愉快的学习旅程。无论是对计算机科学感兴趣的学生,还是想要转行的职场人士,都能...

    白话C++ 轻松入门C++

    对于计算机,也许你是老鸟,也许你是菜鸟……   但不管怎样,如果你此时此地你要学习编程,那么你应该多多少少知道点什么叫硬件什么叫软件——反正我不管你懂不懂,为了面子,我很不乐意你问我什么叫硬件什么叫...

    c++入门:《白话C++》

    10. **C++11及更新标准**:《白话C++》可能还会涵盖C++11及其后续版本的新特性,如lambda表达式、右值引用、auto关键字、类型推断等,这些现代C++特性让编程更加简洁和高效。 通过《白话C++》这本书,读者不仅可以...

    07 白话容器基础(三):深入理解容器镜像.pdf

    07 白话容器基础(三):深入理解容器镜像.pdf

    08 白话容器基础(四):重新认识Docker容器.pdf

    08 白话容器基础(四):重新认识Docker容器.pdf

    白话C++.,非常好的C++入门级教程

    《白话C++》是一本非常适合初学者的C++教程,其主要目标是用通俗易懂的语言介绍C++编程的基础知识,帮助读者快速进入C++的世界。C++是一种强大而灵活的面向对象编程语言,广泛应用于系统软件、游戏开发、应用软件...

    SVM支持向量机白话入门(上)

    支持向量机(SVM,Support Vector Machine)是一种在机器学习领域广泛应用的监督学习模型,由Cortes和Vapnik于1995年提出。...理解和掌握SVM的基本原理及其背后的统计学习理论,对于解决实际问题具有重要意义。

    白话C++

    白话 C++ 第二学堂 适合入门级C++的学习,比较全的C++细节知识

    白话c++(绝对经典)

    总之,《白话C++》是一本精心编写的C++入门教材,它以其独特的“白话”风格,让编程学习不再枯燥乏味。无论你是编程新手还是寻求进阶的开发者,都能从中受益匪浅,逐步成长为熟练掌握C++的编程大师。

    子平真诠白话解释.doc

    《子平真诠白话解释》还将五行理论与《易经》相结合,强调了“生”与“克”的平衡是宇宙间万物生存发展的基础。《易经》中提到,万物都需要经历生长与衰退,如同人之养生需要饮食滋养,但过度饮食无益于健康,适度的...

    《白话C++》教程章节完整版

    《白话C++》教程是一本面向初学者和有一定编程基础的人士的C++学习资料。本书以通俗易懂的语言,生动有趣的例子,深入浅出地解析了C++这一强大的编程语言,使得学习者能够更轻松地掌握C++的基础与进阶知识。 C++是...

    白话机器学习的数学.docx

    白话机器学习的数学 机器学习是一种人工智能的方法论,通过让计算机自主学习数据中的规律和模式,从而完成特定的任务。机器学习有监督学习和无监督学习两种类型。在监督学习中,我们向模型提供带有标签的训练数据,...

    《白话C++》适合初学者

    《白话C++》是一本非常适合初学者入门的编程书籍,其主要目标是用通俗易懂的语言教授C++编程知识,让学习者在轻松愉快的氛围中掌握这门强大的编程语言。C++作为一门静态类型、编译型、并发型且支持面向对象编程的...

    08 _ 白话容器基础(四):重新认识Docker容器1

    08 | 白话容器基础(四):重新认识Docker容器08 | 白话容器基础(四):重新认识Docker容器08 | 白话容器基础(四):重新认识Docker容

    白话中台战略-中台是个什么鬼.pdf

    白话中台战略-中台是个什么鬼.pdf白话中台战略-中台是个什么鬼.pdf白话中台战略-中台是个什么鬼.pdf白话中台战略-中台是个什么鬼.pdf白话中台战略-中台是个什么鬼.pdf白话中台战略-中台是个什么鬼.pdf白话中台战略-...

    MoreWindows白话经典算法之七大排序第2版(高清)

    书中详细解释了希尔排序的工作原理及其实现过程。 **5. 归并排序** 归并排序是一种分治策略的排序算法,通过递归地将数组分成两半,并分别排序,然后再将它们合并在一起。书中对该算法进行了详尽的说明。 **6. ...

    白话机器学习的数学-立石贤吾-源代码.zip

    白话机器学习的数学-立石贤吾-源代码.zip

    《2008版 白话c++》

    《2008版 白话C++》是一本针对初学者编写的C++教程,旨在帮助非软件专业背景的读者快速入门编程世界。作者采用通俗易懂的语言,摒弃了复杂的术语,使得C++这一高级编程语言变得更加平易近人。这本书的特色在于其深入...

Global site tag (gtag.js) - Google Analytics