Ajax探讨
Posted markliangfeng
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Ajax探讨相关的知识,希望对你有一定的参考价值。
Ajax是一种技术方案,并不是什么新技术,Ajax请求使用XmlHttpRequest对象发送,
XmlHttpRequest是一个浏览器接口,使得javascript可以进行HTTP(S)通信。
最早,微软在IE 5引进了这个接口。因为它太有用,其他浏览器也模仿部署了,ajax操作因此得以诞生。
XmlHttpRequest Level1主要属性
* xhr.readyState:XMLHttpRequest对象的状态,等于4表示数据已经接收完毕。
* xhr.status:服务器返回的状态码,等于200表示一切正常。
* xhr.responseText:服务器返回的文本数据
* xhr.responseXML:服务器返回的XML格式的数据
* xhr.statusText:服务器返回的状态文本。
主要缺点
-
受同源策略的限制,不能发送跨域请求;
-
不能发送二进制文件(如图片、视频、音频等),只能发送纯文本数据;
-
在发送和获取数据的过程中,无法实时获取进度信息,只能判断是否完成;
XmlHttpRequest Level2主要属性
在Level1的基础上增加以下内容
* xhr.timeout: 设置HTTP请求的时限,最长等待时间设为3000毫秒。过了这个时限,就自动停止HTTP请求
配套的回调函数 xhr.ontimeout = function(event){alert(‘请求超时!‘);}
* var formData = new FormData();formData.append(‘username‘, ‘张三‘);xhr.send(formData); 新加formData对象,可以直接传formData
* formData.append(‘files[]‘, files[i]); xhr.send(formData); 上传文件
* xhr.open(‘GET‘, ‘http://other.server/and/path/to/script‘); 跨域资源共享CORS(IE9以上的支持)
* 接收二进制数据,参见阮老师的这篇文章
* 进度信息,包括上传的进度信息和下载的进度信息
xhr.onprogress = updateProgress; 下载
xhr.upload.onprogress = updateProgress;上传
function updateProgress(event) {
if (event.lengthComputable) {
var percentComplete = event.loaded / event.total;
}
}
* load事件:传输成功完成。
* abort事件:传输被用户取消。
* error事件:传输中出现错误。
* loadstart事件:传输开始。
* loadEnd事件:传输结束,但是不知道成功还是失败。
Level2新功能
-
可以发送跨域请求,在服务端允许的情况下;
-
支持发送和接收二进制数据;
-
新增formData对象,支持发送表单数据;
-
发送和获取数据时,可以获取进度信息;
-
可以设置请求的超时时间;
xmlHttpRequest的使用
1、设置requestheadervar client = new XMLHttpRequest();
client.open(‘GET‘, ‘demo.cgi‘);
client.setRequestHeader(‘X-Test‘, ‘one‘);//必须在open之后,send之前,第一个参数不区分大小写,Content-Type/content-Type/content-type
client.setRequestHeader(‘X-Test‘, ‘two‘); //最终的值不会采用覆盖override
的方式,而是采用追加append
的方式,
最终request header中"X-Test"为: one, two
client.send();
2、获取ResponseHeader
getAllResponseHeaders
getResponseHeader(header) //只能拿到限制以外(即被视为safe
)的header字段,而不是全部字段
3、设定response数据类型
level1 overrideMimeType
level2 xhr.responseType
4、获取response数据
xhr.response ""
xhr.responseText ""
xhr.responseXML null
5、追踪状态
利用onreadystatechange事件
0 |
UNSENT (初始状态,未打开) |
此时xhr 对象被成功构造,open() 方法还未被调用 |
1 |
OPENED (已打开,未发送) |
open() 方法已被成功调用,send() 方法还未被调用。注意:只有xhr 处于OPENED 状态,才能调用xhr.setRequestHeader() 和xhr.send() ,否则会报错 |
2 |
HEADERS_RECEIVED (已获取响应头) |
send() 方法已经被调用, 响应头和响应状态已经返回 |
3 |
LOADING (正在下载响应体) |
响应体(response entity body )正在下载中,此状态下通过xhr.response 可能已经有了响应数据 |
4 |
DONE (整个数据传输过程结束) |
整个数据传输过程结束,不管本次请求是成功还是失败 |
6、设置超时时间
xhr.timeout
以上是关于Ajax探讨的主要内容,如果未能解决你的问题,请参考以下文章