ajax的基本使用

一、XMLHttpRequest对象

在ie浏览器里，XHR对象是通过ActiveX对象实现的，而且他有三个不同版本的XHR对象，MSXML.XMLHttp、MSXML.XMLHttp.2.0、MSXML.XMLHttp.3.0，兼容ie7以前的版本的XHR对象的创建：

 //用于ie7之前的版本
function createXHR(){
  if (typeof arguments.callee.activeXString != "string"){
      var versions = [ "MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0",
                       "MSXML2.XMLHttp"];
   for (var i = 0; i < versions.length; i++){
      try {
          new ActiveXObject(versions[i]);
          arguments.callee.activeXString = versions[i];
          break;
          } catch (ex){}
    }
  return new ActiveXObject(arguments.callee.activeXSting);
}

如果要支持高版本的浏览器，上面的代码可以舍弃掉，在上面的函数里加上对原生XHR对象的支持，代码如下：

function createXHR() {
    if (typeof XMLHttpRequest != 'undefined'){
        //检测XHR对象是否存在，如果存在则返回它的新实例
        return new XMLHttpRequest();
    } else if ( typeof ActiveXObject != "undefined"){
        //如果原生的XHR对象不存在，则检测ActiveX对象
        if (typeof arguments.callee.activeXString != "string"){
            var versions = [ "MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0",
            "MSXML2.XMLHttp"];
            for (var i = 0; i < versions.length; i++){
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                } catch (ex){}
            }
            return new ActiveXObject(arguments.callee.activeXSting);
        }
    } else {
        //如果两个都不存在，则抛出一个错误
        throw new Error("No XHR object available");
    }
}

用下面的代码就可以创建兼容的XHR对象了

var xhr = createXHR();
//创建兼容ie的xhr对象

2、XHR的用法：

xhr.open("get","ab.php",false/true);

1、这段代码会向ab.php发送一个get请求，open方法并不会发送一个真实的请求，而是启动一个请求以备发送，要想发送请求，必须调用send方法：

xhr.send(null);

1、send接收一个参数，请求主题发送的数据，如果没有则填写null。
2、请求发送完成后，就要接收来自服务器的响应：

//接收响应的函数
xhr.onreadystatechange = function() {
//判断状态码，我们只对readyState=4和status=200感兴趣，所以只判断这两个
    if (xhr.readyState == 4 && xhr.status == 200) {
//如果状态码正确，则简单console.log
        console.log(xhr.responseText);
    }
}

这样一个简单的ajax就完成了，本地服务器环境是用wampserver搭建的。最后附上后台php的简单代码

<?php
 $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
 $result=json_encode($arr);
 $callback=$_GET['callback'];
 echo $callback."($result)";
?>

这是一个最简单的ajax请求，复杂的请求也是在这个基础上完成的。
备注：本文ajax请求都没有跨域，