AJAX小结

1.AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
2.AJAX = 异步 JavaScript 和 XML。
3.AJAX 是一种用于创建快速动态网页的技术。
4.AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等

一 对象的创建
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

二 异步判断
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
}

三 XMLHttpRequest 对象的 responseText 或 responseXML 属性

  1. document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//获得字符串形式的响应数据
  2. xmlDoc=xmlhttp.responseXML;//获得 XML 形式的响应数据
    txt="";
    x=xmlDoc.getElementsByTagName("ARTIST");
    for (i=0;i {
    txt=txt + x[i].childNodes[0].nodeValue + "
    ";
    }
    document.getElementById("myDiv").innerHTML=txt;

四 向服务器发送请求
xmlhttp.open("method "," url ", async);
xmlhttp.send(string);

method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)

只有当method设置post时,send用string

五。通过jQuery实现加载后台数据
$("div").load(URL,data,callback)
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。

    callback的用法
    $("button").click(function(){

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});

    $.get(URL,callback);
    必需的 URL 参数规定您希望请求的 URL。
    可选的 callback 参数是请求成功后所执行的函数名。

    $.post(URL,data,callback);
    必需的 URL 参数规定您希望请求的 URL。
    可选的 data 参数规定连同请求发送的数据。
    可选的 callback 参数是请求成功后所执行的函数名。

你可能感兴趣的:(AJAX小结)