ajax方法的封装

发布时间:2018-05-15 15:45:56编辑:丝画阁阅读(731)

用JavaScript封装了一个ajax的get,post两种方法的请求

//
 将 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); } }}

关键字