## AJAX封裝 ``` /* * Name: xhr,AJAX封裝函數 * Description: 一個ajax調用封裝類,仿jquery的ajax調用方式 * Author:Marvin * url:請求地址.可以不填,請求就不會發起,但如果不填又強行send,出了錯不怪我 * method: ‘GET'或'POST',全大寫,默認GET * data: 要附帶發送的數據,格式是一個object * async: 是否異步,默認true * type: 返回的數據類型,只有responseText或responseXML,默認responseText * complete: 請求完成時執行的函數 * success: 請求成功時執行的函數 * error: 請求失敗時執行的函數 */ var xhr = function () { var ajax = function () { return ('XMLHttpRequest' in window) ? function () { return new XMLHttpRequest(); } : function () { return new ActiveXObject("Microsoft.XMLHTTP"); } }(), formatData= function (fd) { var res = ''; for(var f in fd) { res += f+'='+fd[f]+'&'; } return res.slice(0,-1); }, AJAX = function(ops) { var root = this, req = ajax(); root.url = ops.url; root.type = ops.type || 'responseText'; root.method = ops.method || 'GET'; root.async = ops.async || true; root.data = ops.data || {}; root.complete = ops.complete || function () {}; root.success = ops.success || function(){}; root.error = ops.error || function (s) { alert(root.url+'->status:'+s+'error!')}; root.abort = req.abort; root.setData = function (data) { for(var d in data) { root.data[d] = data[d]; } } root.send = function () { var datastring = formatData(root.data), sendstring,get = false, async = root.async, complete = root.complete, method = root.method, type=root.type; if(method === 'GET') { root.url+='?'+datastring; get = true; } req.open(method,root.url,async); if(!get) { req.setRequestHeader("Content-type","application/x-www-form-urlencoded"); sendstring = datastring; } //在send之前重置onreadystatechange方法,否則會出現新的同步請求會執行兩次成功回調(chrome等在同步請求時也會執行onreadystatechange) req.onreadystatechange = async ? function () { // console.log('async true'); if (req.readyState ==4){ complete(); if(req.status == 200) { root.success(req[type]); } else { root.error(req.status); } } } : null; req.send(sendstring); if(!async) { //console.log('async false'); complete(); root.success(req[type]); } } root.url && root.send(); }; return function(ops) {return new AJAX(ops);} }(); ```