4 - jQuery AJAX

概念:


AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新

AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)


jQuery load() 方法: (该方法是简单但强大的 AJAX 方法)


$(selector).load(URL,data,callback);

第一个参数: 必需的URL参数规定您希望加载的 URL

第二个参数: 可选的data参数规定与请求一同发送的查询字符串键/值对集合

第三个参数: 可选的callback参数是 load() 方法完成后所执行的函数名称

*可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数

---> responseTxt    包含调用成功时的结果内容

---> statusTXT       包含调用的状态

---> xhr                  包含 XMLHttpRequest 对象


例子:

-------------------示例文件("demo.txt")的内容---------------

<h1>学好jQuery,娶得大美女</h1>

<p id="p1">段落文本生个小女孩</p>

---------------------------HTML代码------------------------------

<div id="div1"><h1>使用 jQuery AJAX 修改文本</h1></div>

---------------------------jQuery代码------------------------------

//获取deme里面的内容

$("button").click(function() {

$("#div1").load("/ys/demo.txt");

});


//获取demo里元素id="p1"的内容

$("button").click(function(){

$("#div1").load("/ys/demo.txt #p1");

});


//加载完成后的回调

$("button").click(function(){

$("#div1").load("/ys/demo.txt",function(responseTxt,statusTxt,xhr){

if(statusTxt=="success")

alert("外部内容加载成功!");

if(statusTxt=="error")

alert("Error: "+xhr.status+": "+xhr.statusText);

});

});

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 670评论 0 3
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,200评论 0 1
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,379评论 0 2
  • 请记得在进行JQuery类库的运用时,加入JQuery类库,并且要保证先写文档就绪函数 $(document).r...
    Sunshinemm阅读 2,919评论 1 40
  • AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHtt...
    碧玉含香阅读 3,274评论 0 7