AJAX-AJAX 工具对象

更新时间:2019-12-20 15:26:18 点击次数:183次
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>

本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

  • 上一篇:HashMap源码解析
  • 下一篇:操作系统实验
  • 回到顶部
    嘿,我来帮您!