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<x.length;i++)
    {
    txt=txt + x[i].childNodes[0].nodeValue + "<br />";
    }
    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 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。什么是 AJAX ? AJAX = ...
    逍遥叹6阅读 1,794评论 0 0
  • 1、ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth...
    raincoco阅读 3,077评论 0 4
  • 要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤: (1)创建XMLHttpRequest对象,也就...
    亲爱的翔子阅读 3,388评论 0 0
  • 一、什么是ajax? AJAX(AsynchronousJavaScriptandXML):异步的JavaScri...
    猿基地阅读 3,916评论 0 1
  • 节点 i 的左子节点在位置: 2 i + 1节点 i 的右子节点在位置: 2 i + 2节点 i 的父节点在位置:...
    爱上落入尘世间的你阅读 884评论 0 0