AJAX 工具对象
ajax.js
//ajax工具对象：1.兼容问题 2.便捷问题
function Ajax(){
//1.兼容问题 xhr对象
var xhr = null;
if(window.XMLHttpRequest){//检测是否有XMLHttpRequest构造方法
//使用XMLHttpRequest构造方法创建xhr对象
xhr = new XMLHttpRequest();
}else if(window.ActiveXObject){//检测是否可以使用低版本ie的ActiveXObject
//使用ActiveXObject来创建xhr对象
//下面的数组为ie可能使用的版本名称
var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
//遍历数组测试是否可以使用
for(var i=0;i<versions.length;i++){
//尝试创建
xhr = new ActiveXObject(versions[i]);
//检测是否创建成功
if (xhr){
break;
}
}
}else{//都无法使用，就不能用ajax
return false;
}
//继续简化ajax第四步
function checkAndUse(func){
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status == 200){
//使用响应的数据
func(xhr.responseText)
}
}
}
}
//定义一个get请求的内部函数
function ajaxGET(url,callback){
//1.创建xhr对象（已经在兼容性位置解决）
//2.建立连接
xhr.open('get',url);
//3.发送数据
xhr.send(null);
//4.检测请求与响应
checkAndUse(callback);
}
//定义一个post请求的内部函数
function ajaxPOST(url,data,callback){
//1.创建xhr对象（已经在兼容性位置解决）
//2.建立连接
xhr.open('post',url);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//3.发送数据
xhr.send(data);
//4.检测请求与响应
checkAndUse(callback);
}
//返回值-2.便捷问题 (闭包实例)
return {
//ajax的功能对象
get:ajaxGET,//实现ajax的get异步传输
post:ajaxPOST//实现ajax的post异步传输
}
}
一：使用 POST 请求
post.php
<?php
//输出post请求
echo $_POST['age'];
echo "你好啊"
?>
post.html
<!doctype html>
<html>
<head>
<title>使用ajax工具对象</title>
<meta charset="utf-8">
<!--引入js文件-->
<script src="./ajax.js"></script>
</head>
<body>
<button id="btn">检测工具</button>
</body>
</html>
<script>
//添加事件
btn.onclick=function(){
//使用ajax请求服务器数据
Ajax().post('post.php','age=455',console.log)
}
</script>
二：使用 GET 请求
get.php
<?php
//输出get请求
echo $_GET['age'];
echo "你好啊"
?>
get.html
<!doctype html>
<html>
<head>
<title>使用ajax工具对象</title>
<meta charset="utf-8">
<!--引入js文件-->
<script src="./ajax.js"></script>
</head>
<body>
<button id="btn">检测工具</button>
</body>
</html>
<script>
//添加事件
btn.onclick=function(){
//使用ajax请求服务器数据
Ajax().get('post.php?age=455',console.log)
}
</script>
本站文章版权归原作者及原出处所有 。内容为作者个人观点， 并不代表本站赞同其观点和对其真实性负责，本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台，网站上部分文章为转载，并不用于任何商业目的，我们已经尽可能的对作者和来源进行了通告，但是能力有限或疏忽，造成漏登，请及时联系我们，我们将根据著作权人的要求，立即更正或者删除有关内容。本站拥有对此声明的最终解释权。
