jQuery+ajax功能實現
- php中世界最好的语言原創
- 2018-04-24 15:04:371461瀏覽
這次帶給大家jQuery ajax功能實現，jQuery ajax功能實現的注意事項有哪些，下面就是實戰案例，一起來看一下。
實作功能
由於jq中的ajax方法是用了內建的deferred模組，是Promise模式的一種實現，而我們這裡沒有講過，所以我們就不使用這一模式啦。
我們只定義一個ajax方法，他可以簡單的get，post，jsonp請求就可以啦~~
var ajax = function () {
// 做一些初始化，定义一些私有函数等
return function () {
// ajax主体代码
}
}()
ajax({
url: myUrl,
type: 'get',
dataType: 'json',
timeout: 1000,
success: function (data, status) {
console.log(data)
},
fail: function (err, status) {
console.log(err)
}
})
我們的ajax方法最後實現的功能如上所示，非常類似於jq。那我們還在等什麼，開始吧。
整體思路
我們的ajax方法需要傳遞一個物件進去，這個物件中我們可以定義一些我們希望的屬性，我們就必須初始一下各種屬性
//默认请求参数
var _options = {
url: null, // 请求连接
type: 'GET', // 请求类型
data: null, // post时请求体
dataType: 'text', // 返回请求的类型，有text/json两种
jsonp: 'callback', // jsonp请求的标志，一般不改动
jsonpCallback: 'jsonpCallback', //jsonp请求的函数名
async: true, // 是否异步
cache: true, // 是否缓存
timeout:null, // 设置请求超时
contentType: 'application/x-www-form-urlencoded',
success: null, // 请求成功回调函数
fail: null // 请求失败回调
}
以上我們定義了一大串請求有關的數據，接下來我們就開始ajax主體函數的書寫，現在的ajax方法是這樣了
var ajax = function () {
//默认请求参数
var _options = {
url: null,
type: 'GET',
data: null,
dataType: 'text',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
async: true,
cache: true,
timeout:null,
contentType: 'application/x-www-form-urlencoded',
success: null,
fail: null
}
// ...
return function (options) {
// ...
}
}()
我們可以想一下，ajax方法傳遞一個物件進來，我們是不是需要把我們設定的這個物件上的屬性來覆蓋掉初始化_options上面的那些屬性呢，肯定需要。那下面我們先寫一個簡單的繼承，如下：
var ajax = function () {
//默认请求参数
var _options = {
url: null,
type: 'GET',
data: null,
dataType: 'text',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
async: true,
cache: true,
timeout:null,
contentType: 'application/x-www-form-urlencoded',
success: null,
fail: null
}
// 内部使用的继承方法
var _extend = function(target,options) {
if( typeof target !== 'object' || typeof options !== 'object' ) {
return;
}
var copy ,clone, name;
for( name in options ) {
if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
target[name] = options[name];
}
}
return target;
};
// ...
return function (options) {
// 没有传参或者没有url，抛出错误
if( !options || !options.url ) {
throw('参数错误！');
}
// 继承操作
options.type = options.type.toUpperCase();
_extend(options,_options);
// ...
}
}()
這個繼承方法，我們是把初始化的_options繼承到了options，為什麼呢？因為我們這個_options物件不在ajax方法內部，我們需要使用它，但我們不能改變他，如果改變了他，下一次使用ajax方法將會崩潰。因此，我們緊緊是把配置的options物件沒有的屬性設定為初始值。
下面，我們就要發送請求了麼？等等！好像jsonp請求不是xhr請求啊，他好像是將請求url當做script標籤的src值插入到頁面body中去實現的，哦，對了，我們先把jsonp請求處理一下再開始建立xhr請求的程式碼吧。
var ajax = function () {
//默认请求参数
var _options = {
url: null,
type: 'GET',
data: null,
dataType: 'text',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
async: true,
cache: true,
timeout:null,
contentType: 'application/x-www-form-urlencoded',
success: null,
fail: null
}
// 内部使用的继承方法
var _extend = function(target,options) {
if( typeof target !== 'object' || typeof options !== 'object' ) {
return;
}
var copy ,clone, name;
for( name in options ) {
if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
target[name] = options[name];
}
}
return target;
};
// jsonp处理函数
function _sendJsonpRequest(url,callbackName,succCallback) {
var script = document.createElement('script');
script.type="text/javascript";
script.src=url;
document.body.appendChild(script);
// 如果用户自己定义了回调函数，就用自己定义的，否则，调用success函数
window[callbackName] = window[callbackName] || succCallback;
}
// ...
return function (options) {
// 没有传参或者没有url，抛出错误
if( !options || !options.url ) {
throw('参数错误！');
}
// 继承操作
options.type = options.type.toUpperCase();
_extend(options,_options);
/*jsonp部分，直接返回*/
if( options.dataType === 'jsonp' ) {
var jsonpUrl = options.url.indexOf('?') > -1 ? options.url: options.url +
'?' + options.jsonp+ '=' + options.jsonpCallback;
return _sendJsonpRequest(jsonpUrl,options.jsonpCallback,options.success);
}
// ...
}
}()
我們定義了一個_sendJsonpRequest函數，這個函數接收三個參數，第一個是jsonpUrl，第二個是jsonp的回呼函數名，第三個是成功回呼函數，我們在這個函數內建立一個src為jsonpUrl的script元素插入到body中，同時，確定了回調函數（如果我們定義了jsonpCallback函數就調用它，如果沒有就調用success回調，一般情況我們不去定義全局的jsonpCallback函數而傳遞success回呼來完成jsonp請求）。
好，處理好jsonp請求後，我們開始處理xhr請求了。
var ajax = function () {
//默认请求参数
var _options = {
url: null,
type: 'GET',
data: null,
dataType: 'text',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
async: true,
cache: true,
timeout:null,
contentType: 'application/x-www-form-urlencoded',
success: null,
fail: null
}
// 内部使用的继承方法
var _extend = function(target,options) {
if( typeof target !== 'object' || typeof options !== 'object' ) {
return;
}
var copy ,clone, name;
for( name in options ) {
if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
target[name] = options[name];
}
}
return target;
};
// jsonp处理函数
function _sendJsonpRequest(url,callbackName,succCallback) {
var script = document.createElement('script');
script.type="text/javascript";
script.src=url;
document.body.appendChild(script);
// 如果用户自己定义了回调函数，就用自己定义的，否则，调用success函数
window[callbackName] = window[callbackName] || succCallback;
}
// json转化为字符串
var _param = function(data) {
var str = '';
if( !data || _empty(data)) {
return str;
}
for(var key in data) {
str += key + '='+ data[key]+'&'
}
str = str.slice(0,-1);
return str;
}
//判断对象是否为空
var _empty = function(obj) {
for(var key in obj) {
return false;
}
return true;
}
// ...
return function (options) {
// 没有传参或者没有url，抛出错误
if( !options || !options.url ) {
throw('参数错误！');
}
// 继承操作
options.type = options.type.toUpperCase();
_extend(options,_options);
/*jsonp部分，直接返回*/
if( options.dataType === 'jsonp' ) {
var jsonpUrl = options.url.indexOf('?') > -1 ? options.url: options.url +
'?' + options.jsonp+ '=' + options.jsonpCallback;
return _sendJsonpRequest(jsonpUrl,options.jsonpCallback,options.success);
}
//XMLHttpRequest传参无影响
var xhr = new (window.XMLHttpRequest || ActiveXObject)('Microsoft.XMLHTTP');
// get搜索字符串
var search = '';
// 将data序列化
var param= _param(options.data)
if( options.type === 'GET' ) {
search = (options.url.indexOf('?') > -1 ? '&' : '?') + param;
if(!options.cache) {
search += '&radom='+Math.random();
}
param = null;
}
// ...
}
}()
首先，相容ie建立xhr對象，XMLHttpRequest建構子傳遞參數是無影響，然後我們定義了兩個輔助變數：search、param，前者用於get請求的查詢字符串，後者用於post請求的send內容，我們定義了一個_param方法來講物件轉換為send方法參數的模式，就如你看到的那樣，下面我們做了get與post之間合理的search、param的賦值工作。接下來我們就可以發送請求書寫最令人興奮的內容了。
最終的程式碼如下
;
var ajax = function () {
//默认请求参数
var _options = {
url: null,
type: 'GET',
data: null,
dataType: 'text',
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',
async: true,
cache: true,
timeout:null,
contentType: 'application/x-www-form-urlencoded',
success: null,
fail: null
}
// json转化为字符串
var _param = function(data) {
var str = '';
if( !data || _empty(data)) {
return str;
}
for(var key in data) {
str += key + '='+ data[key]+'&'
}
str = str.slice(0,-1);
return str;
}
//判断对象是否为空
var _empty = function(obj) {
for(var key in obj) {
return false;
}
return true;
}
var _extend = function(target,options) {
if( typeof target !== 'object' || typeof options !== 'object' ) {
return;
}
var copy ,clone, name;
for( name in options ) {
if(options.hasOwnProperty(name) && !target.hasOwnProperty(name)) {
target[name] = options[name];
}
}
return target;
};
// 自定义text转化json格式
var parseJSON = function(text) {
if(typeof text !== 'string') {
return;
}
if( JSON && JSON.parse ) {
return JSON.parse(text);
}
return (new Function('return '+text))();
}
// jsonp处理函数
function _sendJsonpRequest(url,callbackName,succCallback) {
var script = document.createElement('script');
script.type="text/javascript";
script.src=url;
document.body.appendChild(script);
// 如果用户自己定义了回调函数，就用自己定义的，否则，调用success函数
window[callbackName] = window[callbackName] || succCallback;
}
return function (options) {
// 没有传参或者没有url，抛出错误
if( !options || !options.url ) {
throw('参数错误！');
}
// 继承操作
options.type = options.type.toUpperCase();
_extend(options,_options);
/*jsonp部分，直接返回*/
if( options.dataType === 'jsonp' ) {
var jsonpUrl = options.url.indexOf('?') > -1 ? options.url: options.url +
'?' + options.jsonp+ '=' + options.jsonpCallback;
_sendJsonpRequest(jsonpUrl,options.jsonpCallback,options.success);
return;
}
//XMLHttpRequest传参无影响
var xhr = new (window.XMLHttpRequest || ActiveXObject)('Microsoft.XMLHTTP');
// get搜索字符串
var search = '';
// 将data序列化
var param= _param(options.data)
if( options.type === 'GET' ) {
search = (options.url.indexOf('?') > -1 ? '&' : '?') + param;
if(!options.cache) {
search += '&radom='+Math.random();
}
param = null;
}
xhr.open( options.type, options.url + search, options.async );
xhr.onreadystatechange = function() {
if( xhr.readyState == 4 ) {
if( xhr.status >= 200 && xhr.status < 300 || xhr.status == 304 ) {
var text = xhr.responseText;
// json格式转换
if(options.dataType == 'json') {
text = parseJSON(text)
}
if( typeof options.success === 'function') {
options.success(text,xhr.status)
}
}else {
if(typeof options.fail === 'function') {
options.fail('获取失败', 500)
}
}
}
}
xhr.setRequestHeader('content-type',options.contentType);
// get请求时param时null
xhr.send(param);
// 如果设置了超时，就定义
if(typeof options.timeout === 'number') {
// ie9+
if( xhr.timeout ) {
xhr.timeout = options.timeout;
}else {
setTimeout(function() {
xhr.abort();
},options.timeout)
}
}
}
}()
可以看到，我們很熟悉的xhr程式碼，在這裡，我們需要寫一個解析回傳字符串形成json格式物件的方法parseJSON，類似於jq中的parseJSON方法，如上所示。
我們還需要設定超時程式碼，如果設定了請求逾時，我們就如上定義。
注意：上面程式碼中，由於懶，設定請求頭一行並沒有判斷是否在post請求下，你可以自己設定~~~。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是jQuery+ajax功能實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：JS實作Ajax方法詳解下一篇：JS實作Ajax方法詳解