《 Head First Ajax 》学习笔记

前言

花了10几天的时间把《 Head First Ajax 》这本书看完了,感觉还不错。由于书的写作别具风格,所以我能较为轻松地学到里面的知识,也给我继续学习前端增加了一些信心。读完过后,想把书中的知识点整理一下,于是在此写下一篇博文。

什么是Ajax

关于这个有一个故事

2005年,Jesse James Garrett 发表了一篇在线文章,题为 “Ajax:A new Approach to Web Applications”。他在这篇文章里介绍了一种技术,用他的话说,就叫Ajax,是对 Asynchronous JavaScript + XML 缩写。这一技术能够向服务器请求额外的数据而无须卸载页面,会带来更好的用户体验。Garrett 还解释了怎样使用这一技术改变自从 Web 诞生一下就一直沿用的 “单击,等待” 的交互模式。

那么什么是 Ajax 呢

Ajax 是一种在无须重新加载整个网页的情况下,能够更新部分网页的技术。它的技术核心是 XMLHttpRequest 对象(简称 XHR)。在 XHR 还没有出现之前,Ajax 式的通信必须借助一些 hack 手段来实现,大多数是使用隐藏的框架或内嵌框架。XHR 为向服务器发送请求和解析服务器相应提供了流畅的接口。能够以异步的方式从服务器获得更多信息,意味着用户单击后,可以不必刷新页面也能取得新数据。也就是说,可以使用 XHR 对象取得新数据,然后再通过 DOM 将新数据插入到页面中。另外,虽然名字也包含 XML 的成分,但 Ajax 通信和数据格式无关;这种技术就是无须刷新页面即可从服务器取得数据,但不一定是 XML 数据。

以上两段内容来自《JavaScript 高级进程设计》。

怎么使用 Ajax 技术

使用 Ajax 技术的5个步骤(以第一章的例子为例)

1.修改 XHTML Web 页面

需要包含接下来要编写的 JavaScript 文档,并增加一些 divid,使 JavaScript 脚本能够查找和处理 Web 页面中的不同部分。
图片:

2.编写一个函数初始化页面

首次加载目录页面时,需要运行一些 JavaScript 脚本来建立这些图像,准备好一个请求对象,并确保页面已经准备准备就绪。
JS 代码:

1
2
3
4
5
6
7
window.onload = initPage;
function (){




}

3.编写一个函数创建请求对象

