HTML：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <h2>测试工具函数</h2> <input class='get' type="button" value='测试get'> <input class='post' type="button" value='测试post'> <input class='ajax_test' type="button" value='测试ajax_test'> <input class='ajax' type="button" value='测试ajax'> <input class='json' type="button" value='获取json'> <input class='xml' type="button" value='获取xml'> </body> </html> <!-- 导入 js --> <script src="./ajax.js"></script> <!-- 自己的js --> <script> // get请求 document.querySelector('.get').onclick = function(){ // 直接调用 get方法 //function get(url, data, success) get('../00.backData/01.backSendData.php','name=jack&friend=rose',function(data){ console.log(data); }) } // post请求 document.querySelector('.post').onclick = function(){ // 直接调用 get方法 //function post(url, data, success) post('../00.backData/01.backSendData.php','name=rose&friend=青椒',function(data){ alert(data); }) } // ajax 自选get post document.querySelector('.ajax_test').onclick = function(){ // ajax_test('../00.backData/01.backSendData.php','get','name=葫芦娃&food=胡萝卜',function(data){ // alert('葫芦娃'); // alert(data); // }) ajax_test('../00.backData/01.backSendData.php','post','name=蛇精&food=爷爷',function(data){ alert('蛇精'); alert(data); }) } // ajax 只传递一个参数 document.querySelector('.ajax').onclick = function(){ ajax({ type:'get', data:'skill=爱吃西兰花和芹菜蹦蹦跳跳好可爱&name=兔子', success:function(data){ document.body.innerHTML = data; }, url:'../00.backData/01.backSendData.php' }); } // 获取json document.querySelector('.json').onclick = function(){ ajax({ type:'get', url:'../00.backData/backJSON.php', success:function(data){ console.log(data); } }) } // 获取 xml document.querySelector('.xml').onclick = function(){ ajax({ type:'post', url:'../00.backData/backXML.php', success:function(data){ console.log(data); } }) } </script>
JS封装：
/** * ajax工具函数-get * @param {*} url * @param {*} data(key1=value1&key2=value2) * @param {*} success */ function get(url, data, success) { var xhr = new XMLHttpRequest(); if (data) { url += '?'; url += data; } xhr.open('get', url); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { success(xhr.responseText); } } xhr.send(null); } /** * ajax工具函数-post * @param {*} url * @param {*} data (key1=value1&key2=value2) * @param {*} success */ function post(url, data, success) { var xhr = new XMLHttpRequest(); xhr.open('post', url); if (data) { xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); } xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); success(xhr.responseText); } } xhr.send(data); } /** * 参数越来越多之后 用户如果要传递参数 必须遵循 * @param {*} url * @param {*} type * @param {*} data * @param {*} success */ function ajax_test(url, type, data, success) { var xhr = new XMLHttpRequest(); // 如果是get 并且有数据 if (type == 'get' && data) { url += '?'; url += data; data = null; // 这样最后直接send data即可 } xhr.open(type, url); // post请求 并且有数据 if (type == 'post' && data) { xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); } xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { success(xhr.responseText); } } xhr.send(data); } // 只传递一个参数 // 用户传入的是 对象 /* 键名 url type data success 用户不需要记忆 参数的顺序 只需要记忆 参数的属性名即可 大部分的框架 都是这么做的 */ function ajax(option) { var xhr = new XMLHttpRequest(); // 如果是get 并且有数据 if (option.type == 'get' && option.data) { option.url += '?'; option.url += option.data; option.data = null; // 这样最后直接send data即可 } xhr.open(option.type, option.url); // post请求 并且有数据 if (option.type == 'post' && option.data) { xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); } xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { // option.success(xhr.responseText); // console.log(xhr.getResponseHeader('Content-Type')); var type = xhr.getResponseHeader('Content-Type'); // 是否为json if (type.indexOf('json') != -1) { option.success(JSON.parse(xhr.responseText)); } // 是否为xml else if (type.indexOf('xml') != -1) { option.success(xhr.responseXML); } // 普通字符串 else { option.success(xhr.responseText); } } } xhr.send(option.data); } /* 总结 封装的目的 让我们把精力集中在逻辑 页面的交互效果 基础的部分不用每次都来一遍 封装的步骤 固定的部分 抽取 不固定的部分 作为参数 参数很多==> 使用对象 来优化 封装的好坏 功能能否正常执行 代码的简洁程度(可读性) 考虑的问题是否足够多,兼容性问题,异常处理 */