jQuery自带的一些常用方法总结(4)


$.getScript('/static/js/myScript.js', function() {
    functionFromMyScript();
});


上面代码先从服务器加载myScript.js脚本,然后在回调函数中执行该脚本提供的函数。

getScript的回调函数接受三个参数,分别是脚本文件的内容,HTTP响应的状态信息和ajax对象实例。

复制代码 代码如下:


$.getScript( "ajax/test.js", function (data, textStatus, jqxhr){
  console.log( data ); // test.js的内容
  console.log( textStatus ); // Success
  console.log( jqxhr.status ); // 200
});


getScript是ajax方法的简便写法,因此返回的是一个deferred对象,可以使用deferred接口。

复制代码 代码如下:


jQuery.getScript("/path/to/myscript.js")
    .done(function() {
        // ...
    })
    .fail(function() {
        // ...
});

(4)$.fn.load()

$.fn.load不是jQuery的工具方法,而是定义在jQuery对象实例上的方法,用于获取服务器端的HTML文件,将其放入当前元素。由于该方法也属于ajax操作,所以放在这里一起讲。

复制代码 代码如下:


$('#newContent').load('/foo.html');


$.fn.load方法还可以指定一个选择器,将远程文件中匹配选择器的部分,放入当前元素,并指定操作完成时的回调函数。

复制代码 代码如下:


$('#newContent').load('/foo.html #myDiv h1:first',
    function(html) {
        console.log('内容更新!');
});


上面代码只加载foo.html中匹配“#myDiv h1:first”的部分,加载完成后会运行指定的回调函数。

Ajax事件

jQuery提供以下一些方法,用于指定特定的AJAX事件的回调函数。

.ajaxComplete():ajax请求完成。
.ajaxError():ajax请求出错。
.ajaxSend():ajax请求发出之前。
.ajaxStart():第一个ajax请求开始发出,即没有还未完成ajax请求。
.ajaxStop():所有ajax请求完成之后。
.ajaxSuccess():ajax请求成功之后。
下面是示例。

复制代码 代码如下:


$('#loading_indicator')
.ajaxStart(function (){$(this).show();})
.ajaxStop(function (){$(this).hide();});

返回值

ajax方法返回的是一个deferred对象,可以用then方法为该对象指定回调函数(详细解释参见《deferred对象》一节)。

复制代码 代码如下:


$.ajax({
  url: '/data/people.json',
  dataType: 'json'
}).then(function (resp){
  console.log(resp.people);
})

JSONP

由于浏览器存在“同域限制”,ajax方法只能向当前网页所在的域名发出HTTP请求。但是,通过在当前网页中插入script元素(\<script>),可以向不同的域名发出GET请求,这种变通方法叫做JSONP(JSON with Padding)。

ajax方法可以发出JSONP请求,方法是在对象参数中指定dataType为JSONP。

复制代码 代码如下:


$.ajax({
  url: '/data/search.jsonp',
  data: {q: 'a'},
  dataType: 'jsonp',
  success: function(resp) {
    $('#target').html('Results: ' + resp.results.length);
  }
});)


JSONP的通常做法是,在所要请求的URL后面加在回调函数的名称。ajax方法规定,如果所请求的网址以类似“callback=?”的形式结尾,则自动采用JSONP形式。所以,上面的代码还可以写成下面这样。

复制代码 代码如下:


$.getJSON('/data/search.jsonp?q=a&callback=?',
  function(resp) {
    $('#target').html('Results: ' + resp.results.length);
  }
);

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgsxjs.html