`

Ajax 及其入门基础(一)

    博客分类:
  • java
阅读更多
一、细说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入门经典》源代码

    **Ajax入门经典源代码概述** Ajax(Asynchronous JavaScript and XML)是...通过学习和实践这些代码,不仅可以掌握Ajax的基本用法,还能了解其在不同服务器端环境下的应用,为成为一名熟练的前端开发者打下坚实基础。

    AJAX经典入门教程

    **AJAX经典入门教程** AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这种技术的核心在于利用JavaScript创建异步通信请求,与服务器交换数据并局部更新...

    Ajax入门经典 源代码

    Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的...在学习过程中,记得结合理论知识和实践案例,不断加深对Ajax的理解,为成为一名熟练的Web开发者打下坚实基础。

    Ajax中文手册,ajax快速入门,AJAX实例

    1. **基础概念**: 解释Ajax的工作原理、XMLHttpRequest对象及其方法。 2. **请求与响应**: 详细阐述如何构造请求、处理响应数据及错误处理。 3. **数据格式**: JSON、XML、HTML和Text等不同数据类型的使用。 4. **...

    ajax新手快速入门

    5. **持续跟踪技术发展**:关注AJAX及其相关技术的发展趋势,保持技术的更新迭代。 #### 八、总结 AJAX作为一种改变Web应用开发方式的重要技术,为用户提供更加流畅、高效的交互体验。对于初学者而言,了解AJAX的...

    \Ajax入门技巧应用篇

    **Ajax入门技巧应用篇** Ajax(Asynchronous JavaScript ...通过本文档"Ajax入门技巧应用篇.chm"和"Borland Delphi Intraweb学习与交流论坛文字版.htm",你可以更深入地学习Ajax及其在Delphi Intraweb中的实践应用。

    Ajax入门精解(FLASH,语音讲解)

    Ajax,全称Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了用户体验,尤其是在网页应用中,...

    AJAX 实例入门

    从给定的文件信息来看,文章主要探讨的是AJAX(Asynchronous JavaScript and XML)技术的入门实例,尤其强调了AJAX技术在Web开发中的优势及其实际应用案例。下面,我们将详细解析这一知识点。 ### AJAX技术简介 ...

    Ajax新手入门

    ### Ajax新手入门知识点详解 ...通过理解和掌握Ajax的基本原理及其应用场景,开发者可以更好地构建高效、互动性强的Web应用。希望本书能够帮助初学者快速入门Ajax,并在未来的学习和实践中进一步深化理解。

    Ajax例题,入门专用

    本资料包是为初学者准备的一系列Ajax入门实例,旨在帮助理解Ajax的工作原理及其在实际应用中的运用。** ### 1. 基本概念 - **异步通信**: Ajax的核心特性就是异步,意味着它可以在后台与服务器进行通信,不会阻塞...

    AjAx 入门

    **Ajax入门** Ajax,全称为"Asynchronous JavaScript and XML",是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这种技术的出现极大地提升了用户体验,因为它允许网页在后台与服务器进行通信,...

    ajax技术的入门.docx

    ### AJAX技术入门详解 #### 一、什么是AJAX? AJAX(Asynchronous JavaScript and XML),即异步JavaScript和XML,是一种用于...无论是基础概念还是实际案例,都展示了AJAX的强大功能及其在现代Web开发中的重要地位。

    ajax应用的一个实例(入门级,带数据库)

    这个实例是一个入门级的应用,涵盖了基本的Ajax交互以及与数据库的连接,让我们深入了解一下Ajax的核心概念及其在实际中的运用。 1. **Ajax基础概念**: - **异步性**:Ajax的核心在于异步数据传输,意味着它可以...

    包含Ajax控件,入门教程。。

    Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器交换数据并更新部分网页内容,提高了用户体验,使得网页更具交互性和响应性。本教程...

    java ajax 入门

    ### Java Ajax 入门知识点详解 ...综上所述,通过学习Servlet、MVC模式以及JavaScript的基础知识,我们可以更好地理解和掌握Ajax的核心原理及其实现方式。这对于开发动态网页和提升用户体验具有重要意义。

    PHP_AJAX实例_经典的入门教材.rar

    《PHP_AJAX实例_经典的入门教材》是一个针对初学者设计的教程,旨在帮助学习者掌握PHP和AJAX这两种核心技术的结合使用。PHP是一种广泛应用于Web开发的服务器端脚本语言,而AJAX(Asynchronous JavaScript and XML)...

    Ajax基础以及源代码

    **Ajax基础及源代码详解** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下...通过深入学习Ajax及其源代码,开发者可以更好地掌握Web页面的动态更新技术,提升网页应用的交互性和性能。

    最简单的ajax例子及其源码

    在PPT“14-Ajax原理及其应用”中,可能会涵盖Ajax的工作原理、请求和响应流程、错误处理等方面。此外,"MyAjax"可能是作者编写的一个简单Ajax示例代码,供学习参考。通过深入研究这两个资源,你可以更好地理解和掌握...

    ajax登录验证实例

    总的来说,这个实例是学习Ajax基础的一个好起点,它展示了如何使用Ajax进行简单的异步通信,以及如何在服务器端进行数据验证。通过实践这个实例,初学者可以更好地理解和掌握Ajax的工作原理及其在实际项目中的应用。

Global site tag (gtag.js) - Google Analytics