封装 XMLHttpRequest

 XMLHttpRequest

作用 

1.可以向服务器提出请求并处理响应,而不阻塞用户

2.可以在页面加载以后进行页面的局部更新

// 封装通用的xhr,兼容各个版本
        function createXHR() {
            //判断浏览器是否将XMLHttpRequest作为本地对象实现,针对IE7,Firefox,Opera等浏览器
            if (typeof XMLHttpRequest != "undefined") {
                return new XMLHttpRequest();
            } else if (typeof ActiveXObject != "undefined") {
                //将所有可能出现的ActiveXObject版本放在一个数组中
                var xhrArr = ['Microsoft.XMLHTTP', 'MSXML2.XMLHTTP.6.0', 'MSXML2.XMLHTTP.5.0', 'MSXML2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
                //遍历创建XMLHttpRequest对象
                var len = xhrArr.length;
                for (var i = 0; i <len; i++) {
                    try {
                        //创建XMLHttpRequest对象
                        xhr = new ActiveXObject(xhrArr[i]);
                        //如果创建XMLHttpRequest对象成功,则跳出循环
                        break;
                    } catch (ex) {}
                }
            } else {
                throw new Error("No XHR object available.");
            }
        }
        var xhr = createXHR(),

 

3.要完整实现一个Ajax异步调用和局部刷新  需要以下几个步骤

1.创建 XMLHttoRequest对象,也就是创建一个异步调用

2.创建一个新的HTTP请求,并指定改HTTP请求的方法和url

4.设置响应HTTP请求的状态变化的函数

创建HTTP请求

语法 open(method,url,async)

menthod: 请求类型 get和post

url:文件在服务器的位置

async :true异步 false同步

功能:创建HTTP请求,规定请求的类型、url及是否同步异步处理

 

上一篇:前端面试基础题:Ajax原理


下一篇:Ajax三