>

两个全局事件必发88官网

- 编辑:www.bifa688.com -

两个全局事件必发88官网

加载请求: .ajaxStart() 和 .ajaxstop()

AJAX是指一种创制交互式网页运用的网页开采才干。通过在后台与服务器实行一些些数据交流,AJAX 能够使网页达成异步更新。那象征能够在不重复加载整个网页的情事下,对网页的某某个开始展览立异[百度健全]

剧情提纲:

    $(document).ajaxStart(function(){
        $('.loading').show();
    }).ajaxStop(function(){
        $('.loading').hide();
    });

 

 

错误管理: .ajaxError()

** XMLHttpRequest对象

一.加载请求

    //1 $.ajax()使用属性提示错误
    $('form input[type=button]').click(function(){
        $.ajax({
            type:"post",
            url:"test1.php",
            async:true,
            data:$('form').serialize(),
            success:function(response,status,xhr){
                $('#box').html(response);
            },
//            timeout:3000
//            global:false
            error:function(xhr,errorText,errorType){
//                alert(errorText   ':'  errorType);
                alert(xhr.status   ':'  xhr.statusText);
            }

        });
    });

    //2 $.post()使用连缀.error()方法提示错误,将被.fail()取代
    $('form input[type=button]').click(function(){
        $.post('test1.php').error(function(xhr,errorText,errorType){
            alert(errorText   ':'  errorType);
            alert(xhr.status   ':'  xhr.statusText);
        });
    });

    //3 使用全局.ajaxError()方法
    $(document).ajaxError(function(event,xhr,settings,info){
        alert(event.type);
        alert(event.target);
        for(var i in event){ //打印出event的所有属性
            document.write(i   '<br />');
        }
    });

XMLHttpRequest 用于在后台与服务器沟通数据。那意味着能够在不重复加载整个网页的意况下,对网页的某有个别开始展览更新。

 

.ajaxSuccess(),对应二个片段方法:.success(),请求成功完成时进行。

常用属性:

二.错误管理

.ajaxComplete(),对应贰个有些方法:.complete(),请求达成后注册3个回调函数。

readyState 属性:存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。

状态   描述
0       请求未初始化(在调用 open() 之前)
1       请求已提出(调用 send() 之前)
2       请求已发送(这里通常可以从响应得到内容头部)
3       请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)
4       请求已完成(可以访问服务器响应并使用它)

responseText 属性:可以通过 responseText 属性来取回由服务器返回的数据。

Status属性:服务器返回的http状态码。200表示“成功”,404表示“未找到”,500表示“服务器内部错误”等。

statusText属性:服务器返回状态的文本信息。

responseXML属性:服务器响应的XML内容对应的DOM对象

 

.ajaxSend(),未有对号入座的局地方法,唯有属性 beforeSend,请求发送从前要绑定的函数。

 

叁.请求全局事件

    //$.post()使用全局
    $('form input[type=button]').click(function(){
        $.post('test.php',$('form').serialize());
    });

    $('document').ajaxSend(function(){
        alert(发送请求之前执行);
    }).ajaxComplete(function(response,status,xhr){
        alert('请求完成后,不管是否失败成功');
    }).ajaxSuccess(function(event,xhr,settrings){
        alert('请求成功后,不管是否成功');
    }).ajaxError(function(event,xhr,settrings){
        alert('请求失败后');
    });

    //$.post()使用局部
    $('form input[type=button]').click(function(){
        $.post('test.php',$('form').serialize()).success(function(){
            alert('请求成功后');
        }).complete(function(){
            alert('请求完成后');
        }).error(function(){
            alert('请求失败后');
        });
    });

    //$.ajax()使用属性
    $('form input[type=button]').click(function(){
        $.ajax({
            type:"post",
            url:"test1.php",
            async:true,
            data:$('form').serialize(),
            success:function(response,status,xhr){
                alert('请求成功后');
            },
            complete:function(){
                alert('请求完成后,不管失败成功');
            },
            beforeSend:function(){
                alert('发送请求之前');
            },
            error:function(xhr,errorText,errorType){
                alert('请求失败后');
            }
        });
    });    

** load()方法

 

注:

         .load()方法能够参数多少个参数:url(必须,请求 html 文件的 url 地址,参数类型为String)、data(可选,发送的 key/value 数据,参数类型为Object)、callback(可选,成功或败北的回调函数,参数类型为函数 Function)

4.JSON 和 JSONP

