JavaScript 客户端JavaScript之脚本化HTTP(通过XMLHttpRequest)

XMLHttpRequest对象的设计目的是为了处理由普通文本或XML组成的响应；但是，一个响应也可能是另外一种类型，如果用户代理(UA)支持这种内容类型的话。

 

大多数浏览的客户端JavaScript都包含此功能。

HTTP协议 规定了Web浏览器如何从Web服务请求文档，如何向Web服务器传送表单内容，以及如何响应

这些请求和传递。

Web浏览器处理了很多HTTP（通常HTTP并不在脚本的控制之下）

1、用户点击一个链接

2、提交一个表单

3、输入一个URL

 

通常JavaScript代码可能脚本化HTTP，但并不总是如此。

如设置一个对象的Window.Location 

下载图像                <img>

下载文档                <iframe>

下载脚本执行         <script> src属性

 

当脚本把这些属性设置为一个URL，就会启动一个HTTP GET 请求来下载该URL的内容。

因此可以将信息编码到一个图像的URL查询字符串部分，并设置一个src属性，从而把信息

传送给Web服务器。(注：web服务器必须实际返回一个图像(任意大小 如：1px*1px 透明图)

所以使用以上方法，对HTTP进行脚本化是可能的，但可移植性差。

    在现代浏览器中，XMLHttpRequest对象得到很好的支持，并且提供对HTTP协议的完全的访问，

    包括做出POST和HEDAD请求以及普通的GET请求的能力。可同步或异步地返回Web服务器的请求，

并且能够以文本或者一个DOM文档的形式返回内容。（可接收任何形式的文本文档）

XMLHttpRequest对象是名为Ajax的Web应用程序架构的一项关键功能。

 

20.1 使用XMLHttpRequest(新版本为XMLHttpRequest 2）

使用其脚本化HTTP有3个步骤

1、创建一个XMLHttpRequest对象

2、指定HTTP请求并向一个Web服务器提交

3、同步地或异步地获得服务器的响应

 

如：var request=new XMLHttpRequest();

使用open()方法来指定该请求的方法和URL

request.open("GET",url,false);

方式中有 GET POST HEAD 

URL    web服务器的URL  

最后一个参数是指定是否为异步，true 异步 （缺省值）,false 同步  

 

除了以上3个可选参数，还有第4个和第5个参数 可选参数，名字和密码

当从一个需要授权的服务器获取一个URL的时候需要用到这两个参数。

 

open()     并不实际地向Web服务器发送请求，它只是保存自己的参数，等到稍后实际发送请求的时候再使用。

在发送请求之前，必须设置所有所需的请求头部。

如：

request.setRequestHeader("user-Agent","XMLHttpRequest");

              setRequestHeader("Accept-language","en");

              setRequestHeader('''');

注：Web浏览器自动为建立的请求添加相关的cookie，只有当想要向服务器发送一个假的cookie

的时候，才需要显式地设置 "cookie" 头部

 

最后，把请求发送给服务器。

request.send(null)

send()函数的参数是请求体。对于 HTTP Get请求，参数一般总是null(是否可有不为null参数体）

 

注：XMLHttpRequest是一个客户端对象，它的方法不允许像核心JavaScript函数那样省略参数

(至少Firefox是如此）

 

20.1.3 获取一个同步响应

    send()并不返回一个状态代码。一旦它返回，可以使用请求对象的status属性来检查服务器返回的HTTP状态代码。

这个代码可能值在HTTP协议中定义了

状态200:请求成功

状态404：请求的URL不存在

等。可查阅相关文档。

以下代码紧接在send()函数后。

if(request.status==200)

{

    alert(request.responseText);

}

else

{

}

注：XMLHttpRequest对象也提供了对返回的HTTP头部的访问

getResponseHeader()

 

20.1.4 处理一个同步响应

 

来自服务器的异步响应就像是来自用户的异步鼠标点击：当它发生时，需要被通知。这通过一个事件句柄来实现

在onreadystatechange属性上控制，只要readyState改变，事件句柄函数就被调用。

readyState是指定一个HTTP请求的状态的整数值。

 

表20-1  XMLHttpRequest的readyState的值

readyState                        含义

0                                    open()还没调用

1                                    open()已经调用，但是send()还没有调用

2                                    send()已经调用，但服务器还没有响应

3                                    正在从服务器接收数据。readyState  3 在Firefox和Internet Explorer中略有不同。

 

注：和客户端JavaScript中的大多数事件相反，没有事件对象传递给onreadystatechange句柄，

且XMLHttpRequest对象也不会作为参数传递给事件句柄，因此要在句柄函数内部直接访问

XMLHttpRequest声明的对象(在其有效范围内）

 

如：

request.onreadystatechange=function()

{

    if(request.readyState==4)

        {

            if(request.status==200

                {

                    alert(requst.responseText);

                }

        }

}

 

注：

1、Firefox在较大 的下载过程中，会在readyState==3中多次调用onreadystatechange句柄，以提供下载过程反馈

2、IE只有当readyState实际变化时才调用，且responseText在这一状态中查询不到。

 

20.1.5 XMLHttpRequest 的安全性

作为同源安全策略的一部分， XMLHttpRequest对象可以只向某些服务器发布HTTP请求。

而使用该对象的文档是通过这些服务器下载，但是如果需要也可以绕过它，通过使用一个

服务器端的脚本作为代理来接收某些异地URL的内容。

注：XMLHttpRequest安全限制有一个非常重要的意义：做出HTTP请求且不会与其他的URL样式一起工作。

如不会和使用file://协议的URL一起工作。

这意味着不能从自己的本地文件系统测试 XMLHttpRequest脚本。（必须放入Web服务器中）

 

HTTP POST

使用POST请求，数据在请求体中传递给服务器，而不是编码到URL之中

request.send();

疑问：1 客户端请求体的格式  2、服务器返回的数据格式  

 

20.2.5

XMLHttpRequest对象的一个缺点就是没有提供指定的一个请求的过期值的方法，对于 同步的请求来说，

如果服务器挂起，Web浏览器在send()方法中，保持阻塞，并且所有处理都被冻结起来。

（但异步请求一般不会，但还是设置过期较好)

解决办法：使用setTimeout()来设置过期值

在setTimeout指定的处理函数中调用XMLHttpRequest.abort()方法来取消请求。

 

 

20.3 AJAX

Ajax应用程序的关键特征就是，它使用脚本化的HTTP来与一个Web服务器通信而没有导致页面重载。

 

20.3.2 单页面应用程序 

    只需要一个页面载入的JavaScript驱动的Web应用程序。

    使用XMLHttpRequest对象和Ajax架构实现。

 

注：沿着这种思路设计的Web应用程序可能含有少量的JavaScript启动代码。（如只是一个开始启动的动画屏幕）

    一旦开始，启动代码会使用一个XMLHttpReuqest对象来下载应用程序的实际的代码，然后这些代码和eval()方法一起

执行。这样JavaScript代码就能接管控制，载入XMLHttpRequest所需的数据并使用DOM将这些数据以DHTML的形式

提交以显示给用户。

 

20.3.3 远程脚本调用 RPC

    比Ajax早4年出现，基本思想相同，设置iframe的src=

如果Web服务器返回一个其中包含<script>标记的HTML文档，该标记包含的JavaScript会被浏览器执行。

并且可以调用在包含在该iframe的窗口中定义的方法 。

通过这种形式，服务器可以以JavaScript的形式把非常直接的命令发送给它的客户机

 

iframe跨越访问以及window.parent的访问 

变量的寻找方式 

独立的全局执行环境

 

20.3.4 关于Ajax的警告

 

在设计Ajax应用程序时需要注意的3个问题

1、可视化反馈

2、URL有关

3、使用Ajax加载，内容变化后，地址工具栏中的URL始终不变（前进、后退按钮失效） 这是合理的，因为是单页面应用程序。

 

20.4 使用<script>标记脚本 化HTTP

设置src 并设置src值中?后的参数

动态。