首页 > 代码库 > Ajax的封装。
Ajax的封装。
封装 Ajax
因为Ajax 使用起来比较麻烦,主要就是参数问题,比如到底使用GET 还是POST;到
底是使用同步还是异步等等,我们需要封装一个Ajax 函数,来方便我们调用。
封装支持接收来自服务端的数据,不可以发送数据到服务端
/** * 此封装只支持接收来自服务端的数据,不可以发送数据到服务端 */ function ajax(obj) { var xhr = new XMLHttpRequest(); obj.url = obj.url + ‘?rand=‘ + Math.random(); xhr.open(obj.method, obj.url, obj.async); xhr.send(null); if (obj.async === false) { callback(); } if (obj.async === true) { xhr.onreadystatechange = function () { if (xhr.readyState == 4) { callback(); } }; } function callback () { if (xhr.status == 200) { obj.success(xhr.responseText); //回调 } else { alert(‘数据返回失败!状态代码:‘ + xhr.status + ‘,状态信息:‘ + xhr.statusText); } } }
把上面的代码封装在ajax2.js中,在页面上引入该文件。
<!DOCTYPE html> <html> <head> <title>Ajax的封装</title> <meta charset="utf-8"> <script src="http://www.mamicode.com/ajax2.js"></script> </head> <body> <button id="btn">调用Ajax</button> <script> document.getElementById("btn").onclick=function(){ ajax({ method : ‘get‘, url : ‘http://localhost:3000/api/2‘, success : function (text) { alert(text); }, async :false }); }; </script> </body> </html> 7.2 封装支持接收来自服务端的数据,又可以发送数据到服务端 function ajax(obj) { var xhr = new XMLHttpRequest(); obj.url = obj.url + ‘?rand=‘ + Math.random(); obj.data = http://www.mamicode.com/params(obj.data);>
希望能够帮到你!
Ajax的封装。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。