Web Api · 有关AJAX
AJAX全称:Asynchronous JavaScript and XML
1. 使用XMLHttpRequest创建
function success(text) { console.log('Success:' + text); } function fail(code) { console.error('Error Code: ' + code); } // 新建XMLHttpRequest对象 var request = new XMLHttpRequest(); // 状态发生改变时,执行回调函数 request.onreadystatechange = function() { // 判断请求是否完成 if(request.readyState === 4) { // 判断响应结果 if(request.status === 200) { // 请求成功,返回响应数据 return success(request.responseText); } else { // 请求失败,返回状态码 return fail(request.status) } } else { // Http请求还在继续中... } } // 发送Http请求 request.open('GET', '/api/test'); request.send(); alert('请求已发送,请等待响应...')
要点:
- 常看浏览器是否支持XMLHttpRequest:
window. XMLHttpRequest;
- 创建XMLHttpRequest对象:
var request = new XMLHttpRequest();
XMLHttpRequest对象的常用属性:
- onreadystatechange(请求状态是否改变)
- readyState(请求状态码,4表示请求已完成)
- status(响应状态码,200表示正确响应)
- responseText(具体响应内容)
XMLHttpRequest对象的常用方法:
open()(该方法有三个参数)
- 参数1:指定请求方法(GET / POST / HEAD)
- 参数2:指定URL(注意:该URL是相对路径)
- 参数3:指定是否异步(true / false),默认为true
send()(真正发送请求,该方法有一个参数)
- 若创建的POST请求,需要传递参数body
- 若创建的GET请求,可以省略该参数,或传null
2. 使用ActiveXObject创建
// 只需要把XMLHTTPRequest()改为ActiveXObject('Microsoft.XMLHTTP')即可; var request = new ActiveXObject('Microsoft.XMLHTTP');
因为ActiveXObject对象的属性和方法和XMLHTTPRequest对象是一样的:
// 因此可以整合标准写法和低版本IE上的写法 var request; if(window.XMLHTTPRequest) { request = new XMLHTTPRequest(); } else { request = new ActiveXObject('Microsoft.XMLHTTP') }
3. 使用JQuery创建
var xhr= $.ajax('/api/test',{ dataType: 'json' }); // 不需要open() send(), 请求在创建完后即执行 // jQuery创建的xhr对象类似于一个Promise对象 xhr.done((data) => { console.log('Success: ' + JSON.stringify(data)); }).fail((xhr, status) => { console.error('Error: ' + xhr.status + ', Reason: ' + status); }).always(() => { console.log('请求完成: 无论成功或失败都会调用'); });
要点:
$.ajax()方法包含两个参数
- 参数1:请求URL;
- 参数2:一个可选的setting对象;
setting配置
- async:是否为异步请求,缺省为true;
- method:http请求方法,缺省为'GET',还可设为'POST','PUT';
- headers:额外的http请求头,需为object对象;
- data:发送的数据,可以为字符串、数组或对象;
- contentType:发送POST请求的格式,缺省为'application/x-www-form-urlencoded',也可设为'text/plain'、'application/json'等;
- dataType:接受数据的格式,可以为'html'、'json'、'text'等,缺省值根据contentType自动判定;
jQuery ajax语法糖:
$.get():发送一个get请求,第二个参数可以为一个object,jq会自动拼接为string
$.get('api/test',{ name: 'huang xin', age: 18 }) // 等价于 /api/test?name=huang%xin&age=18$.post():发送一个post请求,第二个参数缺省被序列化application/x-www-form-urlencoded
$.post('api/test',{ name: 'huang xin', age: 18 }) // 以 name=huang%xin&age=18 作为body发送post请求- $.getJSON():发送一个get请求,并返回一个JSON对象;
4. 使用promise创建
// ajax将返回promise对象 function ajax(method, url, data) { let request = new XMLHttpRequest(); return new Promise((resolve,reject) => { request.onreadystatechange = () => { if(request.readyState === 4) { if(request.status === 200) { resolve(request.responseText); } else { reject(request.status); } } } request.open(method,url); request.send(data); }); } var p = ajax('GET','/api/test'); p.then((text) => { // ajax成功,获得响应内容; console.log('Success: ' + text); }).catch((code) => { // ajax失败,获得状态码; console.error('Error Code: ' + code); })
相关推荐
jiaguoquan00 2020-07-07
坚持着执着 2020-06-05
zhaolisha 2020-06-12
knightwatch 2020-04-25
zhaolisha 2020-01-11
zhaolisha 2019-12-29
wanghongsha 2019-12-06
小小大人物 2014-01-19
loopstang 2014-01-11
roodyszz0 2019-11-17
81493369 2019-11-04
Liuzhiqianblog 2019-11-03
用不完的好奇心 2019-10-26
青菜萝卜白菜 2019-07-03
荒唌Blog 2017-12-18
无材可去补苍天 2019-06-12
HAcSeeking 2018-11-05
81530694 2013-03-14