为了账号安全,请及时绑定邮箱和手机立即绑定

JS--AJAX基础、获取Ajax引擎对象、解决XMLHttpRequest兼容问题

2019.09.30 14:16 74浏览

AJAX

AJX即(asynchronous Javascript And XML)异步JavaScript和XML,可以使网页实现异步更新,就是不重新加载整个页面的情况下,对网页的某部分进行更新(局部刷新)。传统的网页如果需要更新内容,必须重载整个网页页面。https://www.jx-ferrotungsten.com


XMLHttpRequest是JavaScript一个外挂组件,用来实现客户端与服务器端异步通信,所有Ajax应用都要借助该组件才能够实现。目前各大主流浏览器都支持XMLHttpRequest组件。


定义XMLHttpRequest对象

使用XMLHttpRequest对象实现异步通信一般需要下面几个步骤:


定义XMLHttpRequest实例对象

调用XMLHttpRequest对象的open()方法打开服务器端URL地址

注册onreadystatechange事件处理函数。准备接收响应数据、并进行处理

调用XMLHttpRequest对象的send()方法发送请求

IE在5.0 版本开始就以ActiveX组件的形式定义了XMLHttpRequest对象,在7.0 版本中标准化XMLHttpRequest对象,允许通过window对象进行访问。现代标准浏览器都支持XMLHttpRequest对象,虽然早期IE浏览器以ActiveX组件形式支持,但是所有浏览器的XMLHttpRequest对象都提供了相同的属性和方法。


使用工厂模式对XMLHttpRequest的获取进行封装,解决兼容性问题:


<script>

   function createXMLHTTPObject() {

        var XMLHttpFactories = [//兼容不同浏览器和版本的创建函数数组

            function () {return new XMLHttpRequest()},

            function () {return new ActiveXObject("Msxml2.XMLHTTP")},

            function () {return new ActiveXObject("Msxml3.XMLHTTP")},

            function () {return new ActiveXObject("Microsoft.XMLHTTP")}

         ];

        var xmlhttp = false;

        for(var i = 0; i < XMLHttpFactories.length; i++){

            //尝试调用匿名函数,如果成功则返回XMLHttpRequest对象,否则继续调用下一个

            try{

                xmlhttp = XMLHttpFactories[i]();

            }catch (e) {

                continue;

            }

            break;

        }

        return xmlhttp;

    }

</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

上面的函数首先创建一个数组,https://www.jx-ferrotungsten.com数组元素为各种创建XMLHttpRequest对象的匿名函数。第一个元素是创建一个本地对象,而其他元素将针对IE浏览器的不同版本尝试创建ActiveX对象。然后设置变脸xmlhttp为false,表示不支持Ajax。接着遍历工厂内所有函数并尝试执行它们,为了避免发生异常,把所有调用函数放在try子句中执行,如果发生错误,则在catch子句中捕获异常,并执行continue语句,返回继续执行,而不是抛出异常。如果创建成功,则终止循环,返回创建的XMLHttpRequest对象实例。



点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消