jQuery一.五 版本之后,使用.success()、.error()和.complete()连缀的章程,能够用.done()、.fail()和.always()取代。

// post方式发送 url | data | callback function

       $("input").eq(1).click(function(e){

           $("div").load("/jquery/Ajax_load",{

              url:'send url',

           },function(response, status, xhr){// 返回值状态

              /*

                  XMLhttpRequest 对象属于JavaScript范畴

                  属性:

                     responseText:返回的主题

                     responseXML:返回包含数据的XML DOM文档

                     status:响应的HTPP状态

                     statusText:HTTP状态说明

              */

              // alert("返回值:" response " | 返回状态:" status);

              alert("responseText: " xhr.responseText

                     "responseXML: " xhr.responseXML

                     "status: " xhr.status

                     "statusText: " xhr.statusText);

           });

       });

 

 

5.jqXHR 对象

**  $.get()和$.post()

 

         .load()方法是部分方法,因为她须求2个暗含成分的 jQuery 对象作为前缀。而$.get()和

发文不易,转发请注脚出处!

$.post()是全局方法,无须内定有个别成分。对于用途来讲,.load()适合做静态文件的异步获取,而对于必要传递参数到服务器页面包车型大巴,$.get()和$.post()越发方便。

 

         $.get()方法有五个参数,后面多个参数和.load()同样,多了3个第5参数 type,即服务

 

器再次来到的源委格式:包蕴 xml、html、script、json、jsonp 和 text。

 

/*

           get: 地址url, 数据data, 回调函数, 返回类型

           返回类型: html, json, xml, text等

       */

       $('input').eq(0).click(function(){

           $.get('/jquery/Ajax_load',{data:"some request data"},function(response,status,xhr){

              if(status=='success'){

                  $("div").html(response);

              }else{

                  alert("responseText: " xhr.responseText

                         "status: " xhr.status

                         "statusText: " xhr.statusText);

              }

           },'html');

       });

在 Ajax 基础一篇中,大家询问了最中央的异步管理方式。本篇来打探一下 Ajax 的有些大局请求事件、跨域管理和其它部分难点。

$.post()方法和$.get()方法同样

 

/* post */

       $('input').eq(1).click(function(){

           $.post('/jquery/Ajax_load',{data:'use ajax send data'},function(response,status,xhr){

              if(status=='success'){

                  $("div").html(response);

               }else{

                  alert("responseText: " xhr.responseText

                         "status: " xhr.status

                         "statusText: " xhr.statusText);

              }

           });

       });

一.加载呼吁

 

 

** $.getScript()和$.getJSON()

在 Ajax 异步发送请求时,遭受网速非常的慢的处境,就汇合世请求时间较长的难点。而超越一定时期的请求, 用户就能变得不再耐烦而关门大吉页面。 而1旦在呼吁时期能给用户一些提示,比方:“正在着力加载中...”,那么同样的伸手时间会让用户体验越来越的好一些。

jQuery 提供了一组用于特定异步加载的点子:$.getScript(),用于加载特定的 JS 文件;

 

$.getJSON(),用于特意加载 JSON 文件。

jQuery 提供了四个全局事件,.ajaxStart()和.ajaxStop()。那三个全局事件,只要用户触发了 Ajax,请求初叶时(未成功其余请求)激活.ajaxStart(),请求结束时(全体请求都终止了)激活.ajaxStop()。

 

 

** $.ajax()

//请求加载提示的来得和隐形

         $.ajax()是全部 ajax 方法中最尾巴部分的方法,全数别的艺术都以依照$.ajax()方法的包装。

 

其1措施唯有3个参数。

