js-JavaScript高级程序设计学习笔记17
第21章 AJAX
AJAX技术的核心是XMLHttpRequest对象。可以使用XHR对象取得新数据,然后通过DOM将新数据插入到页面中。无需刷新页面即可从服务器获得数据。
1、XHR对象。
如果只想支持IE7+,那么可以直接使用XHR构造函数。
如果支持IE6:
function createXHR(){
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
else
{// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
throw new Error("No XHR object available.");
}
}
1、XHR的用法
使用XHR对象,要调用的第一个方法是open()
xhr.open("get","example.php",false);调用这个方法不会真正发送请求,只是启动一个请求以备发送。
要发送特定的请求,必须调用send()方法
xhr.open("get","example.php",false);
xhr.send(null);这次请求是同步的,JS代码会等到服务器响应之后再继续执行。接收到响应后,响应的数据会自动填充XHR对象的属性。
①responseText:作为响应主体被返回的文本;
②responseXML:如果相应的内容类型是text/xml或application/xml,这个属性将保存包含着相应数据的XML DOM文档;非XML数据,值为null。
③status:相应的HTTP状态。
④statusText:HTTP状态说明。
在接收到响应后,第一步是检查status属性,以确响应已经成功返回。
以上为发送同步请求,异步请求能让JS继续执行而不必等待响应。此时可以检测XHR对象的readyState属性,表示请求/相应过程的当前活动阶段。
①0:未初始化。尚未调用open()方法;
②1:启动。已open(),未send();
③2:发送。已send(),未收到响应;
④3:接收。已收到部分响应数据;
⑤:完成。可以使用了。
readyState改变时都会触发一次readystatechange事件。必须在调用open()之前指定onreadystatechange事件处理程序才能保证跨浏览器兼容性。
2、HTTP头部信息
使用setRequestHeader()方法可以设置自定义请求头部信息,必须在open()后和send()前调用。
getResponseHeader()和getAllResponseHeaders()可获取头部信息。
3、GET请求。
GET是最常见的请求类型,常用于向服务器查询某些信息。查询字符串必须经过encodeURIComponent()进行正确的编码。
4、POST请求。
通常向服务器发送应该被保存的数据。
第一步open()初始化,第二部向send()传入某些数据。模仿表单提交P577.
POST请求比GET请求消耗资源。
2、XHR 2级
1、FormData。序列化表单。
xhr.open("post","postexample.php",true);
var form=document.getElementById("user-info");
xhr.send(new FormData(form));2、超时设定
timeout属性。请求在多少毫秒后终止并触发timeout事件。(IE8+)
3、overrideMimeType()方法
重写响应的MIME类型。在send()前调用。
3、进度事件。
Progress Events规范,六个进度事件
①loadstart②progress③error④abort⑤load⑥loadend。每个请求都是从出发loadstart开始,接下来是一个或多个progress,然后出发error/abort/load中的一个,然后出发loadend结束。
progress事件,可用来做进度指示器。onprogress事件处理程序接收一个event对象,target属性是XHR对象,额外三个属性:lengthComputable——进度信息是否可用、position——已接收字节数、totalSize——根据响应头部确定的预期字节数。必须在open()之前添加onprogress事件处理程序。
最新文章
- 篇三:访问JSON静态文件
- Linux 使用fdisk添加新分区
- 判断App运行是否在前台
- Lazyr.js – 延迟加载图片(Lazy Loading)
- quartz使用(一)
- ASP.NET MVC中分析淘宝网页发生乱码标题搞定方法
- Django添加Last-Modified和ETag
- How to display SSRS report based on customer/Vendor specific language [AX2012]
- Skip list--reference wiki
- lrzsz on linux
- Free and Open Source Load-Balancing Software and Projects--转
- 移动web经验积累
- 如何实现View上添加标签
- win7配置iis 出现:HTTP 错误 403.14 - Forbidden
- nc命令
- THREE.JS + Blender(obj、mtl加载代码)
- 大数据实时处理-基于Spark的大数据实时处理及应用技术培训
- SpringMVC中@Controller和@RequestMapping用法和其他常用注解
- ssh 端口更改或ssh 远程接不上的问题(尤其是国外服务器)
- micro-fusion &; macro-fusion