Ajax.js工具函数
2017-08-10 16:25
302 查看
主代码
工具函数
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 // 所以 这里 需要拼接 url if (data) { // 如果有值 需要拼接字符串 // 拼接为xxx.php?name=jack&age=18 url+='?'; 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{ } // 设置 方法 以及 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); } } } // 将工具函数 进行优化 只接收一个 参数 对象 /* url:请求的url data:发送的数据 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.url ajax.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 作为参数 success option.success(ajax.responseText); } } }
相关文章推荐
- js-工具函数
- 先写一个用ajax开发webgis的JS暂停函数问题!
- jQuery中Ajax工具函数使用2
- javascript通过ajaxpro 调用后台C#函数,js报错 ‘XXX’ 未定义
- 工具函数之JS
- js工具函数
- 几个ajax js性能优化和内存泄露问题及检测分析工具
- 封装一个Ajax工具函数
- Js常用的工具函数
- js 工具函数
- js常用的工具函数
- Ajax工具函数封装
- jquery中ajax封装原理/封装jquery的ajax工具函数
- Ajax.BeginForm无法调用 ajaxOptions的js函数
- js 函数无法返回ajax数据的问题
- Handlerbar.js——Ajax组装html的超强模板工具学习实践
- 在C#的ajax中的timer触发函数中怎样调用页面元素和引用JS脚本函数?
- JS常用工具函数(持续记录)
- Ajax:js自执行函数、jsonp、cros