javascript高级程序设计第三版 第21章 Ajax与Comet
2017-08-25 16:30
288 查看
21.1 XMLHttpRequest对象
21.1.1 XHR的用法
var xhr = new XMLHttpRequest(); //接受3个参数:要发送的请求的类型("get","post"等)、请求的URL和表示是否异步发送请求的布尔值 xhr.open("get","example.php",false); //接受一个参数:即要作为请求主体发送的数据,无则传入null xhr.send(null); 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); } } }; //接收响应之前还可以调用abort()方法来取消异步请求 xhr.abort();
在收到响应后,响应的数据会自动填充XHR对象的属性
responseText:作为响应主体被返回的文本
responseXML:如果响应的内容类型是“text/xml”或“application/xml”,这个属性中将保存包含着响应数据的XML DOM文档
status:响应的HTTP状态
statusText:HTTP状态的说明
由于内存原因,不建议重用XHR对象。
21.1.2 HTTP头部信息
setRequestHeader() 设置自定义的请求头部信息,必须在调用open()方法之后且调用send()方法之前调用getReponseHeader() 传入头部字段名称
getAllReponseHeaders()
21.1.3 GET请求
URL末尾的查询字符串必须经过正确的编码encodeURIComponent()
21.1.4 POST请求
xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);21.2 XMLHttpRequest 2级
21.2.1 FormData
var data = new FormData(); data.append("name","Nicholas"); xhr.send(data); //var form = document.getElementById("user-info"); //xhr.send(new FormData(form));
21.2.2 超时设定
略21.2.3 overrideMimeType()方法
略21.3 进度事件
loadstart,progress,error,abort,load,loadend21.3.1 load事件
略21.3.2 progress事件
略21.4 跨源资源共享
CORS定义了在必须访问跨源资源时,浏览器与服务器应该如何沟通。CORS背后的基本思想,就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或相应是应该成功,还是应该失败。在发送请求时,需要给它附加一个额外的Origin头部,其中包含请求页面的源信息(协议,域名和端口),以便服务器根据这个头部信息来决定是否给予响应。
Origin: http://www.nczonline.net
如果服务器认为这个请求可以接受,就在Access-Control-Allow-Origin头部中回发相同的源信息(如果是公共资源,可以回发*)
Access-Control-Allow-Origin: http://www.nczonline.net
如果没有这个头部,或者有这个头部但源信息不匹配,浏览器就会驳回请求。正常情况下,浏览器会处理请求。注意,请求和响应都不包含cookie信息。
其余略
21.5 其它跨域技术
21.5.1 图像Ping
var img = new Image(); img.onload = img.onerror = function(){ alert("Done!"); }; img.src = "http://www.example.com/test?name=Nicholas";
21.5.2 JSONP
function handleResponse(response){ alert(response); } var script = document.createElement("script"); script.src = "http://freegeoip.net/json/?callback=handleResponse"; document.body.insertBefore(script,document.body.firstChild);
其余略
相关文章推荐
- 《JavaScript》高级程序设计第21章:Ajax和Comet,jsonp
- Ajax与Comet-JavaScript高级程序设计第21章读书笔记(1)
- Ajax与Comet-JavaScript高级程序设计第21章读书笔记(2)
- JavaScript执行环境及作用域链(摘自JavaScript高级程序设计第三版第4.2节)
- javascript高级程序设计第三版 第8章 BOM
- JavaScript高级程序设计第三版笔记(二)
- JavaScript的Array类型基本方法(整理自JavaScript高级程序设计第三版)
- JavaScript高级程序设计第三版笔记(五)
- JS自学(一)--javaScript高级程序设计(第三版)----人民邮电出版社
- javascript高级程序设计第三版 第20章 JSON
- JavaScript总结记录3(学习JavaScript高级程序设计第三版)
- 《avascript 高级程序设计(第三版)》 ---第二章 在HTML中使用Javascript
- 读书笔记 JavaScript 高级程序设计(第三版)-- 第1章
- JavaScript高级程序设计第三版笔记(三)
- JavaScript高级程序设计(第三版)学习笔记(二)JavaScript使用
- JavaScript总结记录2(学习JavaScript高级程序设计第三版)
- JavaScript高级程序设计(第三版)学习笔记(三) JavaScript语法 草稿
- javascript高级程序设计第三版 第3章 基本概念 学习笔记
- JavaScript高级程序设计第三版笔记(四)
- JavaScript高级程序设计(第三版) 学习笔记(一)JavaScript简介