有关 ajax 的知识

Ajax的主要做用

Ajax的主要做用是向服务器请求数据的同时无需卸载页面,也就是局部刷新,能够带来了更好的用户体验,同时ajax也有他的不足,好比破坏了浏览器的前进后退按钮,对搜索引擎的支持不足,开发和调试工具缺少javascript

javascript中的Ajax

在javascript中,ajax是经过XMLHttpRequest对象来实现的,这个对象用于和后台进行数据的交互。在ie7以前,XHR是经过MSXML库中的ActiveX对象实现的,ie7后咱们能够直接使用 var xhr = new XMLHttpRequest();建立一个XHR对象,建立好以后,咱们就能够经过xhr对象来调用相应的方法了。php

javascript中Ajax的使用方法

在javascript中,调用Ajax主要分为两步,先open,再send
open指的是开启一个请求,而send负责发送这个请求html

  1. open()方法java

    xhr.open('type','url',true);

    第一个参数是请求类型,get/post
    第二个参数是请求的地址 
    第三个参数表示请求是同步仍是异步,true表明异步处理
    注意的一点就是,open方法不会发送请求,只是启动一个请求准备发送jquery

  2. send()方法ajax

    xhr.send(null);

    send方法将请求送给服务器 send方法接受一个参数做为要发送的数据,若是不须要发送数据,参数设为nullsql

  3. 检测响应状态码
    通常请求发送以后,咱们能够根据xhr的status属性来判断下一步的操做,status属性会返回一个http状态码
    100-200表示请求已经接受,须要继续处理
    200-300表示请求已被服务器成功接收
    300-400表示重定向,须要客户端采起进一步操做
    400-500表示客户端发生错误, 妨碍了服务器的处理
    500-600表示服务器处理请求的过程发生错误json

    `if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ console.log(“request success”); }else{ console.log(“request failed”); } ` 
  4. 检测 readyStatus属性
    发送异步请求的时候,通常要检测xhr的readyState属性,这个属性表示请求过程的当前活动阶段,一共有5个值,0,1,2,3,4
    0表明为初始化,open()未调用
    1表明启动 已调用open,未调用send
    2表明 已经调用send, 但尚未接受到响应
    3表明 接受到部分响应数据
    4表明 接受到所有响应数据
    当readyState的值发生变化时,就会触发一次readystatechange事件,用这个事件检测每次状态变化后的值。数组

var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if((xhr.status>=200&&xhr.status<300)||xhr.status==304){ console.log('request success'); }else{ console.log('request failed'); } } } xhr.open('get','test.php',true); xhr.send(null); 

get请求和post请求

get请求,经常使用于向服务器查询某些信息,get可将查询的字符串参数加在url的末尾浏览器

xhr.open('get','test.phpname1=value1&name2=value2',true); 

post请求,一般用于向服务器发送应该被保存的数据,post请求的主体能够包含格式不限且大量的数据,

xhr.open('post','test.php',true); xhr.send('name1=value1&name2=value2'); 

get请求和post请求的区别

  1. get请求会将参数跟在url后进行传递,而post则是做为http消息实体内容发送给服务器

  2. get方式对于传输的数据有大小限制,一般不能大于2kb,而post方式传递的数据量大小没有限制

  3. get方式会将请求的数据会被缓存起来,能够从浏览器的历史记录中读取这些数据,因此会带来一些安全性方面的问题,而post相对来讲安全不少

jQuery中的Ajax

javascript的ajax操做比较复杂, jQuery提供了一系列的方法,大大简洁了Ajax开发

1.load()方法

load(url,data,callback);

load方法主要是用来远程载入HTML代码并插入DOM 第一个参数是要访问的HTML的url地址 第二个参数是要发送至服务器的key:value数据 第三个参数是回调函数,须要注意的是:load方法的回调函数不管请求成功或者失败都会执行 load方法的传递方式是根据参数data来自动指定的 $('#submit').load('test.php',function(){}); // 无参数传递,get方式 $('#submit').load('test.php'{name:'fang',age:'30'},function(){}); // 有参数传递,post方式 

2.$.get()方法

$.get(url,data,callback,type)

