AJAX的js原生封装
把get同步请求、get异步请求、post同步请求、post异步请求进行封装到一个函数进行调用
- ajax.js
/**
* 请求的方式: get/post
* 请求的URL
* 查询字段: key=value&key=value&k=v
* 请求成功之后的回调函数
*
* 请求失败之后的回调函数
* 是否异步
*/
function selfAJAX(type, URL, searchStr, successFun, failFun, isAsync) {
// 1, 创建网络请求对象
var xhr;
if (XMLHttpRequest) {
// IE 7+ 和主流浏览器
xhr = new XMLHttpRequest();
} else {
// IE 5, 6
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
// 2, 监听网络请求状态
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
// 请求成功
successFun(xhr.responseXML || xhr.responseText);
} else {
// 请求失败
failFun('请求失败');
}
}
}
// 3, 配置请求
var url;
url = type.toLowerCase() == 'get' ? URL + '?' + searchStr : URL;
// if (!(isAsync == false || isAsync == true)) {
// isAsync = true;
// }
if (typeof(isAsync) == 'undefined') {
isAsync = true;
}
xhr.open(type, url, isAsync);
// 4, 发送请求
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send(type.toLowerCase() == 'get' ? null : searchStr);
}
- ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02验证自己封装的ajax</title>
</head>
<body>
<button id="getSync">GET 同步请求</button>
<button id="getAsync">GET 异步请求</button>
<button id="postSync">POST 同步请求</button>
<button id="postAsync">POST 异步请求</button>
</body>
<!-- 引入自己封装的 ajax -->
<script src="./js/ajax.js"></script>
<script>
/**
* AJAX: 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
*
*/
var getSync = document.getElementById('getSync');
var getAsync = document.getElementById('getAsync');
var postSync = document.getElementById('postSync');
var postAsync = document.getElementById('postAsync');
// get 同步请求
getSync.onclick = function() {
selfAJAX('get', 'http://api.tianapi.com/txapi/worldtime/index', 'key=b3611e69be17f1fb021d4a30d80addc5&city=上海', function(rel) {
console.log(rel);
}, function(err) {
console.log(err);
}, false);
}
// get 异步请求
getAsync.onclick = function() {
selfAJAX('get', 'http://api.tianapi.com/txapi/worldtime/index', 'key=b3611e69be17f1fb021d4a30d80addc5&city=上海', function(rel) {
console.log(rel);
}, function(err) {
console.log(err);
});
}
// post 同步请求
postSync.onclick = function() {
selfAJAX('post', 'http://api.tianapi.com/txapi/worldtime/index', 'key=b3611e69be17f1fb021d4a30d80addc5&city=上海', function(rel) {
console.log(rel);
}, function(err) {
console.log(err);
}, false);
}
// post 异步请求
postAsync.onclick = function() {
selfAJAX('post', 'http://api.tianapi.com/txapi/worldtime/index', 'key=b3611e69be17f1fb021d4a30d80addc5&city=上海', function(rel) {
console.log(rel);
}, function(err) {
console.log(err);
});
}
</script>
</html>