js学习总结----ajax兼容处理及惰性思想

封装代码如下:

// var xhr = null;
// //为了兼容IE6及更低的版本:如果第一个不支持,则浏览器会报错,后面就不在执行了
// try{
//     xhr = new ActiveXObject("Microsoft.XMLHTTP");
// }catch(e){

// }
// if(new ActiveXObject("Microsoft.XMLHTTP")){
//     xhr = new ActiveXObject("Microsoft.XMLHTTP");
// }else if(new ActiveXObject("Msxm12.XMLHTTP")){
//     xhr = new ActiveXObject("Msxm12.XMLHTTP");
// }else if(new ActiveXObject("Msxm13.XMLHTTP")){
//     xhr = new ActiveXObject("Msxm13.XMLHTTP");
// }
//JS高阶编程技巧之"惰性思想":能够执行一次就搞定的不会执行多次
//createXHR:创建AJAX对象,兼容所有的浏览器
function createXHR(){
    var xhr = null,
        flag = false,
        ary = [
            function(){
                return new XMLHttpRequest;
            },
            function(){
                return new ActiveXObject("Microsoft.XMLHTTP");
            },
            function(){
                return new ActiveXObject("Msxm12.XMLHTTP")
            },
            function(){
                return new ActiveXObject("Msxm13.XMLHTTP");
            }
        ];
    for(var i = 0,len = ary.length;i<len;i++){
        var curFn = ary[i];
        try{
            xhr = curFn();
            //本次循环获取的方法执行没有出现错误:说明此方法是我想要的,我们下一次直接执行这个小方法即可,这就需要我们把createXHR重写为小方法即可(完成后不需要判断下面的,直接退出循环即可)
            createXHR = curFn;
            flag = true;
            break;
        }catch(e){
            //本次循环获取的方法执行出现错误:继续执行下一次的循环
        }

    }
    if(!flag){
        throw new Error("your brower is not support ajax,please change your brower,try again!")
    }
    return xhr;
}
时间: 2024-08-03 03:46:26

js学习总结----ajax兼容处理及惰性思想的相关文章

原生js学习笔记——Ajax基础

1.什么是Ajax Ajax:是Asynchronous Javascript And XML的简写,即异步JavaScript和XML XMLHttpRequest 提供的异步,是指基于 ajax 的应用在服务器中的通信方式. 传统的 web 应用,每次用户向服务器请求获得新数据时,浏览器都会丢弃当前页面,而等待重新加载新的页面.这样一来,在服务器完全响应之前,用户浏览器将一片空白,用户的动作必须中断.而异步指用户发送请求后,完全无需等待,请求会在后台发送,不会阻塞用户当前活动.这样一来,用户

js学习总结----ajax中的http请求方式及同步编程和异步编程

一.请求方式 var xhr = createXHR(); xhr.open("get","/getList?num=12",true); xhr.open("post","/getList",true); xhr.send('{"name":"zhangsan","age":7}') //HTTP METHOD;客户端向服务器端发送请求的方式 //以下的请求方式不管

JS学习之ajax相关知识和ajax的封装

XMLHttpRequest对象 1. XMLHttpRequest用于在后台与服务器交换数据,是AJAX之所以能对网页进行局部刷新的核心,同时Ajax技术离开了XMLHttpRequest对象将失去与服务器异步通信的能力. 2:不同的浏览器创建XMLHttpRequest对象使用的语句是不同的. 3:3.XMLHttpRequest对象方法与属性 方法 描述 open(method,url,[async],[username],[password]) 规定请求的类型.URL 以及是否异步处理请

js学习总结----DOM2兼容处理顺序问题

解决顺序问题:我们不用浏览器自带的事件池了,而是自己模拟标准浏览器的事件池实现,具体代码如下: /* bind:处理DOM2级事件绑定的兼容性问题(绑定方法) @parameter: curEle->要绑定事件的元素 evenType->要绑定的事件类型("click","mouseover") evenFn->要绑定的方法 */ function bind(curEle,evenType,evenFn){ if('addEventListener

js学习总结----DOM2兼容处理重复问题

在解决this问题之后,只需要在每次往自定义属性和事件池当中添加事件的时候进行一下判断就好了,具体代码如下 /* bind:处理DOM2级事件绑定的兼容性问题(绑定方法) @parameter: curEle->要绑定事件的元素 evenType->要绑定的事件类型("click","mouseover") evenFn->要绑定的方法 */ function bind(curEle,evenType,evenFn){ if('addEventLi

Day67:JS实现的ajax

JS实现的ajax AJAX核心(XMLHttpRequest) 其实AJAX就是在Javascript中多添加了一个对象:XMLHttpRequest对象.所有的异步交互都是使用XMLHttpServlet对象完成的.也就是说,我们只需要学习一个Javascript的新对象即可. ? 1 var xmlHttp = new XMLHttpRequest():(大多数浏览器都支持DOM2规范) 注意,各个浏览器对XMLHttpRequest的支持也是不同的!为了处理浏览器兼容问题,给出下面方法来

JS实现的ajax和同源策略

一.回顾jQuery实现的ajax 首先说一下ajax的优缺点 优点: AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高: jquery 实现的ajax 1 <!DOCTYPE html> 2 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <

Django 【第十九篇】JS实现的ajax、同源策略和前端jsonp解决跨域问题

一.回顾jQuery实现的ajax 首先说一下ajax的优缺点 优点: AJAX使用Javascript技术向服务器发送异步请求: AJAX无须刷新整个页面: 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高: jquery 实现的ajax index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

【转】Backbone.js学习笔记(二)细说MVC

文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Backbone源码结构 1: (function() { 2: Backbone.Events // 自定义事件 3: Backbone.Model // 模型构造函数和原型扩展 4: Backbone.Collection // 集合构造函数和原型扩展 5: Backbone.Router // 路由