JS示例12-ajax请求封装
2019-04-01 本文已影响0人
微小码
一、知识要点
1、如何封装一个ajax请求
2、如何处理成功失败回调
二、源码参考
image.png
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>封装ajax请求</title>
<script src="new_ajax.js"></script>
<script>
window.onload = function () {
var oBtn = document.getElementById('btn1');
var div1 = document.getElementById('div1');
oBtn.onclick = function () {
ajax('a.txt', function (str) {
div1.innerHTML = str;
});
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="读取" />
<div id="div1"></div>
</body>
</html>
function ajax(url, fnSucc, fnFaild) {
// 1.创建Ajax对象
if (window.XMLHttpRequest) {
var oAjax = new XMLHttpRequest(); // 兼容IE6以上浏览器
} else {
var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); // 兼容IE6浏览器
}
// 2.连接服务器
// open(方法, 文件名, 异步传输)
oAjax.open('GET', url, true);
// 3.发送请求
oAjax.send();
// 4.接收返回
oAjax.onreadystatechange = function () {
// oAjax.readyState // 浏览器和服务器，进行到哪一步了
if (oAjax.readyState == 4) // 读取完成
{
if (oAjax.status == 200) // 成功
{
fnSucc(oAjax.responseText);
} else {
if (fnFaild) {
fnFaild(oAjax.status);
}
}
}
};
}
