原生javascript的ajax的简单封装及使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div" style="color:red"></div>
<input type="button" value="ajax" onclick="sendRequest()">
<script>
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);
},
}
</script>
<script>
//使用
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;
}
</script>
</body>
</html>
