AJAX机制详解以及跨域通信

1.Ajax

1.1.Ajax简介
  Ajax简介这一部分我们主要是谈一下ajax的起源，ajax是什么？因为这些是跟技术无关的。所以，大多细节都是一笔带过。

  Ajax的起源？

　　Ajax一词源于2005年 Jesse James Garrett发表的一篇题为"Ajax:A new Approach to Web Applications".他在这篇文       章中介绍了一种新技术，用他的话说，就是Ajax ：Asynchronous JavaScript +XML的缩写。

  Ajax是什么？

　　这种新技术的主要目的就是为了使前端网页能够向服务器请求额外的数据而不需要卸载页面。自从这种技术出现以后，微软率先引入XHRt对象(ajax能够实现的核心对象)，然后其他浏览器相继实现这种技术。总而言之，ajax就是一种能异步通信的技术。

1.2.Ajax的核心对象---XMLHttpRequest
  因为IE5是最先引入这个XHR对象的，当时并没有事实上的标准。在IE中有三种不同的XHR对象版本：MSXML2.XMLHttp,MSXML2.XMLHttp.3.0和MSXML2.XMLHttp.6.0;

根据这三种版本号，在IE中创建一个XHR对象如下：

function createXHR() { //IE7之前的版本通过这种方式
  var versions = [
    'MSXML2.XMLHttp',
    'MSXML2.XMLHttp.3.0',
    'MSXML2.XMLHttp.6.0'
  ];
  var xhr = null;
  for (var item in versions) {
    try {
      xhr = new ActiveXObject(item); //若不存在该版本，可能会出错
      if (xhr) break;
    } catch (e) {
      //一般对这种错误不做处理
    }
  }
  return xhr;
}
在IE引入这个对象之后，其他浏览器厂商也相继跟随，这时候XHR对象成为事实上的标准！

跨浏览器创建XHR对象;

function createXHttpRequest() {
  if (typeof XMLHttpRequest !== 'undefined') { //不要用 if(XMLHttpRequest){}这种形式，
    return new XMLHttpRequest();              //如果是这种形式在找不到XMLHttpRequest函数的情况下，会报错。
} else if (typeof ActiveXObject !== 'undefined') {
         return createXHR(); //用到刚才我们创建的函数
  } else { throw new Error('不能创建XMLHttpRequest对象'); } }

1.2.XMLHttpRequest的用法
XMLHttpRequest对象的函数有6个：

open("method",url,boolean);              //该方法的三个参数,分别为----提交方式"get"或者"post"等 　　　　　　　　　　　　　　　 //&& url是相对于执行代码的当前页面的路径（使用绝对路径是允许的）&&是否异步 send();               //这个方法接收一个参数，这个参数是作为请求主体发送的数据,            //说明： 如果有参数，请使用post方式提交 使用方式如下，send("user="+username+"&pwd="+password);           //如果没有参数，为了兼容性考虑，必须在参数中传入null,即send(null)；该方式使用get方式提交abort();       //取消当前响应，关闭连接并且结束任何未决的网络活动。          //这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决             //的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。getResponseHeader()             //返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任             //何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。          //该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者 readyStat             //e 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并             //返回，使用逗号和空格分隔开各个头部的值。getAllResponseHeaders()                 //把 HTTP 响应头部作为未解析的字符串返回。          //如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的          //头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 "/r/n" 隔开。setRequestHeader()         //向一个打开但未发送的请求设置或添加一个 HTTP 请求。