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之脚本化HTTP(通过XMLHttpRequest)的更多相关文章

  1. JavaScript 客户端JavaScript之 脚本化浏览器窗口

    1.计时器 客户端Javascript以全局函数setTimeOut().clearTimeOut().setInterval().clearInterval()提供这一功能.   前者是从运行的那一 ...

  2. JavaScript 客户端JavaScript之 脚本化文档

    客户端JavaScript的存在把静态HTML转变为交互式的Web应用程序,脚本化Web页面的内容正是JavaScript存在的理由.   一个文档对象模型或者说DOM就是一个API,它定义了如何访问 ...

  3. JavaScript 客户端JavaScript之cookie和客户端持久性

    Document对象都有一个cookie属性,它使得JavaScript代码能够在用户的硬盘上持久地存储数据, 并且能够获取以这种方式存储的数据.客户端持久性是赋予WEB应用程序记忆力的一种简单方法. ...

  4. JavaScript 客户端JavaScript之 Web浏览器的环境

    Web浏览器实现的Javascript,通过Web浏览器实现的JavaScript引入了大量可脚本化的对象(1.Web浏览器 2.HTML 3.HTML中的内容)  Web浏览器中的Javascrip ...

  5. JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)

    层叠样式 表和动态HTML   层叠样式表(CSS)是指定HTML文档或XML文档的表现的标准.     使用CSS和Javascript,可以创建出各种视觉效果,这些效果可以统称为动态HTML(DH ...

  6. JavaScript 客户端JavaScript之事件(DOM API 提供模块之一)

    具有交互性的JavaScript程序使用的是事件驱动的程序设计模型.   目前使用的有3种完全不同的不兼容的事件处理模型. 1.原始事件模型 (一种简单的事件处理模式) 一般把它看作0级DOM API ...

  7. JavaScript 客户端JavaScript之Document对象中的表单和表单元素

    Form对象 代表一个HTML表单(document可以有多个表单元素) 表单访问 document.form[document.forms.length-1] 访问表单元素 document.for ...

  8. 前端开发【第6篇:JavaScript客户端(浏览器)】

    Web浏览器中的JavaScript 客户端JavaScript时间线 1.Web浏览器创建Document对象,并且开始解析web页面,解析HTML元素和它门的文本内容后添加Element对象和Te ...

  9. Javascript学习7 - 脚本化浏览器窗口

    原文:Javascript学习7 - 脚本化浏览器窗口 本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...

随机推荐

  1. 前端自动化之babel本地化安装

    npm添加package.json cd到项目根目录直接调用npm init 会创建package.json文件 本地安装bebel(并非全局安装,这种情况下cmd命令中babel命令不识别): 步骤 ...

  2. 新建PCH文件以及常用宏定义

    $(SRCROOT)/项目名/pch文件名.pch //0-255的随机数 #define randint arc4random() % 256 //随机色 #define randColor [UI ...

  3. 转:hadoop知识整理

    文章来自于:http://tianhailong.com/hadoop%E7%9F%A5%E8%AF%86%E6%95%B4%E7%90%86.html 按照what.how.why整理了下文章,帮助 ...

  4. plugin

    http://wicky.nillia.ms/headroom.js/ http://makotot.github.io/sidebar/ http://www.nodebeginner.org/in ...

  5. Silverlight 模板(Template)使用

    模板(Template)是控件另一种样式 它和样式(style)不同的是它允许已有的控件进行组合新的一个控件样式 那么先看一下最简单Template代码 xaml代码 <Button Conte ...

  6. HBase技术介绍

    HBase简介 HBase - Hadoop Database,是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用HBase技术可在廉价PC Server上搭建起大规模结构化存储集群. HB ...

  7. 无需转化直接使用ESD映像文件安装系统简明教程

    原版系统ISO镜像的sources文件夹中包含install.wim映像文件,将这个WIM文件“解压”(官方术语“Apply”)后,可以看到和C盘的目录完全相同,即为系统文件. 而官方提供的原版ESD ...

  8. Mysql 5.6主从同步配置与解决方案

    主库IP:192.168.1.10 从库IP:192.168.1.11 centos的mysql配置文件在:/etc/my.cnf 1.主库配置编辑my.cnf: # 启用二进制日志 log_bin ...

  9. WIN8.1 PROBLEMS 01

    win8装好后右下角显示secureboot未正确配置桌面会显示“Windows 8.1 Secure Boot未正确配置”的水印问题: 安全启动(Secure Boot)可以阻止未授权软件的运行,提 ...

  10. VMware Ubuntu安装详细过程

    参考链接: http://blog.csdn.net/u013142781/article/details/50529030