ajax插件：
ajax_tool.js
function ajax_tool(url,data,method,success) {
// 异步对象
var ajax = new XMLHttpRequest();
// get 跟post 需要分别写不同的代码
if (method=='get') {
// get请求
if (data) {
// 如果有值
url+='?';
url+=data;
}else{
}
// 设置 方法 以及 url
ajax.open(method,url);
// send即可
ajax.send();
}else{
// post请求
// post请求 url 是不需要改变
ajax.open(method,url);
// 需要设置请求报文
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 判断data send发送数据
if (data) {
// 如果有值 从send发送
ajax.send(data);
}else{
// 木有值 直接发送即可
ajax.send();
}
}
// 注册事件
ajax.onreadystatechange = function () {
// 在事件中 获取数据 并修改界面显示
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);
// 将 数据 让 外面可以使用
// return ajax.responseText;
// 当 onreadystatechange 调用时 说明 数据回来了
// ajax.responseText;
// 如果说 外面可以传入一个 function 作为参数 success
success(ajax.responseText);
}
}
}
ajax.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="封装" id="#btn">
</body>
</html>
<script type="text/javascript" src='ajax_tool.js'></script>
<script type="text/javascript">
document.querySelector('input').οnclick=function(){
var backData = ajax_tool('ajax.php','name=gaoyali','post',function(data){
console.log(data);
});
// 测试
console.log(backData);
}
// console.log(data);
</script>
ajax.php:
<?php
echo 'woaini';
?>
但是你发现如果你想要调用这个方法还得查看参数顺序，这是不好的，进一步优化：
function ajax_tool_pro(option) {
// 异步对象
var ajax = new XMLHttpRequest();
// get 跟post 需要分别写不同的代码
if (option.method=='get') {
// get请求
if (option.data) {
// 如果有值
url+='?';
url+=option.data;
}else{
}
// 设置 方法 以及 url
ajax.open(option.method,option.url);
// send即可
ajax.send();
}else{
// post请求
// post请求 url 是不需要改变
ajax.open(option.method,option.url);
// 需要设置请求报文
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 判断data send发送数据
if (option.data) {
// 如果有值 从send发送
ajax.send(option.data);
}else{
// 木有值 直接发送即可
ajax.send();
}
}
// 注册事件
ajax.onreadystatechange = function () {
// 在事件中 获取数据 并修改界面显示
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);
// 将 数据 让 外面可以使用
// return ajax.responseText;
// 当 onreadystatechange 调用时 说明 数据回来了
// ajax.responseText;
// 如果说 外面可以传入一个 function 作为参数 success
option.success(ajax.responseText);
}
}
}
版权声明：本文为irouduoduo原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。