ajax小记

/Asynchronous JavaScript and XML (异步的javascript和XML)

var xmlhttp;

//适配IE5和IE6
if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
} else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

/*将请求发送到服务器
第一个参数：请求的发送方式(GET或POST)  第二个参数：文件的存放路径  第三个参数：是否异步
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
 1.无法使用缓存文件（更新服务器上的文件或数据库）
 2.向服务器发送大量数据（POST 没有数据量限制）
 3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
*/
xmlhttp.open("GET", "txt.txt", true);
xmlhttp.send();

//当需要发送的参数很少时,可以在GET方法中的url参数后通过querystring带上需要传送的参数
xmlhttp.open("GET", "url?id=aa&name=bb", true);
xmlhttp.send();

//POST请求
xmlhttp.open("POST", "url", true);

//如果需要像HTML表单那样提交数据,则需要使用setRequestHeader()来添加HTTP头。然后在send()方法中发送需要的参数。
//setRequestHeader(header,value):向请求添加 HTTP 头 header:规定表头的名称  value:规定头的值
xmlhttp.open("POST", "url", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("id=aa&name=bb");

//当open()方法的第三个参数 aasync设置为true时,javascript在等待服务器的响应的同时执行其它js脚本,在响应就绪之后
//处理响应。
//async为false时 javascript需要等待响应就绪后才继续执行

//async为true时
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    } else {
        document.getElementById("myDiv").innerHTML = "请求失败！";
    }
}
xmlhttp.open("GET", "url", true);
xmlhttp.send();

//async为false时
xmlhttp.open("GET", "url", false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

//XMLHttpRequest对象的responseText:已字符串的形式返回响应数据 
//                    responseXml:已XML的形式返回响应数据

//readyState:存有XMLHttpRequest的状态信息 readyState每次改变都会触发onreadystatechange事件
//readyState值  0：请求未初始化  1：服务器连接已建立  2：请求已接收  3：请求处理中  4：请求已完成,且响应已就绪
//status   200："OK"   404：未找到页面


//jQuery中的ajax方法使用
//$.ajax([settings])
//参数： options:object类型,ajax请求设置.
//       async:boolean类型,默认值为true. 
//       beforeSend(XHR):function 这是一个ajax事件,如果返回false,可以取消本次ajax请求.
//       cache:boolean类型,默认true,dataType为script和jsonp时默认为false.设置为false时将不缓存此页面.
//       complete(XHR,TS):function 请求完成后回调函数(请求成功或失败后都调用)
//       contentType:string类型 默认值："application/x-www-form-urlencoded" 发送信息至服务器时内容编码类型。
//       dataType: 返回数据的类型,可指定的类型：html、json、jsonp、script 或者 text。

$.ajax({
    url: "url",
    data: {

    },
    datatype:"json",
    success: function (data) {
        $("#id").html(data);
    }
})


//如果服务器需要HTTP验证,可以设置用户名和密码(即username和password).
//默认情况下,请求总会被发出去但浏览器可能会从它的缓存中调取数据.要禁止使用缓存的结果,可以设置cache参数为false.
//如果希望判断数据自从上次请求后没有更改就报告出错的话,可以设置ifModified为true.

//常用的两种简写方式
$.get("url", data, function (data) {
    alert(data);
}, "text");

$.post("url", { data}, function(data) {
    alert(data);
},"text")