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

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对象实例。