函数API的封装，仿jQuery调用请求方法
2019-04-07 本文已影响17人
CondorHero
请求结果！
一、HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数 API的封装</title>
</head>
<body>
<!-- 引包 -->
<script src = "js/myAjax.js"></script>
<script>
myAjax.get("index.php",{"xingming":"Condor","age":18},function(err,data){
if(err){
// 服务器未成功加载提示
alert(err);
}else {
// 弹出打开的内容
alert(data);
}
});
</script>
</body>
</html>
二、PHP文件
<?php
echo "你的名字是：".$_GET["xingming"]."你的年龄：".$_GET["age"];
?>
三、JS库封装
(function(){
//唯一向外暴露的顶层变量
var myAjax = window.myAjax = {};
//作者、版本号等等信息
myAjax.author = "学贤社";
myAjax.version = "1.0.0";
//myAjax对象有两个属性，get、post属性，都是函数
myAjax.get = function(URL,queryJSON,callback){
//创建xhr对象，解决兼容问题
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else {
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//结果返回之后做的事情
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status <300 || xhr.status == 304){
callback(null,xhr.responseText);
}else {
callback(new Error("服务器错误！请稍后重试！"),undefined);
}
}
}
//把JSON变成k=v&k=v形式
var querystring = querystringJSON(queryJSON);
//配置三个属性
xhr.open("get",URL + "?" + querystring,true);
//发送内容
xhr.send(null);
};
myAjax.post = function(URL,queryJSON,callback){
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else {
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status <300 || xhr.status == 304){
callback(null,xhr.responseText);
}else {
callback(new Error("服务器错误！请稍后重试！"),undefined);
}
}
}
var querystring = querystringJSON(queryJSON);
xhr.open("post",URL,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(querystring);
};
querystringJSON = function(query){
//内部函数，查询json变为查询字符串
//输入一个{"age":18,"sex":"男"}
//返回一个name=kaola&age=18&sex=%E8%C6%B6
var arr = [];
for(var k in query){
arr.push(k + "=" + encodeURIComponent(query[k]));
}
return arr.join("&");
}
}
)();
