传智播客 AJAX基础之内部请求原理分析

 

    在AJAX基础一中，初步认识了AJAX并利用JQuery库做了一个简单的应用，这就实际感受到了AJAX技术的大致轮廓和好处。同时也对AJAX产生了很大的兴趣，前面为了演示效果，利用了JQuery库使代码变得简单，但同时也将基本原理隐藏起来了。为了深入理解AJAX的原理，接下来将用最原始的XMLHTTPrequest对象来和服务器进行一步一步的交互，在这个过程中不使用任何第三方的库，而是用最普通的JavaScript来实现。
    在AJAX应用模式中，浏览器的用户接口是通过JavaScript调用AJAX引擎，然后通过HTTP请求传输数据，服务器处理后返回的是XML文本数据，这是用户需要的信息，而不是传统应用中的HTML/CSS数据的页面。换句话说，就是请求不是直接由客户端的form表单封装后发送给服务器，而是通过用JavaScript响应浏览器的事件对象并将数据发送给服务器，服务器处理请求后，返回的是XML文本数据，然后由客户端的AJAX引擎(JavaScript代码)解析返回的数据，然后转换成HTML/CSS格式的数据传递给浏览器。由于不使用第三方的库，所以直接使用DOM API来操作文档中的节点。与前一个相比，这个例子只是在JS代码上有改变，其它都可以保持不变：
      var xmlhttp;
      function verify() {
          var userName = document.getElementById("userName").value;
          if (window.XMLHttpRequest) {
              //针对FireFox，Mozillar，Opera，Safari，IE7，IE8
              xmlhttp = new XMLHttpRequest();

              //针对某些特定版本的mozillar浏览器的BUG进行修正
              if (xmlhttp.overrideMimeType) {
                  xmlhttp.overrideMimeType("text/xml");
              }
          } else if (window.ActiveXObject) {
              //针对IE6，IE5.5，IE5
              var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
              for (var i = 0; i < activexName.length; i++) {
                  try{
                      xmlhttp = new ActiveXObject(activexName[i]);
                      break;
                    } catch(e){
                    }
              }
          }
          if (!xmlhttp) {
              alert("XMLHttpRequest对象创建失败!!");
              return;
          } else {
              alert(xmlhttp.readyState);
          }

          xmlhttp.onreadystatechange = callback;
          xmlhttp.open("GET","AJAXServer?name="+ userName,true);
          xmlhttp.send(null);
      }

      function callback() {
          if (xmlhttp.readyState == 4) {
              if (xmlhttp.status == 200) {
                  var responseText = xmlhttp.responseText;
                  var divNode = document.getElementById("result");
                  divNode.innerHTML = responseText;
              } else {
                  alert("出错了！！！");
              }
          }
      }
    上面的代码就是通过使用XMLHTTPRequest对象来进行AJAX的异步数据交互，实现的功能还是简单的用户名校验。首先是使用DOM的方式获取文本框中的值(先通过getElementById方法获取相应的节点，然后通过直接访问节点的value得到该节点的value属性值)；接下来就是就是最为重要的也是最复杂的一步——创建XMLHttpRequest对象，这也是直接使用XMLHttpRequest对象进行通讯的第一步，它的复杂性不是在创建方法上有难度，而是因为IE和其他类型的浏览器建立这个对象的方式不同， 为了兼容不同的浏览器需要根据特定条件写不同的创建代码。在创建对象的过程中，把条件window.XMLHttpRequest放在了前面，一个是因为现在这个条件涵盖的浏览器的范围比较大，而window.ActiveXObject对象就IE一家。其次在IE7以上的版本，IE已经内置了window.XMLHttpRequest对象，这个实现比ActiveXObject肯定要好。最后因为ActiveXObject对象还能带来很多安全性的问题，所以在有些IE浏览器上是被禁用的。因此创建XMLHttpRequest对象是首选。当然了，如果要支持IE6及以下版本，就需要创建ActiveXObject对象了，创建它的控件不同版本浏览器是不同的，所以这里采取将控件名存入数组，然后取出一个控件名进行创建，如果创建成功就终止循环，如果创建失败，会抛出异常，捕获并处理后可以继续循环，继续尝试创建。第二步就是注册回调函数，要注意的是注册回调函数时的函数名不要加括号。第三步就是使用XMLHttpRequest对象的open方法设置连接信息，第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post；第二个参数表示请求的url地址，get方式请求的参数也在url中；第三个参数表示采用异步还是同步方式交互，true表示异步。如果是POST方式还需要自己设置http的请求头。第四步就是发送数据，因为是用的GET方式发送请求，所以参数写在了URL信息里面，这里的send方法的参数就是null了。第三步中的同步异步选项就会导致如下情况，在同步方式下，send这句话会在服务器段数据回来后才执行完；而异步方式下，send这句话会立即完成执行，不需要等到服务器端的数据返回。最后一步就是在回调函数中做的，也是处理服务器返回的数据的代码。在回调函数中，首先判断与服务器的交互是否成功，通过readyState和status两个属性值就能判断出是否成功，然后就可以从XMLHttpRequest对象中获取服务漆器端返回的纯文本数据。接着通过DOM的方式找到div标签所对应的元素节点，将数据显示在页面上。到此为止，一个完全用JavaScript和DOM内置对象实现的AJAX技术应用就完成了。它与前面利用JQuery实现的功能是一样的，但是利用了框架以后，代码的开发变得简单多了，最主要的是JQuery帮助开发者屏蔽了不同浏览器之间的区别，使开发者可以调用统一的编程接口，专注于逻辑的开发。