封装ajax(兼容IE)

11人阅读 评论(0) 收藏 举报
分类:
//封装适合各种情况的简化版ajax函数

//利用解构,获取将来参数对象中每个属性值
//请求类型: "get"||"post"
//请求的url地址: "xxx.php"
//请求携带的参数: "变量1=值&..."
//服务器端返回值类型: "json"||"text"
/*function ajax({type,url,data,dataType}){*/
function ajax(obj){
  //服务器端返回值类型默认为text
  dataType=obj.dataType||"text";
  //只要远程请求,必有延迟,只要延迟,比用promise等待完成后,才执行后续操作
  return new Promise(function(resolve){//.then()
    //AJAX 4步/5步:
    if(XMLHttpRequest){
      var xhr=new XMLHttpRequest();//1.获得xhr对象
    }else{
      var xhr=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //如果是get请求,且传入了data参数,才需要拼接url和data为get请求的完整地址
    if(obj.type.toLowerCase()=="get"&&obj.data!==undefined)
      obj.url+="?"+obj.data;
    xhr.open(obj.type,obj.url,true);//2. 建立连接
    //3. 设置请求状态回调函数
    xhr.onreadystatechange=function(){
      //如果请求完成,且成功!
      if(xhr.readyState==4&&xhr.status==200){
        //如果服务器端响应类型不是json,则调用后续resolve操作,并传入原始responseText,做后续处理
        if(obj.dataType.toLowerCase()!="json")
          resolve(xhr.responseText);
        else//如果服务器端响应类型是json,则自动调用JSON.parse转为js对象,再交给resolve函数做后续处理
          resolve(JSON.parse(xhr.responseText));
      }
    }
    //只有type为post,才需要设置请求头
    if(obj.type.toLowerCase()=="post")
      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //只有type为post,才需要send时,传入参数
    xhr.send(obj.type.toLowerCase()=="post"?obj.data:null);
  })
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<!-- <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script> -->
	<script src="js/polyfill.min.js"></script>
	<script src="js/ajax.js"></script>
	<script type="text/javascript">
		ajax({
			type:'get',
			url:'http://localhost/test/test.php',
			dataType:'json',
		}).then(function(data){
			console.log(data);
			alert(data.ok);
		})
	</script>
</body>
</html>

尝试了下IE,IE9以及以上都可以用。不过需要先引入polyfill.min.js。

polyfill.min.js下载地址:http://www.bootcdn.cn/babel-polyfill/

打开某个链接,直接复制粘贴代码即可。

查看评论

Ajax异步数据交互

本课程属于JavaScript高级编程技术,所以在学习此技术之前一定要先掌握JavaScript与WEB开发技术后才可以进行学习。官方QQ群:612148723。
  • 2016年12月31日 23:30

IE兼容性模式下 jquery处理 ajax json

使用Jquery调用ajax和json序列化正常,但是切换到兼容模式下就不正常了。 下面就遇到问题解决记录如下: 1、添加meta 在网页中添加强制网页在标准模式下运行,这样可以完成调用。 2...
  • wangdaoyin2010
  • wangdaoyin2010
  • 2017-04-10 16:00:18
  • 1626

Ajax解决IE浏览器兼容问题

ServletContext 被 Servlet 程序用来与 Web 容器通信。例如写日志,转发请求。每一个 Web 应用程序含有一个Context,被Web应用内的各个程序共享。因为Context可...
  • l4432321
  • l4432321
  • 2016-06-03 20:32:45
  • 1893

封装兼容的Ajax请求

XMLHttpRequest对象XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。 XMLHttpRequ...
  • Ted_Rui
  • Ted_Rui
  • 2017-05-17 00:32:40
  • 225

jQuery 的 .get和.post和.ajax方法IE的兼容问题

最近发现不少朋友遇到这样的问题,也就是用jQuery的时候呢,.get方法在FireFox浏览器下可以正常获取值并显示,但是在IE下呢就非然,这个主要是因为IE的缓存的问题,可以这样解决: $(...
  • muziduoxi
  • muziduoxi
  • 2012-05-07 11:53:06
  • 13680

添加和移除事件处理兼容各浏览器的封装(带详细注释)

//事件处理兼容各种浏览器,采用能力检测方法,所谓能力检测,就是有能力就做,没有能力就不做 //定义一个处理事件的对象,兼容各种浏览器,dom2级事件处理和ie事件,如果这两个事件都不兼容,就采...
  • topwqp
  • topwqp
  • 2014-12-04 21:50:36
  • 1632

兼容浏览器的js Ajax实现

兼容浏览器的js Ajax,Ajax,Jquery,javascript
  • zhoukang0916
  • zhoukang0916
  • 2010-08-10 16:17:00
  • 3345

SpringMVC+ajaxFileUpload 兼容IE浏览器实现异步上传图片

第一次出差到深圳,帮朋友给一个项目收尾,客户临时要求上传文件的时候顺便上传封面,所以就想到用异步上传的方式,然后在前端预览上传的图片,于是就用到了“ajaxFileUpload”这一款基于“jquer...
  • kbylwql
  • kbylwql
  • 2017-03-03 20:48:46
  • 667

使用原生js封装的ajax(兼容jsonp)

/* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url ...
  • mapbar_front
  • mapbar_front
  • 2017-06-15 17:54:31
  • 861

兼容IE8使用ajax上传文件

小编最近遇到一个问题,在项目中用到了发送邮件的功能,发送邮件就需要上传附件,使用ajax异步刷新上传文件,并且兼容IE8浏览器新建ASP.NET Web应用程序 页面效果其中,用到了两个JS文件 ...
  • nangeali
  • nangeali
  • 2017-09-03 14:07:13
  • 3233
    个人资料
    持之以恒
    等级:
    访问量: 8万+
    积分: 3629
    排名: 1万+
    最新评论