Google Ajax教程

solorez

浏览: 235927 次
性别:
来自: 郑州

最近访客更多访客>>

吕檀溪

lurker8

deepen099

liligui9

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2007-09 ( 24)
2007-08 ( 132)
2007-07 ( 12)
更多存档...

Google Ajax 应用服务器 JavaScript CSS

原文作者：Google
原文链接：Google AJAX Tutorial
译者：令狐葱

0. 读者对象和先验知识

这个教程将包括Ajax的基础知识. 在此之前, 你需要知道CSS, DHtml以及Javascript的相关知识. 我们有关于使用ajax所必须知道的这些知识的相应的教程.

1. 简介

1.1 什么是Ajax

Ajax 是异步Javascript和XML(Asynchronous JavaScript and XML)的缩写. 它是一种创建交互式web应用的开发技术. 不像一般的网页一样当页面内容有所变化的时候需要重新加载整个页面, Ajax允许在后台只和服务器端交换少量的数据, 以及实现异步刷新.

这里有一些例子,点击查看.

Ajax 就是以下技术的结合:

CSS, 组成以及格式化内容
DOM(Document Object Model , 文档对象模型): 使用客户端脚本语言比如javascript 可以操纵DOM实现信息的动态显示以及交互.
XMLHttpRequest对象: 与web服务器端异步交换数据
XML: 有时被用在服务器端和客户端传送的数据格式, 当然, 其它格式也可以工作.

下面就是它的工作流程图:

1.2 和服务器端交互

一旦网页上的DOM事件被触发, 我们需要获得一个XMLHttpRequest 对象. 这可以使用下面的一个函数来实现. 我们需要这样写来适应不同的浏览器. 注意我们使用onreadystatechange 来设置我们的回调函数.

var obj;

function ProcessXML(url) {
  // native  object
  if (window.XMLHttpobject) {
    // obtain new object
    obj = new XMLHttpobject();
    // set the callback function
    obj.onreadystatechange = processChange;
    // we will do a GET with the url; "true" for asynch
    obj.open("GET", url, true);
    // null for GET with native object
    obj.send(null);
  // IE/Windows ActiveX object
  } else if (window.ActiveXObject) {
    obj = new ActiveXObject("Microsoft.XMLHTTP");
    if (obj) {
      obj.onreadystatechange = processChange;
      obj.open("GET", url, true);
      // don't send null for ActiveX
      obj.send();
    }
  } else {
    alert("Your browser does not support AJAX");
  }
}

下面介绍一下XMLHttpRequest 类的属性和方法:

属性

readyState	在一个请求周期里readyState 将从0到4间变化: 0: 未初始化. 1: 建立链接. 2: 收到请求. 3: 正在处理. 4: 完毕并准备反馈.
status	200: "OK" 404: 页面不存在.
onreadystatechange	通过这个属性设置回调函数
responseText	数据以文本的形式返回.
responseXml	数据以XML的形式返回.

方法

open(mode, url, boolean)	mode: request(请求)的类型: GET 或者 POST url: 文件位置 boolean: true (异步) 或者false (同步).
send("string")	使用GET则为null (in native mode; null not passed with ActiveX)

下面是一个使用onreadystatechange 属性注册的回调函数的例子:

function processChange() {
    // 4 means the response has been returned and ready to be processed
    if (obj.readyState == 4) {
        // 200 means "OK"
        if (obj.status == 200) {
            // process whatever has been sent back here:
        // anything else means a problem
        } else {
            alert("There was a problem in the returned data:n");
        }
    }
}

1.3 其他部分

让我们在一个小应用里使用上述代码, 来展示如何把代码组合到一起. 我们需要用户输入一个用户名, 然后发送这个用户名给服务器, 来验证这个用户名是否已经被其他人使用.

首先, 我们的html代码如下:

<BODY>
Enter your Username:  < id="username" name="username" type="text" onblur="checkUserName(this.value,'')" >
</BODY>

下面就是客户端缺少的那部分代码: html代码中调用的这个函数来使整个过程顺利执行:

function checkUserName(input, response) {
  // if response is not empty, we have received data back from the server
  if (response != '') {
    // the value of response is returned from checkName.php: 1 means in use
    if (response == '1') {
       alert("username is in use");
    } else {
    //  if response is empty, we need to send the username to the server
       url  =  'http://localhost/xml/checkName.php?q=' + input;
       ProcessXML(url);
    }
  }
}

注意, 从服务器端返回的数据需要被转换成文本或者XML格式. 函数processChange()处理返回数据. 下面是这个函数的实现详细信息:

function processChange() {
    // 4 means the response has been returned and ready to be processed
    if (obj.readyState == 4) {
        // 200 means "OK"
        if (obj.status == 200) {
            // process whatever has been sent back here:
            // we need to parse the returned data (text or XML)
            // and then call checkUserName again with response set
            // to the appropriate value.
        // anything else means a problem
        } else {
            alert("There was a problem in the returned data:n");
        }
    }
}

现在我们只需要有服务器端的代码就可以是这个应用正常工作了, 需要一个客户端的脚本或者servlet来获取GET请求, 并检验用户名, 然后返回一个反馈信息. 下面是使用php实现的示例, 所有的东西都被硬编码, 所以可能看起来和真实应用的还有差距, 不过意思基本一样.

<?php header('Content-Type: text/xml');

function checkName($q) {
  if (isset($q)){
    switch(strtolower($q)) {
      case  'maggie' :
          return '1';
          break;
      ...
      default:
          return '0';
    }
  } else {
    return '0';
  }

}
?>

2. Google 和Ajax

Ajax 在最近几年得以如此流行, 部分原因是因为Google 在Gmail, Google Maps 以及其他的基于web的应用里成功使用了此技术. 另外, Google还发布了一个针对网站管理员, 博客或者其他任何网站拥有者的API, 允许他们在站点中插入搜索.

有趣的是使用这个搜索用户不需要离开当前页面, 因为结果是使用ajax直接加载到搜索框的下面的. 搜索结果被分成4类: local, web, video, 以及blogs, 并且可以以标签的形式显示. 另外, 用户可以使用copy按钮直接复制结果到其他地方使用(比如发布blog评论等).

Google提供了一系列的教程和例子来教你如何让使用搜索API. 如果你在看 "hello world" 程序,你会发现, 有一个.css文件以及一个Javascript库被链接进去. 这个库中的函数使用ajax 来发送搜索请求到Google的服务器, 并且获得搜索结果. CSS和DHtml用来更新页面上的搜索结果.

我们使用Google提供的Ajax 搜索API做了一个教程. 这个教程不仅可以帮助你建立更加有趣的站点, 还可以帮助你理解API 以及基于事件的编程等重要概念.

3. 更多的例子和教程

下面是一些另外的关于Ajax的示例和教程:

添加评论

相关文章：

2006 年互联网技术发展趋势

Top 100 web2.0网站最热门的100个网站

三条提高gmail工作效率的可靠忠告