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值中?后的参数
动态。
 
上一篇:JavaScript 客户端JavaScript之事件(DOM API 提供模块之一)


下一篇:javascript基础(三): 操作DOM对象(重点)