45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:关于ajax网络请求的封装实例大全

关于ajax网络请求的封装实例大全

2016-08-28 13:32:20 来源:www.45fan.com 【

关于ajax网络请求的封装实例大全

实例代码:

// 封装的ajax网络请求函数
// obj 是一个对象
function AJAX(obj){


  //跨域请求
  if (obj.dataType == "jsonp") {
   //在这里 callback 必须是全局变量 保证函数消失的时候 这个变量不可以被销毁

   //处理一下函数名(防止多个网络请求 函数名字相同 出现紊乱的情况)
   var hehe = "callBack" + "_" + new Date().getTime() + "_" + String(Math.random()).replace(".","");
   window[hehe] = obj.success;
   //创建 script标签
   var sc = document.createElement("script");
   sc.src = obj.url + "?" + "cb=" + hehe;
   console.log(sc.src);
   document.body.appendChild(sc);
   document.body.removeChild(sc);
   return;
  }

 

 

//1、创建 ajax 对象
 var ajaxObj = null;
 if (window.XMLHttpRequest) {
  ajaxObj = new XMLHttpRequest();
 }else{
  ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");
 }


 //设置请求的类型
 obj.type = obj.type.toUpperCase() || "GET";

 //如果是get请求 并且需要传递参数 则需要给 url 后面拼接参数
 if (obj.type == "GET") {
  var arr = [];//定义数组 用于把对象存储到数据里面
  for (var key in obj.data) {
   arr.push(key +"="+ obj.data[key]);
  }
  //用&分隔数组 让其转化为类似:name=lxl&age=18 的形式
  var str = arr.join("&");
  obj.url = obj.url +"?"+ str;
  //拨号
  ajaxObj.open(obj.type,obj.url,true);


  //发送"name=123&age=18"
  ajaxObj.send();
 }else{
  var arr = [];//定义数组 用于把对象存储到数据里面
  for (var key in obj.data) {
   arr.push(key +"="+ obj.data[key]);
   //console.log(arr);
  }
  //用&分隔数组 让其转化为类似:name=lxl&age=18 的形式
  var str = arr.join("&");
  //console.log(str);
  ajaxObj.open(obj.type,obj.url,true);
  ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  ajaxObj.send(str);
 }



 //监听
 ajaxObj.onreadystatechange = function(){

  if (ajaxObj.readyState == 4) {
   if (ajaxObj.status >= 200 && ajaxObj.status < 300 || ajaxObj.status == 304) {
    //请求成功
    obj.success(ajaxObj.responseText);
   }else{
    //请求失败
    obj.error(ajaxObj.status);
   }
  }

 }

}

以上这篇关于ajax网络请求的封装实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持路饭。


本文地址:http://www.45fan.com/bcdm/68820.html
Tags: ajax 网络 关于
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部