我们需要一个途径与服务器通信,并得到服务器返回的信息。因此我们将创建一个请求对象,为了解决浏览器兼容问题我们不能简单的通过一行代码来创建这个请求,我们需要创建一个浏览器创建函数;这个函数名为 createRequest() 。只要触发相应的事件就可以使用这个函数启动一个新的请求。
JS 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function createRequest(){
try{
request = new XMLHttpRequest();
// for IE
}catch( tryMS ){
try{
request = new ActiveXObject("Msxml2.XMLHTTP");
}catch (otherMS){
try{
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch( failed ){
request = null;
}
}
}
}

4.从服务器得到一个商品的详细信息

我们将在 getDetails() 中向服务器发送一个请求,告诉浏览器当服务器响应时该怎么做。
JS 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function getDetails(){
// 得到一个请求对象,这个的 request 变量没有加 var 而使之变成全局变量,稍后将解释
request = createRequest();
// 检查是否创建了request 请求对象
if( reuqest == null ){
alert("Unable to create request");
return;
}
// 配置请求
// escape()负责处理请求 URL 字符串中可能有问题的字符
var url = "getDetails.php?ImageID=" + escape(itemName);
request.open("GET", url, true);
// 设置回调函数
request.onreadystatechange = displayDetails;
// 发送请求
request.send(null);
}

5.显示商品的详细信息

可以在 displayDetails() 在服务器对请求作出响应时更新商品的描述信息
JS 代码:

1
2
3
4
5
6
7
8
function displayDetails(){
if( request.readyState === 4 ){
if( request.status === 200 ){
detailDiv = document.getElementById("description");
detailDiv.innerHTML = request.responseText;
}
}
}

6.测试

图片:

##上述例子的知识点整理

###1.好的编程风格

上面例子中的 JS 代码编写都是一个功能对应一个处理函数,然后需要时再调用,非常好的编程风格。还有会把一些常用的函数收集起来供需要时调用,一种代码重用的思想。

2.分解request.open(“GET”, url, true)

  1. request.open() 中的 open() 是 request 对象的一个方法。功能是初始化链接。
  2. "GET" 指示如何发送数据(另一种方法是“POST”)。
  3. url 是对请求作出相应的服务器端的脚本的 URL,在使用 GET 方法发送请求时,请求需要发送给服务器的数据放入 URL中。
  4. true 说明请求应当是异步的。也就是说,在等待服务器作出响应期间,浏览器中的代码可以继续执行。

3.解释request.onreadystatechange = displayDetails;

我们使用 request 的 onreadystatechange 属性来检测服务器处理请求的状态,它会告诉浏览器当服务器发送信息时应用调用什么代码。为了养成好的编程习惯和有良好的维护性,我们将这个属性设置为一个函数名(称为回调函数)。这行代码的意思一个函数的引用而不是一个函数的调用,所以不需要再函数名后加上括号。

4.使用请求对象的 send() 方法来发送请求

为什么上面的例子中的参数是 null 呢?因为请求的数据是使用 GET 方法发送出去的,而请求的数据已经作为 URL 的一部分发送出去了,所以不需要再使用 send() 方法再向服务器发送热和其他数据。

5.Ajax应用是与服务器无关的

Ajax不要求任何特定的服务器技术。可以使用 Active Server Pages(ASP),PHP 或者其他技术。实际上没有必要深入到服务器端技术的细节当中,因为它对于如何构建 Ajax 应用没有任何影响。

6.下面是请求对象的一些属性

  1. readySate 表示请求对象当前状态的一个数。当 readySate = 0 时表明请求对象还未初始化;当 readyState = 1 时服务器对请求对象进行初始化;当 readyState = 2 时表明服务器正在处理请求,可以得到处理的状态和响应首部;当 readyState = 3 时表明服务器已经下载到了请求发送的数据,但是还没有准备好,还不能使用;当 readySate = 4 时,回调函数使用服务器的响应状态来更新页面。
  2. status 服务器返回 HTTP 状态码,指示当前状态。如 404 就代表请求的资源未找到禁止访问,200 代表成功。对请求对象做任何处理之前一定要确保状态码为200。
  3. responseXML 包含服务器发回的 XML 格式信息(除非服务器发回 XML 格式的数据,否则这个属性为空)。
  4. statusText 服务器返回的状态码消息,例如,“OK” 对应状态202。
  5. responseText 包含服务器发回的文本消息(除非服务器发回文本数据而非 XML 数据,否则这个属性为空)。

书中其他知识点

1.将页面的内容与行为分离

这个概念在我学了一段前端之后就知道了,并一直以此为规则来写前端代码,但是看了本书的第二章的例子的代码,我觉得我有些地方还是做得不够。

在处理服务器返回的信息显示给用户的地方,有三个状态需要显示,它们分别是正在处理中、通过、报错。本书的方法是使用了三个类,根据服务器返回的信息给相应的元素设置不同的类。我原先想到的处理方法,是分别为相应的元素设置不同的背景图片(或者使用 css sprite 技术设置背景图像的background-position)。但是看过书中的方法后,觉得显然我的处理方法不够合理,会给网站的后期维护带来问题。

2.关于什么是 Ajax 应用

Ajax 应用:能够快速响应而且用户友好的现代 Web 应用。

3.关于 window.onload

1.什么时候会调用window.onload:实际上 window.onload 是一个事件,一旦 XHTML 页面由浏览器读入,而且需要该 XHTML 中引用的所有文档都已经加载,就会发生或触发这个事件
2.浏览器怎么知道要调用哪个函数:浏览器会调用你指定给 window 对象 onload 属性的函数。设置这个属性与设置任何其他 JavaScript 属性是一样的;要用等号来设置。要确保去掉函数名后面的括号;如 window.onload = initPage;
3.那么在哪里对这个函数赋值呢:浏览器一旦遇到不在任何函数中的代码,就会立即运行这个代码。所以只要把 window.onload 复制语句放在 JavaScript 最前面,要在所有函数之外,这个赋值就会在用户与页面交互之前发生。接下来,浏览器会触发 onload,并运行指定给 onload 属性的函数。我们可以利用这个机制来设置 Web 页面的其他事件。