XMLHttpRequest
Ajax技术能向服务器请求额外的数据而无需加载页面。而这一技术的核心便是XMLHttpRequest对象(简称XHR)。
XMLHttpRequest方法
// 创建xhr对象
var xhr = new XMLHttpRequest();
xhr.open(method,url,async)
接收3个参数:要发送的请求的类型,请求的URL,表示是否异步发送请求的布尔值。
URL相对于当前页面(也可以使用绝对路径)
调用open()方法不会真正发送请求,而只是启动一个请求以备发送
// 初始化请求
xhr.open('get',example.php,true)
Note:只能向同一个域(子域名和主域名都得相同)使用相同端口号和协议的URL发送请求。如果URL与启动请求的页面有任何差别,都会引发安全错误。
// 一个域名的组成
协议 子域名 主域名 端口号
http:// www. abc.com : 8080
请求类型
GET请求
用于向服务器查询某些信息。
可以将查询字符串参数追加到URL末尾,以便将信息发送给服务器。对XHR而言,位于传入open()
方法的URL末尾的查询字符串必须经过正确的编码才行。
Note:查询字符串中的每个参数的名称和值都必须使用encodeURIComponent()
进行编码,然后才放到URL的末尾;而且所有名-值对都必须由和好(&)分隔。
function addURLParam ( url, name, value ) {
url += url.indexOf('?') === -1 ? '?' : '&';
url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
return url;
}
POST请求
用于向服务器发送应该被保存的信息。
POST请求应该把数据作为请求的主体提交。
PUT请求
向服务器发送想要更新的信息来替换服务上旧的信息
DELETE请求
删除服务上的信息。
Note:服务器并不会强迫执行它获得的每一个请求。如果你随意的浏览一个网站,并要求删除它的主要页面,很可能会失败
xhr.send(string)
接收一个参数,即要作为请求主体发送的数据。如果不需要通过请求主体发送数据,则必须传入null
xhr.abort()
取消异步请求。
调用这个方法后,xhr对象会停止触发事件
不允许xhr对象访问任何与响应有关的对象属性
xhr.setRequestHeader()
设置自定义的头部信息。
接收两个参数:1.头部字段的名称和头部字段的值。
必须在调用send()方法之前且open()方法之后,调用此方法。
xhr.open('get', 'example.php', true);
xhr.serRequestHeader('MyHeader', 'MyValue');
xhr.send(null);
xhr.getResponseHeader()
传入头部字段名称,可以取得相应的头部信息,查询响应中某个字段的值
xhr.getAllResponsHeaders()
可以取得所有头部信息的长字符串
XMLHttpRequest属性
/* 发送同步请求 */
// 创建xhr对象
var xhr = new XMLHttpRequest();
// 初始化请求
xhr.open('get',example.php,false);
// 发送请求
xhr.send(null);
在收到响应后,响应的数据会自动填充XHR对象的属性,相关的属性简介如下
与响应有关的xhr属性
status
: 响应的HTTP状态码statusText
: HTTP状态的说明 // 跨浏览器使用不可靠responseText
: 作为响应主体被返回的文本,获得字符串形式的响应数据responseXML
: 如果响应的内容为'text/xml'或'application/xml',这个属性中将保存包含着响应数据的XML DOM文档
HTTP状态码
1XX 提示信息 - 表示请求已被成功接收,继续处理
2XX 成功 - 表示请求已被成功接收,理解,接受
3XX 重定向 - 要完成请求必须进行更进一步的处理
4XX 客户端错误 - 请求有语法错误或请求无法实现
5XX 服务器端错误 - 服务器未能实现合法的请求
/* 发送异步请求 */
// 创建xhr对象
var xhr = new XMLHttpRequest();
// 监听请求状态
xhr.onreadystatechange = function () {
if(xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status = 304) {
alert(xhr.responseText);
} else {
alert('Request was unsuccessful: ' + xhr.status);
}
}
}
// 初始化请求
xhr.open('get',example.php,true);
// 发送请求
xhr.send(null);
表示请求响应过程的xhr属性
-
readyState
:0。未初始化。尚未调用open()方法
1。服务器建立连接。已经调用open()方法,但未调用send()方法
2。请求已接收。调用send()方法,但未接收到响应
3。请求处理中。接收到部分数据响应
4。请求完成。接收到全部响应数据,可以在客户端使用了。
HTTP响应与请求体
http—无状态协议
请求过程
1.建立TCP连接
2.Web浏览器向服务器发送请求命令
3.Web浏览器发送请求头信息
4.Web服务器应答
5.Web服务器发送应答头信息
6.Web服务器向浏览器发送数据
7.Web服务器关闭TCP连接
HTTP请求包(浏览器信息)
Request包的结构, Request包分为3部分
第一部分叫Request line(请求行)
第二部分叫Request header(请求头)
第三部分是body(主体)。header和body之间有个空行,请求包的例子所示:
GET /domains/example/ HTTP/1.1 //请求行: 请求方法 请求URI HTTP协议/协议版本
Host:www.iana.org //服务端的主机名
User-Agent:Mozilla/5.0 (Windows NT 6.1)
AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.94 Safari/537.4 // 浏览器信息
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 //客户端能接收的mine
Accept-Encoding:gzip,deflate,sdch //是否支持流压缩
Accept-Charset:UTF-8,*;q=0.5 //客户端字符编码集
//空行,用于分割请求头和消息体
//消息体,请求资源参数,例如POST传递的参数
HTTP响应包(服务器信息)
和请求包一样分为3个部分。
HTTP/1.1 200 OK // 状态行
Server: nginx/1.0.8 // 服务器使用的WEB软件名及版本
Date:Date: Tue, 30 Oct 2012 04:14:25 GMT // 发送时间
Content-Type: text/html // 服务器发送信息的类型
Transfer-Encoding: chunked // 表示发送HTTP包是分段发的
Connection: keep-alive // 保持连接状态
Content-Length: 90 // 主体内容长度
//空行 用来分割消息头和主体
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"... //消息体
FormDate
为序列化表单以及创建于表单格式相同的数据提供了便利。
var data = new FormData();
data.append('name','Nicholas');
跨资源共享
CORS(Cross-Origin Resource Sharing, 跨资源共享):定义了在必须访问跨源资源时,浏览器与服务器如何沟通。
基本思想:使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是应该失败。
IE对CORS的实现
cookie不会随请求发送,也不会随响应返回
只能设置请求头部信息中的Conte-type字段
不能访问响应头部信息
只支持GET和POST请求
其他浏览器对CORS的实现
不能使用setRequestHeader()设置自定义头部
不能发送和接收cookie
调用getAllResponseHeaders()方法总会返回空字符串
Comet
一种服务器向页面推送数据的技术。
实现方式:
长轮询
HTTP流
长轮询
首先轮询的意思就是,浏览器定时向服务器发送请求,看有没有更新的数据。
短轮询(也就是传统轮询):浏览器定时向服务器发送请求,与服务器建立
长轮询:
HTTP流
在页面的整个周期内,只使用一个HTTP连接。
具体来说,就是浏览器向服务器发送一个请求,而服务器保持连接打开
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。