本文主要跟大家分享ajax簡單封裝詳細介紹,希望能版助到大家。
ajax一般分為簡單的四部:
建立ajax物件(這裡相容ie的話要做一下處理)
連接,也就是請求物件的open方法(get和post還有點不同,get參數要放在url後面,post要設定請求頭)
發送,也就是請求物件的send函數(post參數則放在send裡面)
接收,在onreadystatechange(儲存函數或函數名,每當readyState屬性改變時,就會呼叫函數。)函數裡面處理。
還可以加上超時這些
要先判斷readyState的狀態(有四個狀態)
①: 0,請求未初始化;
②: 1,伺服器連線已建立;
③: 2,請求已接收;
④ : 3,請求處理中;
⑤: 4,請求已完成,且回應已就緒
當readyState等於4時,你又要判斷status的狀態
請求成功時status狀態200-302 ,還有304(是快取)
'use strict'; var $ = {}; $.ajax = ajax; function ajax(options) { // 解析参数 options = options || {}; if (!options.url) return; options.type = options.type || 'get'; options.timeout = options.timeout || 0; // 1 创建ajax if (window.XMLHttpRequest) { // 高级浏览器和ie7以上 var xhr = new XMLHttpRequest(); } else { //ie6,7,8 var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } // 2 连接 var str = jsonToUrl(options.data); if (options.type === 'get') { xhr.open('get', `${options.url}?${str}`, true); // 3 发送 xhr.send(); } else { xhr.open('post', options.url, true); // 请求头 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // 3 发送 xhr.send(); } // 接收 xhr.onreadystatechange = function() { // 完成 if (xhr.readyState === 4) { // 清除定时器 clearTimeout(timer); if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) { // 成功 options.success && options.success(xhr.responseText); } else { options.error && options.error( xhr.status ); } } }; // 超时 if (options.timeout) { var timer = setTimeout(function(){ alert("超时了"); xhr.abort(); // 终止 },options.timeout); } } // json转url function jsonToUrl(json) { var arr = []; json.t = Math.random(); for(var name in json) { arr.push(name + '=' + encodeURIComponent(json[name])); } return arr.join('&'); }
相關推薦:
以上是ajax簡單封裝詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!