$('.loading').ajaxStart(function () {

/*

           $.ajax

           常用参数:

           url 发送请求的地址

           type 请求方式get或者post

           timeout 请求超时时间

           data 发送到服务器的数据

           dataType 返回的数据类型

           complate 请求完成后调用的回调函数

           success 请求成功后调用的回调函数

           error 请求失败后调用的回调函数

           contentType 指定请求内容的类型

           dataFilter 用来筛选响应数据的回调函数

           ......

       */

       $('input').eq(2).click(function(){

           $.ajax({

              url:'/jquery/Ajax_load',

              type:'post',

              data:{data:'use ajax send data'},

              success:function(response,status,xhr){

                  if(status=='success'){

                     $("div").html(response);

                  }else{

                     alert("responseText: " xhr.responseText

                            "status: " xhr.status

                            "statusText: " xhr.statusText);

                  }

              }

           });

       });

 

 

  $(this).show();

** 表单类别化

 

利用表单种类化方法.serialize(),会智能的获取钦点表单内的具备因素。那样,在面对大气表单成分时,会把表单成分内容类别化为字符串,然后再采取Ajax请求。

  }).ajaxStop(function () {

         除了.serialize()方法,还有三个得以回来JSON 数据的秘籍:.serializeArray()。这几个办法

 

能够平昔把多少整合成键值对的 JSON对象。

  $(this).hide();

<form>

       用户名:<input name="user" type="text"><br/>

       电话号码:<input name="phone" type="text"><br/>

       性别:  <input name="gender" value='1' type="radio" checked="checked">男

              <input name="gender" value="0" type="radio">女<br/>

       <input type="submit" value="submit">

    </form>

#1 .serialize()

$("input[type=submit]","form").click(function(){

           $.ajax({

              url:'/jquery/Ajax_Adv',

              data:$("form").serialize(),

              type:'post',

               success:function(resp, status, xhr){

                  $("div").html(resp);

              }

           });

           returnfalse;

       });

#2 .serializeArray

$("input[type=submit]","form").click(function(){

           $.ajax({

              url:'/jquery/Ajax_Adv',

              data:$("form").serializeArray(),

              type:'post',

               success:function(resp, status, xhr){

                  $("div").html(resp);

              }

           });

           returnfalse;

       });

 

 

});

** 请求加载

 

jQuery 提供了三个全局事件,.ajaxStart()和.ajaxStop()。那五个全局事件,只要用户触发

PS:以上代码在 jQuery一.八 及然后的本子不再灵光,供给引进jquery-migrate 向下包容文件技术运行。新本子中,必须绑定在 document 成分上。

了Ajax,请求开头时(未到位其他请求)激活.ajaxStart(),请求停止时(全体请求都截止了)激活.ajaxStop()。

 

$("div").ajaxStart(function(){

      alert("开始 AJAX 请求已完成");

  });

  $("div").ajaxStop(function(){

      alert("所有 AJAX 请求已完成");

  });

$(document).ajaxStart(function () {

 

 

** 请求全局事件

  $('.loading').show();

jQuery对于Ajax 操作提供了好些个大局事件措施,.ajaxStart()、.ajaxStop()、.ajaxError()

 

等事件措施。他们都属于请求时接触的全局事件,除了这一个,还有一点点别的全局事件:

  }).ajaxStop(function () {

.ajaxSuccess(),对应多少个局地方法:.success(),请求成功达成时实践。

 

.ajaxComplete(),对应五个有的方法:.complete(),请求完毕后注册多个回调函数。

  $('.loading').hide();

.ajaxSend(),未有对应的片段方法,唯有属性beforeSend,请求发送从前要绑定的函数。

 

 

});

** jqXHR对象

 

         在前面,我们采取了有个别方法:.success()、.complete()和.error()。那多少个部分方法并不

 

是XMLHttpRequest 对象调用的,而是$.ajax()之类的大局方法再次来到的对象调用的。这么些目的,正是 jqXH宝马X5对象,它是原生对象XH奥迪Q7的八个超集。

 

         使用 jqXH安德拉的衔接形式比$.ajax()的属个性局有3大利润:

//假使请求时间太长,能够设置超时

一.可对接操作,可读性大大提高

 

二.得以频仍实施同三个回调函数

$.ajax({

三.为多个操作钦赐回调函数

 

 

  timeout : 500

** .done()、.Fail()、always()

 

使用.success()、.error()和.complete()连缀的法子,能够用.done()、.fail()和.always()替代。

});

$("input[type=submit]").click(function(){

           $.ajax({

              url:'/jquery/Ajax_Adv',

              data:$("form").serializeArray(),

              type:'post',

           }).done(function(resp){

              $("div").empty();

              $("div").append("<span>" resp " ==> 1</span><br/>");

           }).done(function(resp){

              $("div").append("<span>" resp " ==> 2</span>");

           }).fail(function (statusText, status){

              alert(statusText " | " status);

           }).always(function(resp,status,xhr){

              alert("状态:" status " | 返回数据:" resp);

              console.log(xhr);

           });

           returnfalse;

       });

 

 

 

 

//借使某些 ajax 不想触发全局事件,能够设置global撤废

 

$.ajax({

 

  global : false

 

});

 

 

 

二.错误管理

 

Ajax 异步提交时,十分小概具备处境都是马到成功完成的,也有因为代码异步文件漏洞百出、互连网错误形成提交败北的。那时,大家应该把错误报告出来,提示用户重新提交或升迁开采者实行缝补。

 

 

 

