ajax封装 使用,原生javascript的ajax的简单封装及使用示例

原生javascript的ajax的简单封装及使用示例html>

Title

var Ajax = {

/**

* 初始化XMLHttpRequest 对象

* @param type

* @returns {boolean}

*/

init: function (type) {

var xhr = false;

if (window.XMLHttpRequest) {//Mozilla 浏览器

xhr = new XMLHttpRequest();

if (xhr.overrideMimeType) {//设置MiME 类别

if (type == "text") {

xhr.overrideMimeType("text/plain");

} else if (type == "xml") {

xhr.overrideMimeType("text/xml");

}

}

} else if (window.ActiveXObject) { //IE 浏览器

try {

xhr = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e) {

try {

xhr = new ActiveXObject("Microsoft.XMLHTTP");

} catch (e) {

}

}

}

return xhr;

},

/**

* 处理回调函数

* @param callBack

* @param type

* @param xhr

* @returns {*}

*/

respone: function (callBack, type, xhr) {

if (xhr.readyState == 4 && xhr.status == 200 || xhr.status == 304) {

if (type == "text") {

return callBack(xhr.responseText, xhr);

} else if (type == "xml") {

return callBack(xhr.responseXML, xhr);

}

}

},

/**

* get 方式发送请求

* @param url

* @param async

* @param callBack

* @param type

*/

get: function (url, async, callBack, type) {

var xhr = Ajax.init(type);

async = async || true;

data = data || null; // datat应为"a=a1&b=b1"这种字符串格式

callBack = callBack || function () {

};

type = type || "text";

type = type.toLowerCase();

xhr.open("GET", url, async);

xhr.onreadystatechange = function () {

return Ajax.respone(callBack, type, xhr);

};

xhr.send();

},

/**

* post 方式发送请求

* @param url

* @param async

* @param data

* @param callBack

* @param type

*/

post: function (url, data, async, callBack, type) {

var xhr = Ajax.init(type);

async = async || true;

data = data || null; // datat应为"a=a1&b=b1"这种字符串格式

callBack = callBack || function () {

};

type = type || "text";

type = type.toLowerCase();

xhr.open("POST", url, async);

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xhr.onreadystatechange = function () {

return Ajax.respone(callBack, type, xhr);

};

xhr.send(data);

},

}

//使用

function sendRequest() {

//Ajax.get("ajax.php", true, callSendRequest, "text");

var data = "name=2018&age=12";

//Ajax.post("ajax.php", data);

Ajax.post("ajax.php", data, true, callSendRequest, "text");

}

function callSendRequest(data, obj) {

document.getElementById("div").innerHTML = data;

}