Ajax 培训记录(新晨)

按: 这部分内容是去年记录在https://sites.google.com/site/trainingcoursesatxinchen/Home/Ajax/Ajax-peixun-jilu上的, 现在直接转移过来, 原先的网站删除. 内容最初创建于Sep 26, 2008 9:25 AM.

第一章 Ajax简介

  1. Ajax不只是一个特定的技术,更应该算是一种技巧(P13)。
  2. 现在的浏览器都支持Ajax。
  3. 应用Ajax的网站有:Google Maps, Gmail, iGoogle, Flickr, Netflix等。
  4. XMLHttpRequest成为事实上的标准。
  5. Ajax是一个客户端技术,无论服务端使用到什么技术,都可以使用Ajax。本文假定读者会熟练使用服务端技术。
  6. Ajax相关技术:JavaScript, HTML, DOM, CSS.
  7. JavaScript测试工具:JsUnit, Selenium.
  8. 可以使用Ajax提交数据,但也许不能将之作为提交数据的主要方法。
  9. 安全提醒:建立 XMR 对象时必须包含URL,所以可能会有恶意用户修改你的网站。——这些代码可以在浏览器里查看到。(TODO,这一条似乎有问题,再斟酌)

第二章 使用XMLHttpRequest对象

创建 XMLHttpRequest 对象

经典创建方式:

var xmlHttp;
function createXMLHttpRequest() {
    if (window.ActiveXObject) {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest();
    }
}

IE从第7版开始也支持普通方式创建,可以和其他浏览器使用一样的JavaScript代码:

var xmlHttp;
function createXMLHttpRequest() {
    xmlHttp = new XMLHttpRequest();
}

这样就简单很多了。但考虑到浏览器的兼容性,正式发布的,用户分布比较广的,还是应该考虑使用经典方式创建 XMLHttpRequest 对象。

XMLHttpRequest 方法和属性

表2-1 标准XMLHttpRequest操作

表2-2 标准XMLHttpRequest属性

Ajax交互模式

Ajax的交互模式不同于标准Web客户中所有的请求/相应方法,它会去检查请求的状态和服务器的HTTP状态。

Ajax交互模式主要有下面几个步骤:

  1. 一个客户端事件触发一个 Ajax 事件。
  2. 创建 XMLHttpRequest 对象的一个实例。
  3. 向服务器发送请求。
  4. 服务器执行请求。
  5. 请求返回浏览器。

Ajax发送请求的一个示例

可以参考本站的 HelloWorld of Ajax

安全注意:XMLHttpRequest 对象请求的所有资源都必须与调用脚本在同一个域内。

第三章 与服务器通信:发送请求和处理响应

处理服务器的相应

服务器的响应可以通过 XMLHttpRequest.responseText XMLHttpRequest.responseXML 获取,前者得到的是一个文本对象,后者得到的是一个 XML DOM 对象。

DOM介绍

DOM独立于编程语言,可以使用任何语言访问DOM。

表 3-1 用于处理XML文档的DOM元素属性

表 3-2 用于遍历XML文档的DOM元素方法

表 3-3 动态创建内容时所用的W3C DOM属性和方法

参考