在事先高层封装中是未有回调错误管理的,比方$.get()、$.post()和.load()。所以,早期的办法通过全局的 .ajaxError()事件措施来回到错误新闻。而在 jQuery1.5之后,能够通过连接处理使用局地.error()方法就可以。而对此$.ajax()方法,不但能够用那二种艺术,还有温馨的品质方法 error : function () {}。

 

//$.ajax()使用质量方法提醒错误

 

复制代码

 1 $.ajax({

 2 

 3     type : 'POST',

 4 

 5     url : 'test1.php',

 6 

 7     data : $('form').serialize(),

 8     

 9     success : function (response, status, xhr) {

10 

11         $('#box').html(response);

12 

13     },

14 

15     error : function (xhr, errorText, errorStatus) {

16 

17         alert(xhr.status ':' xhr.statusText);

18 

19     }

20 

21 });

复制代码

 

 

 

 

//$.post()使用连缀.error()方法提醒错误,连缀方法后边将被.fail()代替

 

$.post('test一.php').error(function (xhr, status, info) {   //参数和地方同样

 

  alert(xhr.status ':' xhr.statusText);

 

  alert(status ':' info);

 

});

 

 

 

//$.post()使用全局.ajaxError()事件措施提示错误

 

$(document).ajaxError(function (event, xhr, settings, info) {   //event为事件指标

 

  alert(xhr.status ':' xhr.statusText);

 

  alert(settings ':' info);

 

});

 

 

 

3.伸手全局事件

 

jQuery 对于 Ajax 操作提供了数不胜数大局事件措施,.ajaxStart()、.ajaxStop()、.ajaxError()等事件措施。他们都属于请求时接触的全局事件,除了那么些,还有部分其它的大局事件:

 

.ajaxSuccess(),对应一个片段方法:.success(),请求成功做到时实行。

 

.ajaxComplete(),对应贰个局地方法:.complete(),请求完结后登记二个回调函数。

 

.ajaxSend(),未有相应的有些方法,唯有属性 beforeSend,请求发送以前要绑定的函数。

 

 

 

//$.post()使用一些方法.success()

 

复制代码

1 $.post('test.php', $('form').serialize(), function (response, status, xhr) {

3     $('#box').html(response);

5     }).success(function (response, status, xhr) {

7     alert(response);

9 });

复制代码

 

 

//$.post()使用全局事件方法.ajaxSuccess()

 

$(document).ajaxSuccess(function (event, xhr, settings) {

 

  alert(xhr.responseText);

 

});

 

PS:全局事件措施是颇具 Ajax 请求都会触发到,并且只好绑定在 document 上。而一些方法,则指向某些 Ajax。

 

 

 

对此部分大局事件措施的参数,大多数为对象,而那些指标有怎么着属性或措施能调用,能够经过遍历方法得到。

 

//遍历 settings 对象的性质

 

$(document).ajaxSuccess(function (event, xhr, settings) {

 

  for (var i in settings) {

 

    alert(i);

 

  }

 

});

 

 

 

//$.post()请求完毕的有的方法.complete()

 

$.post('test.php', $('form').serialize(), function (response, status, xhr) {

 

  alert('成功');

 

}).complete(function (xhr,status) {

 

  alert('完成');

 

});

 

//$.post()请求实现的大局方法.ajaxComplete()

 

$(document).ajaxComplete(function (event, xhr, settings) {

 

  alert('完成');

 

});

 

//$.post()请求发送从前的全局方法.ajaxSend()

 

$(document).ajaxSend(function (event, xhr, settings) {

 

  alert('发送请求以前');

 

});

 

 

 

//$.ajax()方法(参加ajax基础篇中此措施的参数),能够直接通过品质设置就可以。

 

复制代码

 1 $.ajax({

 2 

 3     type : 'POST',

 4 

 5     url : 'test.php',

 6 

 7     data : $('form').serialize(),

 8 

 9     success : function (response, status, xhr) {

10 

11         $('#box').html(response);

12 

13     },

14 

15     complete : function (xhr, status) {

16 

17         alert('完成' ' - ' xhr.responseText ' - ' status);

18 

19    } ,

20 

21     beforeSend : function (xhr, settings) {

22 

贰3         alert('请求从前' ' - ' xhr.readyState ' - ' settings.url);

24 

25     }

26 

27 });

复制代码

 

 