前两个参数和load方法是同样的 可是回调函数只有在载入成功的时候才会执行 第四个参数是服务器返回的内容格式,如xml,html,json,script,text $.get('test.php',{ name : 'fang', age : '33' },function(){ //回调函数 },type) 

3.$.post()方法

$.post(url,data,callback,type)

前两个参数和load,$.get()方法是同样的 可是回调函数只有在载入成功的时候才会执行 第四个参数是服务器返回的内容格式,如xml,html,json,script,text $.post('test.php',{ name : 'fang', age : '33' },function(){ //回调函数 },type) 

4.$.ajax()方法

$.ajax()方法,这是方法不只但是实现上面的load,$.get(),$.post()方法,并且还能够设定多种状态下的回调函数
$.ajax(options)是jQuery的最底层Ajax实现,这个方法只有一个参数,可是这个参数内包含了所须要的一切信息,参数以key:value形式存在,全部参数都是可选的
$.ajax(url,type,timeout,data,datatype,beforeSend,complete,success,error,global)这些是全部的参数
url:发送请求的地址
type:请求方式,默认get
timeout:设置请求超时时间
data:发送到服务器的数据
datatype:预期服务器返回的数据类型
beforeSend:发送请求前能够修改XMLHttpRequest对象的函数
complete:请求完成后调用的回调函数
success:请求成功后调用的回调函数
error:请求失败后调用的回调函数
global:表示是否触发全局Ajax事件,默认为true

 



$.ajax({ url:'test.php', type:'GET', datatype:'json', beforeSend:function(){}, success:function(){}, error:function(){}, complete:function(){} })

JQuery 的AJAX方法使用很是的便利,而且提供了一些AJAX的全局方法供调用,合理使用这些方法将会产生很是大的帮助。

所谓全局方法,是指每当调用JQuery的AJAX方法,都会自动调用这些全局方法,如下是JQuery的全部全局方法:

 

 

[html]  view plain  copy
 
  1. ajaxStart:ajax请求开始前  
  2. ajaxSend:ajax请求时  
  3. ajaxSuccess:ajax获取数据后  
  4. ajaxComplete:ajax请求完成时  
  5. ajaxError:ajax请求发生错误后  
  6. ajaxStop:ajax请求中止后  
  7. ajax请求中的6个全局事件

     
    复制代码
    //事件触发顺序ajaxStart,ajaxSend,ajaxSuccess或ajaxError,ajaxComplete,ajaxStop
    
    $(document).ajaxStart(function (event) {
        /*
         * 每个ajax即将发送的时候触发该事件,只有一个事件对象参数
         */
        console.log('ajaxStart');
    })
    
    $(document).ajaxSend(function (event,xhr,opts,err) {
        /*
         * 每个ajax即将发送的时候触发该事件
         * 此方法接受四个参数,分别是事件对象,XHR对象,和发起ajax请求的配置对象,错误信息
         */
        if(opts.type == 'get'){
            xhr.abort();
        }    
    })
    
    $(document).ajaxSuccess(function (event,xhr,opts) {
        /*
         * 此方法接受三个参数,分别是事件对象,XHR对象,和发起ajax请求的配置对象
         * 每个ajax请求成功都会触发该事件
         * 配置对象中的success回调会先执行,而后再执行这个事件
         */
        console.log(JSON.parse(xhr.responseText))
    })
    
    $(document).ajaxError(function (event,xhr,opts,err) {
        /*
         * 此方法接受四个参数,分别是事件对象,XHR对象,和发起ajax请求的配置对象,错误信息
         * 每个ajax请求失败都会触发该事件
         * 配置对象中的error回调会先执行,而后再执行这个事件
         * 若是是客户端错误致使请求失败,err的值有多是timeout,error,abort,或者是抛出错误异常对象
         */
        console.log(err)
    })
    
    $(document).ajaxComplete(function (event,xhr,opts) {
        /*
         * 此方法接受三个参数,分别是事件对象,XHR对象,和发起ajax请求的配置对象
         * 每个ajax请求完成都会触发该事件,无论请求的结果如何
         * 配置对象中的complete回调会先执行,而后再执行这个事件
         */
    })
    
    $(document).ajaxStop(function (event) {
        /*
         * 此方法只接受一个事件对象参数,此事件只触发一次
         * 当全部ajax请求完成的时候调用一次,无论ajax请求的状态是失败仍是成功或是被取消
         */
    })
    复制代码

     注意:ajaxStart和ajaxSend事件必须放在ajax请求代码以前,否则不会触发

     

    jquery ajax中success与complete的执行顺序

    http://blog.sina.com.cn/s/blog_4adc4b090101dhnh.html

    https://q.cnblogs.com/q/21810/

    ******************************************************************

     

    1. ajaxStart:ajax请求开始前  
    2. ajaxSend:ajax请求时  
    3. ajaxSuccess:ajax获取数据后  
    4. ajaxComplete:ajax请求完成时  
    5. ajaxError:ajax请求发生错误后  
    6. ajaxStop:ajax请求中止后  

    jquery中各个事件执行顺序以下:

    1.ajaxStart(全局事件)

    2.beforeSend

    3.ajaxSend(全局事件)

    附加的 ajaxEnd()事件

    4.success

    5.ajaxSuccess(全局事件)

    6.error

    7.ajaxError (全局事件)

    8.complete

    9.ajaxComplete(全局事件)

    10.ajaxStop(全局事件)

    先执行success,再执行error,最后始终执行complete

    ----------------------

     

    区别的就是 --- 

    success:当请求成功时调用函数,即status==200;

    complete:当请求完成时调用函数,即status==40四、40三、302...只要不出错就行。

     

     

    由于一般咱们须要用来清理资源   因此就设计成compelete在success以后执行 

    jquery中的ajax方法参数老是记不住,这里记录一下。

     

    1.url
    要求为String类型的参数,(默认为当前页地址)发送请求的地址。

    2.type
    要求为String类型的参数,请求方式(post或get)默认为get。注意其余http请求方法,例如put和delete也可使用,但仅部分浏览器支持。

    3.timeout
    要求为Number类型的参数,设置请求超时时间(毫秒)。此设置将覆盖$.ajaxSetup()方法的全局设置。

    4.async
    要求为Boolean类型的参数,默认设置为true,全部请求均为异步请求。若是须要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其余操做必须等待请求完成才能够执行。(一般都是异步的请求,须要在请求完成后执行的操做通常放在回调函数里边)

    5.cache
    要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false),设置为false将不会从浏览器缓存中加载请求信息。

    6.data
    要求为Object或String类型的参数,发送到服务器的数据。若是已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,能够查看  processData选项。对象必须为key/value格式,例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。若是是数组,JQuery将自动为不一样值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。

    7.dataType
    要求为String类型的参数,预期服务器返回的数据类型。若是不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并做为回调函数参数传递。可用的类型以下:
    xml:返回XML文档,可用JQuery处理。
    html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
    script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),全部post请求都将转为get请求。
    json:返回JSON数据。
    jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
    text:返回纯文本字符串。

    8.beforeSend
    要求为Function类型的参数,发送请求前能够修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中若是返回false能够取消本次ajax请求。XMLHttpRequest对象是唯一的参数。
                function(XMLHttpRequest){
                   this;   //调用本次ajax请求时传递的options参数
                }
    9.complete
    要求为Function类型的参数,请求完成后调用的回调函数(请求成功或失败时均调用)。参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。
              function(XMLHttpRequest, textStatus){
                 this;    //调用本次ajax请求时传递的options参数
              }

    10.success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
             (1)由服务器返回,并根据dataType参数进行处理后的数据。
             (2)描述状态的字符串。
             function(data, textStatus){
                //data多是xmlDoc、jsonObj、html、text等等
                this;  //调用本次ajax请求时传递的options参数
             }

    11.error:
    要求为Function类型的参数,请求失败时被调用的函数。该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数以下:
           function(XMLHttpRequest, textStatus, errorThrown){
              //一般状况下textStatus和errorThrown只有其中一个包含信息
              this;   //调用本次ajax请求时传递的options参数
           }

    12.contentType
    要求为String类型的参数,当发送信息至服务器时,内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。

    13.dataFilter
    要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
                function(data, type){
                    //返回处理后的数据
                    return data;
                }

    14.dataFilter
    要求为Function类型的参数,给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据,type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。
                function(data, type){
                    //返回处理后的数据
                    return data;
                }

    15.global
    要求为Boolean类型的参数,默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件,ajaxStart或ajaxStop可用于控制各类ajax事件。

    16.ifModified
    要求为Boolean类型的参数,默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false,即忽略头信息。

    17.jsonp
    要求为String类型的参数,在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分,例如{jsonp:'onJsonPLoad'}会致使将"onJsonPLoad=?"传给服务器。

    18.username
    要求为String类型的参数,用于响应HTTP访问认证请求的用户名。

    19.password
    要求为String类型的参数,用于响应HTTP访问认证请求的密码。

    20.processData
    要求为Boolean类型的参数,默认为true。默认状况下,发送的数据将被转换为对象(从技术角度来说并不是字符串)以配合默认内容类型"application/x-www-form-urlencoded"。若是要发送DOM树信息或者其余不但愿转换的信息,请设置为false。

    21.scriptCharset
    要求为String类型的参数,只有当请求时dataType为"jsonp"或者"script",而且type是GET时才会用于强制修改字符集(charset)。一般在本地和远程的内容编码不一样时使用。

    案例代码:

    复制代码
    复制代码
    $(function(){
        $('#send').click(function(){
             $.ajax({
                 type: "GET",
                 url: "test.json",
                 data: {username:$("#username").val(), content:$("#content").val()},
                 dataType: "json",
                 success: function(data){
                             $('#resText').empty();   //清空resText里面的全部内容
                             var html = ''; 
                             $.each(data, function(commentIndex, comment){
                                   html += '<div class="comment"><h6>' + comment['username']
                                             + ':</h6><p class="para"' + comment['content']
                                             + '</p></div>';
                             });
                             $('#resText').html(html);
                          }
             });
        });
    });
    复制代码
    复制代码

     

    22.顺便说一下$.each()函数:
    $.each()函数不一样于JQuery对象的each()方法,它是一个全局函数,不操做JQuery对象,而是以一个数组或者对象做为第1个参数,以一个回调函数做为第2个参数。回调函数拥有两个参数:第1个为对象的成员或数组的索引,第2个为对应变量或内容。

     

    jQuery.ajaxSetup() 函数详解

    能够参考这篇:http://www.365mini.com/page/jquery_ajaxsetup.htm

    连接2:http://blog.csdn.net/david_520042/article/details/51952377

    不过要注意:若是用户在本身的ajax定义了和全局ajaxSetup同样的属性,则用户定义的属性会覆盖全局默认的属性。如用户本身定义了属性error,ajaxSetup也定义了error,出现error时,会走用户自定义的error,不会走ajaxSetup的error。

    若是你想写一遍ajaxSetup,让其余页面都支持这个功能,能够这样作:

    写一个js,让替他页面引入这个js就好了。如写ajaxSetup.js,ajaxSetup.js里内容

     

    [html]  view plain  copy
     
    1. $(function(){  
    2.     $.ajaxSetup( {  
    3.         url: "/index.html" , // 默认URL  
    4.         aysnc: false , // 默认同步加载  
    5.         type: "POST" , // 默认使用POST方式  
    6.         headers: { // 默认添加请求头  
    7.             "Author": "CodePlayer" ,  
    8.             "Powered-By": "CodePlayer"  
    9.         } ,  
    10.         error: function(jqXHR, textStatus, errorMsg){ // 出错时默认的处理函数  
    11.             // jqXHR 是通过jQuery封装的XMLHttpRequest对象  
    12.             // textStatus 可能为: null、"timeout"、"error"、"abort"或"parsererror"  
    13.             // errorMsg 可能为: "Not Found"、"Internal Server Error"等  
    14.   
    15.             // 提示形如:发送AJAX请求到"/index.html"时出错[404]:Not Found  
    16.              
    17.             if (jqXHR.status==500) {  
    18.                  alert( '出错[' + jqXHR.status + ']:' + errorMsg+':::'+jqXHR.responseText );    
    19.             }  
    20.             if (jqXHR.status==404) {  
    21.                 alert( '出错[' + jqXHR.status + ']:' + errorMsg+':::'+jqXHR.responseText );    
    22.             }  
    23.               
    24.         }  
    25.     } );  
    26. });  
    而后别的页面引入这个js就好了。

    jQuery.ajaxSetup()函数用于设置AJAX的全局默认设置。

    该函数用于更改jQuery中AJAX请求的默认设置选项。以后执行的全部AJAX请求,若是对应的选项参数没有设置,将使用更改后的默认设置。

    该函数属于全局jQuery对象。

    语法

    jQuery 1.1 新增该静态函数。

     

    [html]  view plain  copy
     
    1. jQuery.ajaxSetup( settings )  

    参数

    参数 描述
    settings Object类型一个对象,其中的每一个属性表示须要更改默认设置的选项,属性值表示更改后的默认值。

    关于settings参数能够识别的属性,请参考jQuery.ajax()中的settings参数说明。其中的全部选项参数都是可选设置的。

    返回值

    jQuery.ajaxSetup()函数没有返回值,或者说其返回值为undefined

    源码中其实最主要的是经过设置这个:$.ajaxSettings.cache=false;

    示例&说明

    如下是与jQuery.ajaxSetup()函数相关的jQuery示例代码,以演示jQuery.ajaxSetup()函数的具体用法:

     

    [html]  view plain  copy
     
    1. //设置AJAX的全局默认选项  
    2. $.ajaxSetup( {  
    3.     url: "/index.html" , // 默认URL  
    4.     aysnc: false , // 默认同步加载  
    5.     type: "POST" , // 默认使用POST方式  
    6.     headers: { // 默认添加请求头  
    7.         "Author": "CodePlayer" ,  
    8.         "Powered-By": "CodePlayer"  
    9.     } ,  
    10.     error: function(jqXHR, textStatus, errorMsg){ // 出错时默认的处理函数  
    11.         // jqXHR 是通过jQuery封装的XMLHttpRequest对象  
    12.         // textStatus 可能为: null、"timeout"、"error"、"abort"或"parsererror"  
    13.         // errorMsg 可能为: "Not Found"、"Internal Server Error"等  
    14.   
    15.         // 提示形如:发送AJAX请求到"/index.html"时出错[404]:Not Found  
    16.         alert( '发送AJAX请求到"' + this.url + '"时出错[' + jqXHR.status + ']:' + errorMsg );          
    17.     }  
    18. } );  
    19.   
    20.   
    21. // 未设置任何参数,但url、async、type、headers、error等参数的默认值均已被$.ajaxSetup()更改(如上)  
    22. $.ajax( );  
    23.   
    24.   
    25. // 设置了url、type、success、error,就使用本身设置的参数值  
    26. // 但async、headers等参数的默认值已被$.ajaxSetup()更改  
    27. $.ajax( {  
    28.     url: "myurl.php?action=list" ,  
    29.     type: "GET" ,  
    30.     success: function( data, textStatus, jqXHR ){  
    31.         alert("返回数据:" + data);  
    32.     } ,  
    33.     error: function(jqXHR, textStatus, errorMsg){  
    34.         alert("本身的error!");          
    35.     }  
    36. });  
    37.   
    38. // 上述$.ajaxSetup()的默认设置对$.get()、$.post()、load()、$.getJSON()、$.getScript()等AJAX函数也生效  
    39. // 由于这些函数也是在内部调用$.ajax()函数来实现的,只不过它们在内部都设置了一些参数  
    40.   
    41.   
    42. // $.get()在内部调用$.ajax()时已设置type为"GET",所以仍然使用GET方式。  
    43. // 但url、async、headers、error等参数的默认值已被$.ajaxSetup()更改  
    44. $.get( );  
    45.   
    46.   
    47. // $.post()在内部调用$.ajax()时已设置type为"POST",所以仍然使用POST方式。  
    48. // url也被设置为"user/action.php?method=addUser"  
    49. // 但async、headers、error等参数的默认值已被$.ajaxSetup()更改  
    50. $.post( "user/action.php?method=addUser" );  
相关文章
相关标签/搜索