Ajax.js
( function(exports, document, undefined){"Use strict"; function Ajax(){ if(! ( This instanceofAjax))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: function(opts){ This. init.apply ( This,arguments); This. Open.call ( This); This. Send.call ( This); }, Createxmlhttprequest: function(){ varXhrTry{XHR =NewXMLHttpRequest (); }Catch(e) {Console.log (e); }returnXhr }, Initevent: function(){ var_this = This; This. Xhr.onreadystatechange = function(){ if(_this.xhr.readystate = =4&& _this.xhr.status = = $){if(_this.xhr.status = = $){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! = $) {_this.opts.error && _this.opts.error (_THIS.XHR,' ERROR '); }}}, open: function(){ if( This. Opts.type = = =' GET '|| This. Opts.type = = =' Get '){varstr = (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: function(){ if( This. Opts.type = = =' GET '|| This. Opts.type = = =' Get '){ This. Xhr.send (); }Else if( This. Opts.type = = =' POST '|| This. Opts.type = = =' Post '){varstr = (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: function(data){ if(typeofData!==' object ')returnDatavarstr ="'; for(varPropinchData) {str + =' & '+ prop +' = '+ Data[prop]; }returnStr.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
<! DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Ajax</title></head><body> <script src="Ajax.js"></script> <script> NewAjax (). Ajax ({type:' Get 'Url:' ajax.php?c=123 ',//If it is a Get method and the URL contains a parameter, its parameters are replaced by data //Data: ' c=456 ',//Data parameter format can be a string or an object //Data: {c:456},DataType:' JSON ', Async:false, Success: function(data, status, XHR){Console.log (data); }, Error: function(XHR, status){Console.log (XHR); } });NewAjax (). Ajax ({type:' Post 'Url:' ajax.php?c=123 ',//If it is a Get method and the URL contains a parameter, its parameters are replaced by dataData' c=456 ',the//data parameter format can be a string or an object //Data: {c:456},DataType:' text ', Success: function(data, status, XHR){Console.log (data); }, Error: function(XHR, status){Console.log (XHR); } });</script></body></html>
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
JavaScript encapsulates Ajax ($.ajax () method in class jquery)