Ajax.js工具函数

主代码

document.querySelector('#ajax_get').onclick = function () {// 直接使用 封装的 工具函数即可/*参数1:url参数2:数据参数3:请求的方法*/var backData = ajax_tool('01.test_get.php','name=huluw&skill=saveyeye','get',function(data){console.log(data);});// 测试console.log(backData);}

工具函数

// ajax get 五部曲function ajax_get(url,data) {// 异步对象var ajax = new XMLHttpRequest();// url 方法// 如果是get发送数据 发送的格式为 xxx.php?name=jack&age=18// 所以 这里 需要拼接 urlif (data) {// 如果有值 需要拼接字符串 // 拼接为xxx.php?name=jack&age=18url+='?';url+=data;}else{}ajax.open('get',url);// 发送ajax.send();// 注册事件ajax.onreadystatechange = function () {// 在事件中 获取数据 并修改界面显示if (ajax.readyState==4&& ajax.status==200) {console.log(ajax.responseText);}}}// ajax_post五部曲function ajax_post(url,data) {// 异步对象var ajax = new XMLHttpRequest();// url 方法ajax.open('post',url);// 设置 请求报文 ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");// 发送if (data) {// 如果 有值 post请求 是在 send中 发送给服务器ajax.send(data);}else{ajax.send();}// 注册事件ajax.onreadystatechange = function () {// 在事件中 获取数据 并修改界面显示if (ajax.readyState==4&&ajax.status==200) {console.log(ajax.responseText);}}}// 将 get 跟post 封装到一起/*参数1:url参数2:数据参数3:请求的方法参数4:数据成功获取以后 调用的方法*/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);}}}// 将工具函数 进行优化 只接收一个 参数 对象/*url:请求的urldata:发送的数据method:请求的方法success:请求成功以后 调用的函数*/function ajax_tool_pro(option) {// 异步对象var ajax = new XMLHttpRequest();// get 跟post  需要分别写不同的代码if (option.method=='get') {// get请求if (option.data) {// 如果有值option.url+='?';option.url+=option.data;}else{}// 设置 方法 以及 option.urlajax.open(option.method,option.url);// send即可ajax.send();}else{// post请求// post请求 option.url 是不需要改变ajax.open(option.method,option.url);// 需要设置请求报文ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");// 判断option.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);}}}