ajax插件

来源：互联网发布：oracle数据库参数编辑：程序博客网时间：2024/05/18 02:32
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{}// 设置 方法 以及 urlajax.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 作为参数 successsuccess(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').onclick=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{}// 设置 方法 以及 urlajax.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 作为参数 successoption.success(ajax.responseText);}}}
0 0