JavaScript如何实现原生XMLHttpRequest？

本文共计382个文字，预计阅读时间需要2分钟。

使用原生Ajax API的简单示例：

javascript// 使用原生Ajax APIfunction simpleAjax(method, url, data, callback) { var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function () { if (xhr.readyState===4) { // 尝试回调 callback(xhr.responseText); } }; xhr.open(method, url, true); xhr.send(data);}

Use of native ajax api

/** * Use of native ajax api */ // simple ajax with timeout function simpleAjax(method, url, data, callback) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { // try-catch is necessary when you use timeout try { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { callback(xhr.responseText); } } catch (e) {} } }; xhr.open(method, url, true); xhr.ontimeout = function () { // do something here }; // if method is get, you should set data null xhr.send(data); } // encapsulation of get method function get(url, headers, params, callback) { header = header || {}; params = params || {}; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { callback(xhr.responseText); } } }; var queryList = []; for (var p in params) { if (params.hasOwnProperty(p)) { queryList.push(p + '=' + params[p]); } } var query = queryList.length ? '?' + queryList.join('&') : ''; xhr.open('get', url + query, true); for (var h in headers) { if (headers.hasOwnProperty(h)) { xhr.setRequestHeader(h, headers[h]); } } xhr.send(null); } // encapsulation of post method function post(url, headers, params, callback) { header = header || {}; params = params || {}; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { callback(xhr.responseText); } } }; xhr.open('post', url, true); for (var h in headers) { if (headers.hasOwnProperty(h)) { xhr.setRequestHeader(h, headers[h]); } } var data = new FormData(); for (var p in params) { if (params.hasOwnProperty(p)) { data.append(p, params[p]); } } xhr.send(data); // var form = document.getElementById('user-info'); // xhr.send(new FormData(form)); } /** * load event * process-flow: * loadStart -> * progress(one or more) * -> [error | abort | load](one of them) * -> loaded */ function loadProgress(url, callback) { var xhr = new XMLHttpRequest(); xhr.onload = function () { if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) { callback(xhr.responseText); } }; xhr.onprogress = function (evt) { if (evt.lengthComputable) { console.log(evt.position / evt.totalSize + ' %'); } }; xhr.open('get', url, true); xhr.send(null); }