编写Ajax

先反反复复复习一次Ajax的编写过程：

1. 创建ajax对象：XMLHttpRequest()
2. 连接服务器：open()
3. 发送请求：send()
4. 接收返回值：onreadystatechange事件、readyState属性：请求状态、status属性：请求结果、responseText

知道这四个步骤之后我们编写代码只需要跟着流程走，就不会乱套。下面开始写代码：

//四个参数：传输的方式，路径，数据，回调函数
function ajax(method,url,data,fnsuccess){
    var xhr;
    //判断浏览器，主要区分IE和其他浏览器
    if(window.XMLHttpRequest){
        xhr=new XMLHttpRequest();
    }
    else{
        xhr=new ActiveXObject('Microsoft.XMLHTTP');
    }
    if(method=='GET' && data){
        //如果是get方式，并且有data：传数据到服务器
        url=url+'?'+data;
    }
    xhr.open(method,url,true);

    if(method=='GET'){
        xhr.send(null);
    }
    else{
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send(data);
    }

    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                if(fnsuccess){
                    fnsuccess(xhr.responseText);
                }

            }
            else{
                alert('出错了，出错状态是：'+xhr.status);
            }
        }
    }
}

这里有几个指的注意的问题：
1、get和post方法传数据的写法：

• get（直接接在路径后面）：var url='/aa.php?time='+new Date()+'&name='+$('username').value;
• post（写在send()方法里）：xhr.send('name='+$('username').value);
  这里也可以引申出一点：对于send()函数， 如果传输方式是get方式，写null或者为空；如果是post方式，参数那就直接写要传输的内容。
  2、如果传输方法为post方法，那么就要在open()后创建请求头文件信息：Object.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  3、在最后阶段接收数据时，responseText只能接收字符串，json和html数据。如果传过来的是xml数据格式，要换用responseXML属性；
  4、这个封装函数在调用时写参数也要注意：’data’参数可以没有，但是调用Ajax时候也要在’data’参数的位置写上”（ajax(‘GET’,’aa.txt’,”,function(str){})）；
  5、处理缓存问题：在url路径加上new Date()或者随机数或者一个变量，只要保证每次刷新页面时url不一样就可以；还有一种方法就是后台处理缓存：header(“Cache-Control: no-cache”);