用 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);
- }
- }
- }
来源: http://www.jianshu.com/p/99bf7084e298