概述
ajax的主要特点是使用脚本操纵HTTP和WEB服务器进行数据交换,不会导致页面重载。微博应用可以使用ajax技术把用户的交互数据记录到服务器中,也可以开始只显示简单页面,之后按需加载额外的数据和页面组件来提升应用的启动时间。
comet:在comet中,web服务器发起通信并异步发送消息到客户端。
实现ajax和comet的方式有多种 - 使用<img>元素的src属性,参数作为src的查询值传给web服务器,服务器返回透明图片或不可见的图片。 缺点为数据传输为单向的。 - 使用<iframe> 元素,返回一个带有响应内容的html文档,并将其返回给web浏览器。 脚本通过遍历iframe的文档对象获取信息。缺陷:受限于同源策略的影响。 - <script>的src属性,能设置url并发起HTTP GET请求。它可以跨域通信而不受同源策略的影响。 服务器响应采用json编码,执行脚本时JavaScript解析器自动将其解码。由于使用JSON的数据格式,也叫JSONP - XMLHttpRequest API,它定义了用脚本操纵HTTP的API。
18.1 使用XMLHttpRequest
HTTP请求头由4部分构成
- HTTP请求方法
- 正在请求的URL
- 一个可选的请求头集合,其中可能包括身份验证信息
- 一个可选的请求主体
发起HTTP请求的步骤,必须按照顺序进行调用否则会发生异常
- 1.对xmlHttpRequest进行实例化
//对ie7之前进行兼容
if(window.XMLHttpRequest===undefined){
window.XMLHttpRequest=function(){
try{
return new ActiveXObject("Msxml2.XMLHTTP.6.0");
}catch(e1){
return new ActiveXObject("Msxml2.XMLHTTP.3.0");
}catch(e2){
throw new Error("XMLHttpRequest is not supported")
}
}
}
var request=new XMLHttpRequest();//对xmlHttpRequest进行实例化
- 2.指定方法和url
方法:GET POST DELETE HEAD OPTIONS PUT
URL:相对文档的url,或指定绝对URL,须符合同源原则
example
request.open('GET',"data.csv");
3.设置请求头
request.setRequestHeader("content-type","text/plain");
请求头重复设置不会被覆盖,而是包含多个值
不能自己指定的头:Content-Length 、Date 、Referer、 User-Agent4.指定可选的主体并发送
request.send(null);//get请求没有主体
取得响应
服务器返回的HTTP响应包含3部分
- 一个数字和文字组成的状态码,用来显示请求的成功或者失败
- 一个响应头集合
- 响应主体
可以通过XMLHttpRequest对象的属性和方法使用:
- status和statusText属性以数字和文本的形式返回HTTP状态码。这些属性保存标准的HTTP值,像200和“OK”表示成功请求,404和“Not Found”表示URL不能匹配任何资源。
- 使用getResponseHeader()和getAllResponseHeaders()能查询响应头。
- 响应主题可以从responseText属性中得到文本形式的,从responseXML属性中得到Document形式的。
常量 | 值 | 含义 |
---|---|---|
UNSENT | 0 | open()未调用 |
OPENED | 1 | open()已调用 |
HEADERS_RECEIVED | 2 | 接收到头信息 |
LODADING | 3 | 接收到响应主题的信息 |
DONE | 4 | 响应完成 |
使用例子
function getText(url,callback){
var request=new XMLHttpRequest();
request.open("POST",url);
request.onreadystatechange=function(){
if(request.readyState==4&&request.status==200){
var type=request.getResponseHeader("Content-Type");
if(type.match(/^text/)){
callback(request.responseText);
}
}
}
request.send(null);
}
当request第三个参数是false时,实现同步。
常见的mime类型:
- text/plain, text/html,text/css 获取request.responseText
- text/xml 获取 request.responseXML
- application/json 获取JSON.parse(request.responseText)
编码请求主体
表单数据编码格式
使用等号把名字和值分开,使用&分开名值对 表单数据编码格式的正式MIME类型:application/x-www-form-urlencoded js对象的表单编码形式 { find:“pizza”, radius:"1111km" }
JSON编码
指定头Content-Type mime类型:application/json JSON.stringify(data);//将对象序列化
XML编码请求
XMLHttpRequest没有预先指定头,会自动设置一个合适的头
multipart/form-data
当html表单同时包含文件上传元素和其他元素时,必须使用该请求来用POST方法提交表单
var formData=new FormData()//对formdata进行序列化
formData.append(name,value);
HTTP进度事件
下载进度
- 调用send()时会触发loadstart()事件
- 加载服务器响应,触发progress事件,50ms
- 事件完成,触发load事件(需要确定状态码)
请求无法完成
- 超时,timeou事件
- 中止 ,abort事件
- 网络错误 ,error事件.
上传进度
XMLHttpRequest对象的属性upload属性,值为一个对象,定义方法addEventListense(),progress的集合。