/* 封裝ajax函數
例子:
ajax({
url: "./TestXHR.aspx", //請求地址
type: "POST", //請求方式
data: { name: "super", age: 20 }, //請求參數
dataType: "json",
success: function (response, xml) {
// 此處放成功后執行的代碼
},
fail: function (status) {
// 此處放失敗后執行的代碼
}
});
*/
export function ajax( options ) {
options = options || {};
options.type = ( options.type || "GET" ).toUpperCase();
options.dataType = options.dataType || "json";
let params = formatParams( options.data );
//創建 - 非IE6 - 第一步
if( window.XMLHttpRequest ) {
let xhr = new XMLHttpRequest();
} else { //IE6及其以下版本瀏覽器
let xhr = new ActiveXObject( "Microsoft.XMLHTTP" );
}
//接收 - 第三步
xhr.onreadystatechange = function () {
if( xhr.readyState == 4 ) {
let status = xhr.status;
if( status >= 200 && status < 300 ) {
options.success && options.success( xhr.responseText, xhr.responseXML );
} else {
options.fail && options.fail( status );
}
}
}
//連接 和 發送 - 第二步
if( options.type == "GET" ) {
xhr.open( "GET", options.url + "?" + params, true );
xhr.send( null );
} else if ( options.type == "POST" ) {
xhr.open( "POST", options.url, true );
//設置表單提交時的內容類型
xhr.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
xhr.send( params );
}
}
/* 封裝 jsonp 函數
*/
export function jsonp( options ) {
options = options || {};
if( !options.url || !options.callback ) {
throw new Error( "參數不合法" );
}
//創建 script 標簽并加入到頁面中
let callbackName = ( "jsonp_" + Math.random() ).replace( ".", "" );
let oHead = document.getElementsByTagName("head")[0];
options.data[options.callback] = callbackName;
let params = formatParams( options.data );
let oS = document.createElement( "script" );
oHead.appendChild( oS );
//創建jsonp回調函數
window[callbackName] = function( res ) {
oHead.removeChild( oS );
clearTimeout( oS.timer );
window[callbackName] = null;
options.success && options.success( res );
};
//發送請求
oS.src = options.url + "?" + params;
//超時處理
if( options.time ) {
oS.timer = setTimeout(function() {
window[callbackName] = null;
oHead.removeChild( oS );
options.fail && options.fail({ message: "超時" });
}, options.time );
}
}
//格式化參數
function formatParams( data ) {
let arr = [];
for( let name in data ) {
arr.push( encodeURIComponent(name) + "=" + encodeURIComponent(data[name]) );
}
arr.push( ("t=" + Math.random()).replace( ".", "" ) );
return arr.join( "&" );
}
原生js實現ajax、jsonp
最后編輯于 :
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
- 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
- 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
推薦閱讀更多精彩內容
- 一、JS原生Ajax ajax:一種請求數據的方式,不需要刷新整個頁面;ajax的技術核心是 XMLHttpReq...
- 相信大多數前端開發者在需要與后端進行數據交互時,為了方便快捷,都會選擇JQuery中封裝的AJAX方法,但是有些時...
- 前言 眾所周知,jquery在我們日常開發中的使用頻率非常高,與js相比,我們省去了冗長的獲取元素的代碼,不用考慮...
- @拭目以待:首發于原生js實現ajax及get post方法 ajax原生實現,含 post與get方法。原碼如下...