你的位置:首页 > Java教程

[Java教程]JavaScript封装Ajax(类JQuery中$.ajax()方法)


ajax.js

(function(exports, document, undefined){  "use strict";  function Ajax(){    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.createthis);      this.initEvent.call(this);      return this;    },    ajax: function(opts){      this.init.apply(this, arguments);      this.open.call(this);      this.send.call(this);    },    createfunction(){      var xhr;      try{        xhr = new catch(e){        console.log(e);      }      return xhr;    },    initEvent: function(){      var _this = this;      this.xhr.onreadystatechange = function(){        if(_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 === '''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: function(){      if(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: function(){      if(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: function(data){      if(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

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>ajax</title></head><body>  <script src="ajax.js"></script>  <script>    new Ajax().ajax({      type: 'get',      url: 'ajax.php?c=123',   // 如果是get方式并且url包含参数,其参数会被data替代      // data: 'c=456',      // data参数格式可以为字符串或对象      // data: {c: 456},      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);      }    });  </script></body></html>