Ajax与XMLHttpRequest随笔
1.xmlhttprequest对象
open()接收3个参数:请求类型('get'、'post')、请求的url、是否异步发送请求(true or false)。
-
send()
接受一个参数:作为请求主体要发送的数据,如果不需要发送数据,传入一个null, 以防止出现未知错误。 -
setrequestheader():
设置自定义的请求头部信息
setrequestheader()
接收两个参数:头部字段的名称和头部字段的值;调用此方法必须要在调用open()
方法之后,send()
之前。 -
getresponseheader():
获取响应信息中的某个指定头部信息
-
getallresponseheaders():
获取响应信息的所有头部信息
getresponseheader()
接收一个参数:需要知道的头部信息的名称;但w3c标准对这两个方法有限制,它们不能获取如set-cookie
、set-cookie2
等的头部信息;所以getallresponseheaders()
只能拿到限制以外(即被视为safe
)的头部信息,而不是全部;而调用getresponseheader(string)
方法时,传入的参数必须是限制以外的头部名称,否则会报错。 -
xhr对象属性:
-
responsetext:作为响应主体被返回的文本。
-
responsexml:如果相应的内容类型为xml, 此属性保存响应数据的xml dom文档; 如果为非xml数据,则为null。
-
status: 响应的http状态。
-
statustext:http的状态说明。
-
readystate:表示请求/响应过程的阶段
-
0:未初始化;未调用
open()
方法。 -
1:启动;已调用
open()
方法,但未调用send()
方法。 -
2:发送;已调用
send()
方法,但未接收到响应。 -
3:接收;已接收到部分响应数据。
-
4:完成;已接收到所有响应数据。
备注:
readystate
的值每改变一次,都会触发readystatechange
事件。
-
-
2.创建具有兼容性的xmlhttprequest对象
1 function getxhr() { 2 let xhr = null; 3 if (window.xmlhttprequest) { 4 //ie10+以及其他主流浏览器 5 xhr = new xmlhttprequest(); 6 7 } else if (window.activexobject) { 8 //ie9及以下、msxml3、msxml2.6及以下 9 let versions = [ 10 'msxml2.xmlhttp.6.0', 11 'msxml2.xmlhttp3.0', 12 'msxml2.xmlhttp', 13 'microsoft.xmlhttp' 14 ]; 15 for (let i=0; i<versions.length; i++) { 16 try { 17 //创建成功结束循环,创建失败抛出错误 18 xhr = new activexobject(versions[i]); 19 break; 20 } catch (e) { 21 //skip_跳过 22 } 23 } 24 25 } 26 return xhr; 27 }
3.封装ajax请求数据函数
1 function ajax(opts) { 2 let xhr = getxhr(); 3 if (xhr) { 4 //检查参数 5 let async = opts.async === undefined ? true:opts.async; 6 let method = opts.method.touppercase(); 7 let data = opts.data === undefined ? null:opts.data; 8 9 xhr.open(method, opts.url, async); 10 11 //回调函数 12 xhr.onreadystatechange = function() { 13 if (xhr.readystate == 4) { 14 let status = xhr.status; 15 if (status >= 200 && status < 300 || status == 304) { 16 opts.success && opts.success(xhr.responsetext, xhr.responsexml); 17 18 } else { 19 opts.fail && opts.fail(status); 20 } 21 } 22 } 23 24 if (method == 'post') { 25 xhr.setrequestheader('content-type', 'application/x-www-form-urlencoded'); 26 } 27 xhr.send(data); 28 29 } else { 30 let error = { 31 message: 'not support ajax.', 32 code: -1; 33 } 34 opts.fail && opts.fail(error); 35 } 36 } 37 38 //使用 39 ajax({ 40 url: /example, 41 method: post, 42 data: {...}, 43 success: function(){...}, 44 fail: function(){...}, 45 async:true 46 });
4.备注
最近在看网页向服务端请求数据相关的内容,忽然记起自己还有个blog,于是把markdown中的笔记改改发上来,太懒了,xmlhttprequest level 2就不写了,现在应该都是用fetch()了。
5.参考
*上的答案:。
上一篇: IE浏览器 div或者其他容器的height属性无效 滚动条问题解决办法
下一篇: 昨晚