繁体中文
设为首页
加入收藏
当前位置:网页设计首页 >> AJAX >> AJAX快速入门之HTTP协议基础

AJAX快速入门之HTTP协议基础

2007-12-27 13:10:01  作者:  来源:  浏览次数:11  文字大小:【】【】【
要很好地领会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)对用 & 隔开。绝大部分的服务器端技术能够自动对请求主体进行解码,并为这些值的访问提供一些逻辑方式。当然,如何使用这些数据还是由服务器决定的。


  接下来是autosave.js

  程序代码:

// 首先设置全局变量

// 要保存的内容对象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草稿自动保存完成了。



  浏览器发送的首部,通常比本文中所讨论的要多得多。为了简单起见,这里的例子尽可能简短。


  另一方面,POST请求在请求主体中为服务器提供了一些附加的信息。通常,当填写一个在线表单并提交它时,这些填入的数据将以POST请求的方式发送给服务器。

  以下就是一个典型的POST请求:

POST / 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
Content-Type: application/x-www-form-urlencoded
Content-Length: 40
Connection: Keep-Alive
name=Professional%20Ajax&publisher=Wiley

  从上面可以发现, POST请求和GET请求之间有一些区别。首先,请求行开始处的GET改为了POST,以表示不同的请求类型。你会发现首部Host和User-Agent仍然存在,在后面有两个新行。其中首部Content-Type说明了请求主体的内容是如何编码的。浏览器始终以application/ x-www-form- urlencoded的格式编码来传送数据,这是针对简单URL编码的MIME类型。首部Content-Length说明了请求主体的字节数。在首部Connection后是一个空行,再后面就是请求主体。与大多数浏览器的POST请求一样,这是以简单的“名称—值”对的形式给出的,其中name是Professional Ajax,publisher是Wiley。你可以以同样的格式来组织URL的查询字符串参数。

  正如前面所提到的,还有其他的HTTP请求类型,它们遵从的基本格式与GET请求和POST请求相同。下一步我们来看看服务器将对HTTP请求发送什么响应。

  HTTP响应

  如下所示,HTTP响应的格式与请求的格式十分类似:

<status-line>
<headers>
<blank line>
[<response-body>]

  正如你所见,在响应中唯一真正的区别在于第一行中用状态信息代替了请求信息。状态行(status line)通过提供一个状态码来说明所请求的资源情况。以下就是一个HTTP响应的例子:

HTTP/1.1 200 OK
Date: Sat, 31 Dec 2005 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 122

<html>
<head>
<title>Wrox Homepage</title>
</head>
<body>
<!-- body goes here -->
</body>
</html>

  在本例中,状态行给出的HTTP状态代码是200,以及消息OK。状态行始终包含的是状态码和相应的简短消息,以避免混乱。最常用的状态码有:

  ◆200 (OK): 找到了该资源,并且一切正常。

  ◆304 (NOT MODIFIED): 该资源在上次请求之后没有任何修改。这通常用于浏览器的缓存机制。

  ◆ 401 (UNAUTHORIZED): 客户端无权访问该资源。这通常会使得浏览器要求用户输入用户名和密码,以登录到服务器。

  ◆403 (FORBIDDEN): 客户端未能获得授权。这通常是在401之后输入了不正确的用户名或密码。

  ◆404 (NOT FOUND): 在指定的位置不存在所申请的资源。

  在状态行之后是一些首部。通常,服务器会返回一个名为Data的首部,用来说明响应生成的日期和时间(服务器通常还会返回一些关于其自身的信息,尽管并非是必需的)。接下来的两个首部大家应该熟悉,就是与POST请求中一样的Content-Type和Content-Length。在本例中,首部Content-Type指定了MIME类型HTML(text/html),其编码类型是ISO-8859-1(这是针对美国英语资源的编码标准)。响应主体所包含的就是所请求资源的HTML源文件(尽管还可能包含纯文本或其他资源类型的二进制数据)。浏览器将把这些数据显示给用户。

  注意,这里并没有指明针对该响应的请求类型,不过这对于服务器并不重要。客户端知道每种类型的请求将返回什么类型的数据,并决定如何使用这些数据。

责任编辑:


相关文章
 

最新文章

更多

· XMLHttpRequest对象详解
· JQuery 使用手册(6-7) 事...
· JQuery 使用手册(4-5)
· JQuery 使用手册(3) CSS操作
· JQuery 使用手册(2) 二:...
· JQuery 使用手册(1)
· jQuery1.2选择器
· ASP.NET AJAX Beta2 调用...
· 在ASP.NET AJAX中别使用...
· asp简单的ajax留言板(采...

推荐文章

更多

· XMLHttpRequest对象详解
· JQuery 使用手册(6-7) 事...
· JQuery 使用手册(4-5)
· JQuery 使用手册(3) CSS操作
· JQuery 使用手册(2) 二:...
· JQuery 使用手册(1)
· jQuery1.2选择器
· ASP.NET AJAX Beta2 调用...
· 在ASP.NET AJAX中别使用...
· asp简单的ajax留言板(采...

热点文章

更多