JavaScript封装Ajax(类JQuery中$.ajax()方法)

ajax.js

(;{if(!(this instanceof Ajax)) return;return this;}Ajax.prototype = {init: function(opts){opts = opts || {};this.opts = opts;this.opts.type = opts.type || ‘get’;this.opts.url = opts.url || ”;this.opts.data = opts.data || ”;this.opts.dataType = opts.dataType || ‘text’;this.opts.async = opts.async || true;this.opts.success = opts.success || null;this.opts.error = opts.error || null;this.xhr = this.createXMLHttpRequest.call(this);this.initEvent.call(this);return this;},ajax: .init.apply(this, arguments);this.open.call(this);this.send.call(this);},createXMLHttpRequest: xhr;try{xhr = new XMLHttpRequest();}catch(e){console.log(e);}return xhr;},initEvent: _this = this;(_this.xhr.readyState == 4 && _this.xhr.status == 200){if(_this.xhr.status == 200){if(_this.opts.dataType === ‘text’ || _this.opts.dataType === ‘TEXT’){_this.opts.success && _this.opts.success(_this.xhr.responseText, ‘success’, _this.xhr);}else if(_this.opts.dataType === ‘xml’ || _this.opts.dataType === ‘XML’){_this.opts.success && _this.opts.success(_this.xhr.responseXML, ‘success’, _this.xhr);}else if(_this.opts.dataType === ‘json’ || _this.opts.dataType === ‘JSON’){_this.opts.success && _this.opts.success(JSON.parse(_this.xhr.responseText), ‘success’, _this.xhr);}}else if(_this.xhr.status != 200){_this.opts.error && _this.opts.error(_this.xhr, ‘error’);}}}},open: (this.opts.type === ‘GET’ || this.opts.type === ‘get’){var str = (typeof this.opts.data === ‘string’) && this.opts.data || this.objectToString.call(this, this.opts.data),url = (str === ”) && this.opts.url || (this.opts.url.split(‘?’)[0] + ‘?’ + str);this.xhr.open(this.opts.type, url, this.opts.async);}else if(this.opts.type === ‘POST’ || this.opts.type === ‘post’){this.xhr.open(this.opts.type, this.opts.url.split(‘?’)[0], this.opts.async);}return this;},send: (this.opts.type === ‘GET’ || this.opts.type === ‘get’){this.xhr.send();}else if(this.opts.type === ‘POST’ || this.opts.type === ‘post’){var str = (typeof this.opts.data === ‘string’) && this.opts.data || this.objectToString.call(this, this.opts.data);this.xhr.setRequestHeader(‘content-type’, ‘application/x-www-form-urlencoded’);this.xhr.send(str);}},objectToString: (typeof data !== ‘object’) return data;var str = ”;for(var prop in data){str += ‘&’ + prop + ‘=’ + data[prop];}return str.slice(1);}}exports.Ajax = Ajax;})(window, document);

ajax.php

<?php$c = $_REQUEST[‘c’];$arr = array(‘a’=>2014,’b’=>array(‘c’=>$c));echo json_encode($arr);

index.html

==>=><script>new Ajax().ajax({type: ‘get’,url: dataType: ‘json’,async: false,success: function(data, status, xhr){console.log(data);},error: function(xhr, status){console.log(xhr);}});new Ajax().ajax({type: ‘post’,url: ‘ajax.php?c=123’,// 如果是get方式并且url包含参数,,其参数会被data替代data: ‘c=456’,// data参数格式可以为字符串或对象// data: {c: 456},dataType: ‘text’,success: function(data, status, xhr){console.log(data);},error: function(xhr, status){console.log(xhr);}});>

先知三日,富贵十年。

JavaScript封装Ajax(类JQuery中$.ajax()方法)

相关文章:

你感兴趣的文章:

标签云: