认识Ajax

 

认识Ajax

　　有一个多月没来写了，主要是过年，都有些事情，在这个假期中自己并没怎么上网，在家看了JAVA与模式，以及复习了下AJAX，在去年微软还在推行atlas的时候自己就在学习这方面内容，不过那时一直都是使用微软的“成品”，使用其toolkit很方便，但对于一些“其本质”不是很清楚，所以打算从今天起把这一知识点的内容写下来。
       关于Ajax的由来，简单的说明一下，2005年2月，Adaptive Path公司的Jesse James Garrett
 在他的“Ajax:A new Approach to Web Applications”一文中首次提出了Ajax的概念。Garrett将一种综合使用Javascript,XHTML和Css,DOM,XMLHttpRequest,XML和XSTL的技术称之为Ajax。 由此我们可以知道Ajax并不是一项新的技术，只是多种技术的综合，或者说是设计方法。
 　　那么Ajax有什么作用？一直以来，Web应用程序的交互效果都不如桌面应用程序，比如客户端的功能和用户体验效果，通俗的讲就是有很多用户都曾抱怨过WEB应用程序的”卡”，这点也让很多WEB应用程序开发人员和用户耿耿于怀。Grarett期待 Ajax能消除WEB应用程序和桌面应用程序在系统人机交互和用户体验方面的差距，至少目前Google Suggest,Google Maps等产品已经让人们看到了胜利的曙光。Grarrett采用了Ajax(Asynchronous Javascript and XML，异步的Javascript 和 XML)这个名称。
      　Ajax的主要功能在于，将浏览器客户端和服务器端传统的同步交互通信方式改变为异步通信交 互方式，从而丰富了浏览器客户端功能，解决了浏览器频繁刷新页面等待数据舆的问题。使用Ajax就算不重新刷新页面，用户也可以快速的得到服务器端的数据！
　　好了，我还是先通过一个实例来了解Ajax。

<!--
    authod:冯岩
    date: 2007-03-04 00:02
-->
< HTML >
  < HEAD >
   < TITLE >  一个简单的AJAX例子  </ TITLE >
   < script  language ="javascript" >
    //按扭“开始计算”响应函数，输入域情况后调用send_request函数
    function doCaculate()
    {
        var f = document.form1;
        if((f.number_1.value != "") && (f.number_2.value != ""))
        {
            document.getElementById("freeback").innerHTML = "正在计算，请稍候……";
            send_request("process.jsp?number_1=" + f.number_1.value + "&number_2=" + f.number_2.value);
        }
        else if(f.number_1.value == "")
            document.getElementById("freeback").innerHTML = "乘数不能为空。";
        else if(f.number_2.value == "")
            document.getElementById("freeback").innerHTML = "被乘数不能为空。";
    }
    var http_request = false;
    //向服务器发出XMLHTTP请求
    function send_request(url)
    {
        //初始化，指定处理函数，发送请求的函数
        http_request = false;
        //开始初始化XMLHTTPRequest对象
        try
        {
            http_request = new XMLHttpRequest();
        }
        catch (e)
        {
        }
        if(!http_request)
        {
            //异常，创建对象实例失败
            window.alert("不能创建XMLHttpRequest对象实例。");
            return false;
        }
        http_request.onreadystatechange = processRequest;
        //确定发送请求的方式和URL以及是否同步执行下段代码
        http_request.open("GET",url,true);
        http_request.send(null);
    }
    //处理返回信息的函数
    function processRequest()
    {
        var f = document.form1;    
        if(http_request.readyState == 4)
        {    //信息已经返回，可以开始处理
            //判断对象状态
            if(http_request.status == 200)
            {
                //信息已经成功返回，开始处理信息
                var returnStr = http_request.responseText;
                if(returnStr.indexOf("Error") == -1)
                {
                    f.result.value = returnStr ;
                    document.getElementById("freeback").innerHTML = "" ;
                }
                else
                {
                    f.result.value = "";
                    document.getElementById("freeback").innerHTML= returnStr;
                }
            }
            else
            {
                //页面不正常
                alert("你所请求的页面有异常");
            }
        }
        else
        {
            //信息还没有返回，等待……
        }
    }
   </ script >
  </ HEAD >

  < BODY >
   < center >
     < form  action  = "process.jsp"  method  = "post"  enctype  = "application/x-www-form-urlencoded"  name  = "form1"  target ="_self" >
         < table  width ="400"  cellpadding  = "4"  cellspacing ="1"  border  = "0" >
             < caption > 简单乘法计算(Ajax应用) </ caption >
             < tr >
                 < td  align ="center" >
                     < input  type  = "text"  name  = "number_1"  size  = "10" />
                    *
                     < input  type  = "text"  name  = "number_2"  size  = "10" />
                    =
                     < input  type  = "text"  name  = "result"  size  = "10" />
                 </ td >
             </ tr >
             < tr  align ="center" >
                 < td > &nbsp;
                     < input  type  = "button"  name  = "Caculate"  value ="开始计算"  onClick ="doCaculate()" /> &nbsp;
                     < input  type  = "reset"  name = "reset"  value ="重新计算" />
                 </ td >
             </ tr >
             < tr >< td  align  = "center"  height  = "25" >   < label  id  = "freeback" > &nbsp; </ label ></ td ></ tr >
         </ table >
     </ form >
   </ center >
  </ BODY >
</ HTML >

上面是一个普通的html页面，我们在其中设置一个表单用户计算二数之积，而真正处理结果程序是在process.jsp文件中处理。其代码很简单

<% @ page language="java" pageEncoding="GB2312" %>
<%
    String number_1 = request.getParameter("number_1");
    String number_2 = request.getParameter("number_2");
    int num_1 = 0, num_2 = 0;
    boolean status = true ;
    if(number_1 != null)
    {
        try
        {
            num_1 = Integer.parseInt(number_1);
        }
        catch(Exception ex)
        {
            status = false;
            out.println("Error,乘数必须是整数");
        }
    }
    if(number_2 != null)
    {
        try
        {
            num_2 = Integer.parseInt(number_2);
        }
        catch(Exception ex)
        {
            status = false;
            out.println("Error,被乘数必须是整数。");
        }
    }
    if(status)
    out.println(num_1*num_2);
%>

当我们运行HTML页面时，在文本框中输入整数，单击计算后该页面即将服务器端发出异步请求，请求process.jsp页面，服务器即运行process.jsp页面，该页面用于处理表单中提交的数据，并进行计算，然后显示出结果，而这整个过程是在“后台”进行的，用户是感觉不到，这个过程类似函数调用的值返回。虽然这个例子简单，类似这个计算功能我们也可以单纯的用javascript来实现，但该例本在说明我们可以在不刷新页面的情况下获取报务器端的数据！这个效果是传统的WEB交互机制无法做到的。从上我们可以看出Ajax的应用效果。有关以上代码的具体含义，将在以后的文章中讲解。本文旨在介绍Ajax.

 

文章出自： http://www.cnblogs.com/eflylab/archive/2007/03/07/666843.html