了解XMLHttpRequest
前言最近与后端联调,后端问能不能发送get请求时,把请求参数放入请求体中,HTTP GET 请求在请求体中带参数的问题 ajax介绍AJAX不是JavaScript的规范,它只是一个哥们“发明”的缩写:Asynchronous JavaScript and XML,意思就是用JavaScript执行异步网络请求。 function success(text) { var textarea = document.getElementById('test-response-text'); textarea.value = text; } function fail(code) { var textarea = document.getElementById('test-response-text'); textarea.value = 'Error code: ' + code; } var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象 request.onreadystatechange = function () { // 状态发生变化时,函数被回调 if (request.readyState === 4) { // 成功完成 // 判断响应结果: if (request.status === 200) { // 成功,通过responseText拿到响应的文本: return success(request.responseText); } else { // 失败,根据响应码判断失败原因: return fail(request.status); } } else { // HTTP请求还在继续... } } // 发送请求: request.open('GET','/api/categories'); request.send(); alert('请求已发送,请等待响应...'); XMLHttpRequest对象Attributes
// 现代浏览器 var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象 XHR用法
xhr.open('get','/advTest',false); // 并不会真正发送请求,而只是启动一个请求以备发送 跨域相关 要发送特定请求 需要调用send()方法: xhr.open('get',false); // 并不会真正发送请求,而只是启动一个请求以备发送 xhr.send(null); xhr.send(null) send()方法必须接收一个参数,即要作为请求主体发送的数据,如果不需要发送则必须发送null,因为这个参数对浏览来说是必须的。调用send()之后请求被发送至服务器。 同步当第三个为false时发送同步请求,JavaScript代码会等到服务器响应之后在继续执行。
异步同布发送请求当然没有问题,但多数情况下, 我们还是要发送异步请求,才能让js继续执行而不必等待响应。可通过检测readyState变化 request.onreadystatechange = function () { // 状态发生变化时,函数被回调 if (request.readyState === 4) { // 成功完成 // 判断响应结果: if (request.status === 200) { // 成功,通过responseText拿到响应的文本: return success(request.responseText); } else { // 失败,根据响应码判断失败原因: return fail(request.status); } } else { // HTTP请求还在继续... } } readyState当前请求的活动阶段。
xhr.abort(); -> xhr停止触发XHR对象 HTTP头部信息每个http请求和响应都会带有相应的头部。
自定义请求头 需在open()以后,send()之前发送。 xhr.open('GET','/api/categories'); // 自定义请求头部信息 xhr.setRequextHeader('myHeader','myValue'); xhr.send(); getResponseHeader('XX') 获取请求头中特定字段 GET请求GET请求常用于向服务器查询信息。添加请求参数于url之后。 对于传入open()方法的URL末尾的查询字符的名称和值必须使用encodeURLComponent() 进行编码。 xhr.open('get','test.php?name=程心&age=24&other=AA',true); // 准备异步请求 // 添加参数工具方法 fucntion addURLParams(url,name,value) { url += (url.index('?') == -1 ? '?' : '&'); url += encodeURLComponent(name) + '=' + encodeURLComponent(value); return url; } POST请求POST常用于向服务器发送需要保存的请求。 POST请求应该将数据作为请求体的主体提交,而GET传统上不是这样 GET POST区别// post xhr.open('GET','/api/categories'); // 自定义请求头部信息 xhr.setRequextHeader('Content-Type','application/x-www-form-urlencoded'); var from = document.getElementById('user-info'); xhr.send(serialize(from)); xhr.send(); POST 消耗的资源更多, GET最快达到POST的2倍。get url长度有限制 XMLHttpRequest 2级规范化的XMLHttpRequest FromData序列化表单以及创建与表单格式相同的数据 var data = new FromData(); data.append('name','云天明'); 超时设定XHR对象 timeout属性,表示请求在等待响应多久之后停止 xhr.timeout = 1000; xhr.ontimeout = function() { console.log('超时了。。') } overrideMimeType() 方法overrideMimeType() 用于重写MIME类型。 总结由于这个疑问,借此重新学习了下ajax。url在请求头的Referer中故get请求在请求体中。 参考HTTP请求行、请求头、请求体详解 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- Oracle 按日分区表(数据仓库通常表形式)
- ruby-on-rails – Rails gem rails3-jquery-autocomplete如
- 如何在Swift 4中观察’Any’对象的关键路径
- XSD验证XML
- ruby-on-rails-3 – 在SQLite3中备份/恢复数据库的简单方法
- ORA-00257: archiver error. Connect internal only, until
- ruby-on-rails – 在Rails 4中的has_and_belongs_to_many关
- Create Oracle 12c Template Database In Silent
- 第十二章:重做日志和归档
- 在.NET中快速创建一个5GB、10GB或更大的空文件