IT Notes‎ > ‎Web Front Dev‎ > ‎Ajax‎ > ‎

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操作
 方         
 abort() 停止当前请求
 getAllResponseHeaders() 把HTTP请求的所有相应首部作为Key/Value对返回
 getResponseHeader("header") 返回指定首部的串值
 open("method", "url")
 建立对服务器的调用。method的参数可以是GET, POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选参数
 send(content) 向服务器发送请求
 setRequestHeader("header", "value")
 把指定header设置为所提供的值。注意在设置任何header之前必须先调用open()

表2-2 标准XMLHttpRequest属性
 属     描    
 onreadystatechange 每个状态改变都会出发这个时间处理器,通常会调用一个JavaScript函数
 readyState 请求的状态。0 = 未初始化,1 = 正在加载,2 = 已加载,3 = 交互中,4 = 完成
 responseText 服务器的相应,表示为一个串
 responseXML 服务器的相应,表示为XML。这个对象可以解析为一个DOM对象
 status 服务器的HTTP状态码(200对应OK,404对应Not Found,等等)
 statusText HTTP状态码的相应文本(OK或Not Found等等)

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元素属性

 属性名 描述
 childNodes 返回当前元素的所有子元素的数组
 firstChild 返回当前元素的第一个子元素
 lastChild 返回当前元素的最后一个子元素
 nextSibling 返回紧跟在当前元素后的第一个元素
 nodeValue 制定表示元素值的读写属性
 parentNode 返回元素的父节点
 previousSibling 返回紧邻当前元素之前的元素

表 3-2    用于遍历XML文档的DOM元素方法
 方法名描述
 getElementById(id) (document)
 获取当前制定ID值的元素
 getElementsByTagName(name) 返回当前文档有制定标记名的元素的数组
 hasChildNodes() 返回一个boolean值,指示当前元素是否有子元素
 getAttributeName(name) 返回子元素的属性值,属性由name指定

表 3-3    动态创建内容时所用的W3C DOM属性和方法
 属性/方法
描述
 document.createElement(tagName) 创建一个制定tag名的元素
 document.cretateTextNode(Text) 创建一个包含静态文本的节点
 <element>.appendChild(childNode) 将制定节点增添到当前节点的子节点列表上
 <element>.getAttribute(name) 获取元素的属性值,参数为属性名
 <element>.setAttribute(name, value)
 设置元素的属性值
 <element>.insertBefore(newNode, targetNode)
 在目标节点targetNode之前插入一个节点newNode
 <element>.removeAttribute(name) 删除一个属性
 <element>.removeChild(childName) 删除子元素childNode
 <element>.replaceNode(newNode, oldNode)        
 用newNode替换oldNode
 <element>.hasChildNodes() 返回一个boolean值,指示当前元素是否有子元素


参考

Comments