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之 脚本化浏览器窗口
1.计时器 客户端Javascript以全局函数setTimeOut().clearTimeOut().setInterval().clearInterval()提供这一功能. 前者是从运行的那一 ...
- JavaScript 客户端JavaScript之 脚本化文档
客户端JavaScript的存在把静态HTML转变为交互式的Web应用程序,脚本化Web页面的内容正是JavaScript存在的理由. 一个文档对象模型或者说DOM就是一个API,它定义了如何访问 ...
- JavaScript 客户端JavaScript之cookie和客户端持久性
Document对象都有一个cookie属性,它使得JavaScript代码能够在用户的硬盘上持久地存储数据, 并且能够获取以这种方式存储的数据.客户端持久性是赋予WEB应用程序记忆力的一种简单方法. ...
- JavaScript 客户端JavaScript之 Web浏览器的环境
Web浏览器实现的Javascript,通过Web浏览器实现的JavaScript引入了大量可脚本化的对象(1.Web浏览器 2.HTML 3.HTML中的内容) Web浏览器中的Javascrip ...
- JavaScript 客户端JavaScript之样式表操作(DOM API 提供模块之一)
层叠样式 表和动态HTML 层叠样式表(CSS)是指定HTML文档或XML文档的表现的标准. 使用CSS和Javascript,可以创建出各种视觉效果,这些效果可以统称为动态HTML(DH ...
- JavaScript 客户端JavaScript之事件(DOM API 提供模块之一)
具有交互性的JavaScript程序使用的是事件驱动的程序设计模型. 目前使用的有3种完全不同的不兼容的事件处理模型. 1.原始事件模型 (一种简单的事件处理模式) 一般把它看作0级DOM API ...
- JavaScript 客户端JavaScript之Document对象中的表单和表单元素
Form对象 代表一个HTML表单(document可以有多个表单元素) 表单访问 document.form[document.forms.length-1] 访问表单元素 document.for ...
- 前端开发【第6篇:JavaScript客户端(浏览器)】
Web浏览器中的JavaScript 客户端JavaScript时间线 1.Web浏览器创建Document对象,并且开始解析web页面,解析HTML元素和它门的文本内容后添加Element对象和Te ...
- Javascript学习7 - 脚本化浏览器窗口
原文:Javascript学习7 - 脚本化浏览器窗口 本节讨论了文档对象模型.客户端Javascript下Window中的各项属性,包括计时器.Location对象.Histroy对象.窗口.浏览器 ...
随机推荐
- 前端自动化之babel本地化安装
npm添加package.json cd到项目根目录直接调用npm init 会创建package.json文件 本地安装bebel(并非全局安装,这种情况下cmd命令中babel命令不识别): 步骤 ...
- 新建PCH文件以及常用宏定义
$(SRCROOT)/项目名/pch文件名.pch //0-255的随机数 #define randint arc4random() % 256 //随机色 #define randColor [UI ...
- 转:hadoop知识整理
文章来自于:http://tianhailong.com/hadoop%E7%9F%A5%E8%AF%86%E6%95%B4%E7%90%86.html 按照what.how.why整理了下文章,帮助 ...
- plugin
http://wicky.nillia.ms/headroom.js/ http://makotot.github.io/sidebar/ http://www.nodebeginner.org/in ...
- Silverlight 模板(Template)使用
模板(Template)是控件另一种样式 它和样式(style)不同的是它允许已有的控件进行组合新的一个控件样式 那么先看一下最简单Template代码 xaml代码 <Button Conte ...
- HBase技术介绍
HBase简介 HBase - Hadoop Database,是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用HBase技术可在廉价PC Server上搭建起大规模结构化存储集群. HB ...
- 无需转化直接使用ESD映像文件安装系统简明教程
原版系统ISO镜像的sources文件夹中包含install.wim映像文件,将这个WIM文件“解压”(官方术语“Apply”)后,可以看到和C盘的目录完全相同,即为系统文件. 而官方提供的原版ESD ...
- Mysql 5.6主从同步配置与解决方案
主库IP:192.168.1.10 从库IP:192.168.1.11 centos的mysql配置文件在:/etc/my.cnf 1.主库配置编辑my.cnf: # 启用二进制日志 log_bin ...
- WIN8.1 PROBLEMS 01
win8装好后右下角显示secureboot未正确配置桌面会显示“Windows 8.1 Secure Boot未正确配置”的水印问题: 安全启动(Secure Boot)可以阻止未授权软件的运行,提 ...
- VMware Ubuntu安装详细过程
参考链接: http://blog.csdn.net/u013142781/article/details/50529030