Ajax入门

什么是AJAX？

AJAX: 异步的Javascript和XML;

XMLHttpRequest对象

//现代浏览器内置XMLHttpRqueset对象;

//IE5 and IE6等用ActiveXObject("Microsoft.XMLHTTP")实现;

//兼容的XMLHttpRqueset对象：
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

请求

//规定请求类型、地址、是否异步
xmlhttp.open(method, url, async);
//method : get/post
//url : url
//async : true/false

//发送请求
xmlhttp.send(string);
//string : 仅用于post请求时

服务器响应

//responseText 获得字符串形式的响应数据
xmlhttp.responseText

//responseXML 获得XML形式的响应数据
xmlhttp.responseXML

onreadystatechange事件

//onreadystatechange 储存函数或函数名，readyState改变时触发

//readystate 储存XMLHttpRequest状态（0 - 4）
0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求完成并且响应

//status 状态
成功：200
未找到页面：404

//当readyState == 4 && status == 200 表示响应已ok
xmlhttp.onreadystatechange = function(){
　　if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
　　　　//获得字符串形式的返回值，也可以获得XML形式的数据responseXML
　　　　alert(xmlhttp.responseText)
　　}
} 

封装AJAX

function getAjax(method, url, fnCall, data){
    //创建兼容的XMLHttpRequest对象
    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    //规定发送形式、地址、异步
    xmlhttp.open(method, url, true);

    //发送
    if(method == "POST" || method == "post"){
        xmlhttp.send(data);
    }else{
        xmlhttp.send();
    }

    //成功
    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
            //获得字符串形式的返回值，也可以获得XML形式的数据responseXML
            fnCall(eval("("+xmlhttp.responseText+")"));
        }
    }
}

//http://localhost/test.txt在本地服务器

getAjax("GET", "http://localhost/test.txt", function(msg){ alert(msg); });