要很好地领会Ajax技术的关键是了解超文本传输协议(HTTP),该协议用来传输网页、图像以及因特网上在浏览器与服务器间传输的其他类型文件。只要你在浏览器上输入一个URL,最前面的http://就表示使用HTTP来访问指定位置的信息。(大部分浏览器还支持其他一些不同的协议,其中FTP就是一个典型例子。)
注意:本文中只涉及HTTP协议,这是Ajax开发人员关心的方面,它可作为HTTP的参考手册或指南。
HTTP由两部分组成:请求和响应。当你在Web浏览器中输入一个URL时,浏览器将根据你的要求创建并发送请求,该请求包含所输入的URL以及一些与浏览器本身相关的信息。当服务器收到这个请求时将返回一个响应,该响应包括与该请求相关的信息以及位于指定URL(如果有的话)的数据。直到浏览器解析该响应并显示出网页(或其他资源)为止。
HTTP请求 HTTP请求的格式如下所示:
<request-line> <headers> <blank line> [<request-body>] |
在HTTP请求中,第一行必须是一个请求行(request line),用来说明请求类型、要访问的资源以及使用的HTTP版本。紧接着是一个首部(header)小节,用来说明服务器要使用的附加信息。在首部之后是一个空行,再此之后可以添加任意的其他数据[称之为主体(body)]。
在HTTP中,定义了大量的请求类型,不过Ajax开发人员关心的只有GET请求和POST请求。只要在Web浏览器上输入一个URL,浏览器就将基于该URL向服务器发送一个GET请求,以告诉服务器获取并返回什么资源。对于www.wrox.com的GET请求如下所示:
GET / HTTP/1.1 Host: www.wrox.com User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1 Connection: Keep-Alive |
请求行的第一部分说明了该请求是GET请求。该行的第二部分是一个斜杠(/),用来说明请求的是该域名的根目录。该行的最后一部分说明使用的是HTTP 1.1版本(另一个可选项是1.0)。那么请求发到哪里去呢?这就是第二行的内容。
第2行是请求的第一个首部,HOST。首部HOST将指出请求的目的地。结合HOST和上一行中的斜杠(/),可以通知服务器请求的是www.wrox.com/(HTTP 1.1才需要使用首部HOST,而原来的1.0版本则不需要使用)。第三行中包含的是首部User-Agent,服务器端和客户端脚本都能够访问它,它是浏览器类型检测逻辑的重要基础。该信息由你使用的浏览器来定义(在本例中是Firefox 1.0.1),并且在每个请求中将自动发送。最后一行是首部Connection,通常将浏览器操作设置为Keep-Alive(当然也可以设置为其他值,但这已经超出了本书讨论的范围)。注意,在最后一个首部之后有一个空行。即使不存在请求主体,这个空行也是必需的。
如果要获取一个诸如http://www.wrox.com/books的www.wrox.com域内的页面,那么该请求可能类似于:
GET /books/ HTTP/1.1 Host: www.wrox.com User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1 Connection: Keep-Alive |
注意只有第一行的内容发生了变化,它只包含URL中www.wrox.com后面的部分。
要发送GET请求的参数,则必须将这些额外的信息附在URL本身的后面。其格式类似于:
| URL ? name1=value1&name2=value2&..&nameN=valueN |
该信息称之为查询字符串(query string),它将会复制在HTTP请求的请求行中,如下所示:
GET /books/?name=Professional%20Ajax HTTP/1.1 Host: www.wrox.com User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6) Gecko/20050225 Firefox/1.0.1 Connection: Keep-Alive |
注意,为了将文本“Professional Ajax”作为URL的参数,需要编码处理其内容,将空格替换成%20,这称为URL编码(URL encoding),常用于HTTP的许多地方(JavaScript提供了内建的函数来处理URL编码和解码,这些将在本章中的后续部分中说明)。“名称—值”(name—value)对用 & 隔开。绝大部分的服务器端技术能够自动对请求主体进行解码,并为这些值的访问提供一些逻辑方式。当然,如何使用这些数据还是由服务器决定的。
// 首先设置全局变量
// 要保存的内容对象FormContent
var FormContent=document.getElementById("message");
// 显示返回信息的对象
var AutoSaveMsg=document.getElementById("AutoSaveMsg");
// 用户名
var memName=document.getElementById("memName").value;
// 自动保存时间间隔
var AutoSaveTime=60000;
// 计时器对象
var AutoSaveTimer;
// 首先设置一次自动保存状态
SetAutoSave();
// 自动保存函数
function AutoSave() {
// 如果内容或用户名为空,则不进行处理,直接返回
if(!FormContent.value||!memName) return;
// 创建AJAXRequest对象,详细使用见文章开始的链接
var ajaxobj=new AJAXRequest;
ajaxobj.url="autosave.asp";
ajaxobj.content="memname="+escape(memName)+"&postcontent="+escape(FormContent.value);
ajaxobj.callback=function(xmlObj) {
// 显示反馈信息
AutoSaveMsg.innerHTML=xmlObj.responseText;
}
ajaxobj.send();
}
// 设置自动保存状态函数
function SetAutoSave() {
// 是否自动保存?
if(document.getElementById("Draft_AutoSave").checked==true)
// 是,设置计时器
AutoSaveTimer=setInterval("AutoSave()",AutoSaveTime);
else
// 否,清除计时器
clearInterval(AutoSaveTimer);
}
// 恢复最后保存的草稿
function AutoSaveRestore() {
// 创建AJAXRequest对象
var ajaxobj=new AJAXRequest;
// 提示用户正在恢复
AutoSaveMsg.innerHTML="正在恢复,请稍候……"
ajaxobj.url="autosave.asp";
ajaxobj.content="action=restore&memname="+escape(memName);
ajaxobj.callback=function(xmlObj) {
// 提示用户恢复成功
AutoSaveMsg.innerHTML="恢复最后保存成功";
// 如果内容为空则不改写textarea的内容
if(xmlObj.responseText!="") {
// 恢复草稿
FormContent.value=xmlObj.responseText;
}
}
ajaxobj.send()
}
最后是autosave.asp,用于在后台保存草稿:
程序代码:
<%@LANGUAGE="VBscript" CODEPAGE="65001"%>
<% Option Explicit %>
<%
' 语言为VBScript,编码为UTF-8,要求变量声明
' 出现错误则忽略,继续执行
On Error Resume Next
' 定义一些变量
Dim PostContent,memName,action,objStream
' 获取操作,是保存草稿还是恢复草稿
action=Request.Form("action")
' 获取用户名
memName=Request.Form("memname")
' 获取草稿内容
PostContent=Request.Form("postcontent")
IF action="restore" Then
' 恢复草稿,如果用户名不为空则进行恢复操作
IF memName<>Empty Then
' 使用 ADODB.Stream 来进行文件操作
Set objStream = Server.CreateObject("ADODB.Stream")
With objStream
.Type = 2
.Mode = 3
.Open
' 文件名为 autosave_ + 用户名 + .txt
.LoadFromFile(Server.MapPath("autosave_"&memName&".txt"))
.Charset = "utf-8"
'.Position = 0
PostContent = .ReadText()
.Close
End With
Set objStream = NoThing
' 输出草稿
IF PostContent<>"" Then Response.Write(PostContent)
End IF
Else
' 保存草稿,如果草稿内容和用户名均不为空则进行保存操作
IF PostContent<>Empty AND memName<>Empty Then
' 使用 ADODB.Stream 来进行文件操作
Set objStream = Server.CreateObject("ADODB.Stream")
With objStream
.Type = 2
.Mode = 3
.Open
.Charset = "utf-8"
.Position = objStream.Size
.WriteText= PostContent
.SaveToFile Server.MapPath("autosave_"&memName&".txt"),2
.Close
End With
Set objStream = NoThing
' 输出保存是否成功信息
If Err.Number=0 then
Response.Write("最后于 "&Now()&" 自动保存成功")
Else
Response.Write("最后于 "&Now()&" 自动保存失败,错误号:"&Err.Number&",错误描述:"&Err.Dscription)
End If
End IF
End IF
%>
至此,AJAX草稿自动保存完成了。