PS:在 jQuery1.伍版本之后,使用.success()、.error()和.complete()连缀的情势,能够用.done()、.fail()和.always()替代。

 

 

 

四.JSON 和 JSONP

 

假使在同八个域下,$.ajax()方法只要设置 dataType 属性就能够加载 JSON 文件。而在非同域下,能够使用 JSONP,但也是有标准的。

 

//同一个域下$.ajax()加载 JSON 文件

 

复制代码

 1 $.ajax({

 2 

 3     type : 'POST',

 4 

 5     url : 'test.json',

 6 

 7     dataType : 'json',

 8 

 9     success : function (response, status, xhr) {

10 

11         alert(response[0].url);

12 

13     }

14 

15 });

复制代码

 

 

万一想跨域操作文件的话,咱们就非得运用 JSONP。JSONP(JSON with Padding)是三个地下的协商,它同目的在于服务器端集成 Script tags 重临至客户端,通过 javascript callback 的样式落到实处跨域访问(这仅仅是 JSONP 轻便的贯彻格局) 。

 

//跨域的 PHP 端文件

 

复制代码

 1 <?php

 2 

 3 $arr = array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);

 4 

 5 $result = json_encode($arr);

 6 

 7 $callback = $_GET['callback'];

 8 

 9 echo $callback."($result)";

10 

11 ?>

复制代码

 

 

 

 

//$.getJSON()方法跨域获取 JSON

 

$.getJSON('', function (response) {

 

  console.log(response);

 

});

 

 

 

//$.ajax()方法跨域获取 JSON

 

复制代码

 1 $.ajax({

 2 

 3     url : '',

 4 

 5     dataType : 'jsonp',        //那儿设置为jsonp那么地方一行能够不用  "?callback=?" 了 !

 6 

 7     success : function (response, status, xhr) {

 8 

 9         console.log(response);

10 

11         alert(response.a);

12 

13     }

14 

15 });

复制代码

 

 

 

 

五.jqXHR 对象

 

在前边,大家选取了一部分方法:.success()、.complete()和.error()。那多个部分方法并不是 XMLHttpRequest 对象调用的,而是$.ajax()之类的全局方法再次来到的指标调用的(见下边示例)。 这几个目的便是 jqXHPAJERO 对象,它是原生对象 XH中华V 的3个超集。

 

//获取 jqXHPRADO 对象,查看属性和办法

 

var jqXHR = $.ajax({

 

  type : 'POST',

 

  url : 'test.php',

 

  data : $('form').serialize()

 

});

 

for (var i in jqXHR) {

 

  document.write(i '<br />');

 

}

 

 

 

PS:要是采用 jqXH奥迪Q叁对象的话,那么建议用.done()、.always()和.fail()替代.success()、.complete()和.error()。感觉在以往版本中,很只怕将那三种方法遗弃撤消。

 

//成功后回调函数

 

复制代码

 1 var jqXHR = $.ajax({

 2 

 3     type : 'POST',

 4 

 5     url : 'test.php',

 6 

 7     data : $('form').serialize()

 8 

 9 });

10 

11  

12 

13 jqXHR.done(function (response) {

14 

15     $('#box').html(response);

16 

17 });

复制代码

 

 

 

 

运用 jqXH途乐 的衔接情势比$.ajax()的属性子局有3大好处:

 

壹.可对接操作,可读性大大进步;

 

贰.足以屡屡推行同四个回调函数;

 

三.为五个操作钦定回调函数;

 

 

 

//同时实践多个成功后的回调函数

 

jqXHR.done().done();

 

 

 

//多少个操作钦点回调函数

 

test1.php文件:

 

<?php

 

         echo 'test1.php'

 

?>

 

test2.php文件:

 

<?php

 

         echo 'test2.php'

 

?>

 

var jqXHR1 = $.ajax('test1.php');

 

var jqXHR2 = $.ajax('test2.php');

 

//使用when方法同时管理多个,不要求各样都单身书写了!

 

$.when(jqXHR1, jqXHR2).done(function (r1,r2) {

 

alert(r1[0]);   //可以打字与印刷下r壹探视结果

 

alert(r2[0]);

 

});

 

 

 

 

 

 For my Lover, C!

 

Thank you, MR. Lee !

一.加载请求 贰.错误管理 三.请求全局事件 4.JSON 和 JSONP 五.jqXH纳瓦拉 对象 发文不易,转发请注脚出处! 在 Ajax 基础1篇中,我们询问了最...

本文由必发88官网发布,转载请注明来源:两个全局事件必发88官网