js 实现 Ajax 跨浏览器使用

  1. var CommonUtils = {};
  2. (function(CommonUtils){
  3. //---- Ajax module ----
  4. CommonUtils.ajax = {};
  5. /**
  6. @description Create XMLHttpRequest
  7. @return XMLHttpRequest Instance
  8. */
  9. CommonUtils.ajax._createXHR =function createXmlHttpRequest(){
  10. var xmlHttp ;
  11. if(window.XMLHttpRequest){
  12. xmlHttp = new XMLHttpRequest();
  13. }
  14. else if(window.ActiveXObject){
  15. var versions = [
  16. 'Microsoft.XMLHTTP',
  17. 'MSXML.XMLHTTP',
  18. 'Msxml2.XMLHTTP.7.0',
  19. 'Msxml2.XMLHTTP.6.0',
  20. 'Msxml2.XMLHTTP.5.0',
  21. 'Msxml2.XMLHTTP.4.0',
  22. 'MSXML2.XMLHTTP.3.0',
  23. 'MSXML2.XMLHTTP'
  24. ];
  25. //try to create xhr
  26. for(var i=0; i<versions.length; i++){
  27. try{
  28. xmlHttp = new ActiveXObject(versions[i]);
  29. if(xmlHttp){
  30. return xmlHttp;
  31. }
  32. }catch(e){
  33. xmlHttp = false;
  34. }
  35. }
  36. }
  37. return xmlHttp;
  38. }
  39. /**
  40. * @description Ajax request
  41. * @param
  42. * options{method,url,success,failure,params}
  43. scope
  44. */
  45. CommonUtils.ajax.request = function(options,scope){
  46. if(!options.method||!options.success||!options.failure){
  47. console.log('Parameters is not correct');
  48. return false;
  49. }
  50. var method = options.method.toUpperCase(),
  51. url = options.url,
  52. successFn = options.success,
  53. failureFn = options.failure,
  54. params = options.params,
  55. callFn = null,
  56. jsonData = null;
  57. var xhr = CommonUtils.ajax._createXHR();
  58. if(!xhr){
  59. console.log("Create xhr failed");
  60. return false;
  61. }
  62. if("GET" == method && params){
  63. for(var property in params){
  64. var p = property + '=' + params[property];
  65. url = url + ((url.indexOf('?') >-1)?'&':'?') + p;
  66. }
  67. }else if("POST" == method && params){
  68. jsonData = JSON.stringify(params);
  69. }
  70. xhr.open(method,url,true);
  71. xhr.onreadystatechange=function(){
  72. if (xhr.readyState == 4) {
  73. var status = xhr.status;
  74. if (status >= 200 && status < 300) {
  75. callFn = successFn;
  76. } else {
  77. callFn = failureFn;
  78. }
  79. if(scope){
  80. callFn.call(scope?scope:this,status,xhr.responseText,xhr.responseXML);
  81. }
  82. };
  83. }
  84. if('POST' == method){
  85. xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  86. }
  87. xhr.send(jsonData);
  88. }
  89. }(CommonUtils));

原生js 实现 Ajax 跨浏览器使用的更多相关文章

  1. 原生js实现ajax跨域(兼容IE8,IE9)

    html设置meta标签兼容360兼容模式和IE怪异模式 <meta http-equiv="X-UA-Compatible" content="IE=9;IE=8 ...

  2. 原生JS实现Ajax及Ajax的跨域请求

      前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. ...

  3. 用原生js实现ajax、jsonp

    转载: http://www.cnblogs.com/yangheng/p/6065910.html 一.原生js实现ajax $.ajax({ url: '', type: 'post', data ...

  4. 使用原生js写ajax

    // 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){ if(typeof XMLHttpRequest != "undefined") ...

  5. 原生JS的Ajax技术

    1.同步和异步 同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待  卡死状态 异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡 ...

  6. 原生js实现ajax与jquery的ajax库,及json

    这是一篇笔记博客, Ajax: 和服务器进行数据交换(异步) 用js实现复杂的原理:用于发送请求的对象在不同的浏览器中是不同的 同源策略:ajax发送请求的url地址与服务器地址必须是同一域名,协议, ...

  7. 原生js写Ajax

    //原生js写ajax就像打电话 //打电话分下面4步//1.拿出手机//2.拨号//3.说话//4.挺对方说话 //ajax也分下面4步//1.创建ajax对象//2.连接到服务器//3.发送请求( ...

  8. Ajax工作原理和原生JS的ajax封装

    前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...

  9. Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码 其中有json的一句话解释

    前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function( ...

随机推荐

  1. (window,parent,opener,top).location.reload方法汇总

    今天在火狐浏览器上碰到个bug,调用parent.location.reload()时只刷新子页面,没有整个浏览器刷新,谷歌上没有问题,网上搜了一下 改成parent.location.reload( ...

  2. 超声波 HC-SR04

    三.实验原理 1. 超声波传感器简介 超声波测距系统主要应用于汽车的倒车雷达.及机器人自动避障行走.建筑施工工地以及一些工业现场例如:液位.井深.管道长度等场合.超声波是一种在弹性介质中的机械振荡,有 ...

  3. JSON的使用小结

    JSON中存储的是key:value,其实在编程的时候我们会遇到很多都是key:value的形式.比如:map,java对象(一个对象的一个属性只会有一个值),数据库中key:value对应着里面存储 ...

  4. Hibernate学习笔记二:Hibernate缓存策略详解

    一:为什么使用Hibernate缓存: Hibernate是一个持久层框架,经常访问物理数据库. 为了降低应用程序访问物理数据库的频次,从而提高应用程序的性能. 缓存内的数据是对物理数据源的复制,应用 ...

  5. 手机端的viewport属性

    Window.devicePixelRatioThis read-only property returns the ratio of the resolution in physical pixel ...

  6. Spring Boot 学习(2)

    文 by / 林本托 Tips 做一个终身学习的人. 源代码:github下的/code01/ch2. 配置 Web 应用程序 在上一章中,我们学习了如何创建一个基本的应用程序模板,并添加了一些基本功 ...

  7. php-fpm 与 fastCgi的浅谈

    首先,CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者. web server(比如说nginx)只是内容的分发者.比如,如果请求/index.h ...

  8. nodejs服务实现反向代理,解决本地开发接口请求跨域问题

    前后端分离项目需要解决第一个问题就是,前端本地开发时如何解决通过ajax请求产生的跨域的问题.一般的做法是通过本地配置nginx反向代理进行处理的,除此之外,还可以通过nodejs来进行代理接口.当然 ...

  9. Docker手动配置Lamp镜像

    自从接了学长布置的任务,自学Docker也学了很久了,先整一个Lamp出来吧 在Docker Hub上找了很多Lamp的镜像 网上都说tutum的镜像做的还是不错的 试试 折腾了一上午无果... 算了 ...

  10. 【Windows 10 应用开发】如何防止应用程序被截屏

    今天老周只想跟大伙们分享一个小技巧,是的,小小的技巧,很简单,保证你能学会的,要是学不会,可以考虑跳泰山. 有些时候,我们可能会想到不要让应用程序界面上显示的内容被截屏,要阻止应用界面呈现在截图上,可 ...