Loading

jQuery中的AJAX

一、底层接口  jQuery.ajax( )

①jQuery.ajax( url [, settings ] )

<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script>
       $.ajax('test.php',{
           type:'GET',
           success: function(reg){
               console.log(reg);//1530065070
               //reg拿到的是响应体
           }
       })
    </script>

②jQuery.ajax( [settings ] )

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <script>
       $.ajax({
           url: 'test.php',//请求地址
           type: 'get',//请求方法
           dataType: 'json',//服务端响应数据类型,跟data没有关系
           data: {id:1},//请求参数
           beforeSend: function(xhr){//请求发去之前触发
               console.log('before send')
            },
           success: function(data){//请求成功之后触发(响应状态码200)
               console.log(data);
               //data会自动根据服务端响应的Content-Type 自动转为对象
               //dataType一旦设置就不再关心服务端响应的Content-Type
               //客户端会主观认为服务端返回的是就是json格式的字符串
            },
           error: function(err){//请求失败触发(响应状态码不为200)
               console.log(err)
            },
           complete: function(){//请求完成触发(不管成功与否)
               console.log('request completed')
            }
       })
    </script>

二、使用一个HTTP GET请求从服务器加载数据  jQuery.get( )

<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script>
       /**jQuery.get( url [, data ] [, success( ) ] [, dataType ] )
       *url 一个包含发送请求的URL字符串
       *data  发送给服务器的字符串或Key/value键值对
       *success() 当请求成功后执行的回调函数
       *dataType 从服务器返回的预期的数据类型。默认：智能猜测（xml, json, script, 或 html）。
       */
       $.get('test.php',{id:1},function(res){
           console.log(res);//1530065738
       })
    </script>

三、使用一个HTTP POST 请求从服务器加载数据  jQuery.post( )

<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script>
       /**jQuery.post( url [, data ] [, success( ) ] [, dataType ] )
       *url 一个包含发送请求的URL字符串
       *data  发送给服务器的字符串或Key/value键值对
       *success() 当请求成功后执行的回调函数
       *dataType 从服务器返回的预期的数据类型。默认：智能猜测（xml, json, script, 或 html）。
       */
       $.post('test.php',{key1:'value1',key2:'value2'},function(res){
           console.log(res);//1530066053
       })
    </script>

四、使用一个HTTP GET请求从服务器加载JSON编码的数据 jQuery.getJSON( )

<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script>
       /**jQuery.getJSON( url [, data ] [, success() ] )
       *url 一个包含发送请求的URL字符串
       *data  发送给服务器的字符串或Key/value键值对
       *success() 当请求成功后执行的回调函数
       *
       * test.php文件:
       * <?php
       *    $arr=array('name'=>'eric','gender'=>'男');
       *    $json=json_encode($arr);
       *    echo $json;
       * ?>  
       */
       $.getJSON('test.php',{key1:'value1'},function(res){
           console.log(res.name+":"+res.gender);//eric:男
       })
    </script>

五、使用一个HTTP GET请求从服务器加载并执行一个 JavaScript 文件  jQuery.getScript( )

<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <script>
       /**jQuery.getScript( url [, success() ] )
       *url 一个包含发送请求的URL字符串
       *success() 当请求成功后执行的回调函数
       *
       * test.js文件:
       * console.log('js文件已经执行');  
       */
       $.getScript('test.js',function(){
           console.log('回调函数已经执行');
       })
       //控制台输出:
       //js文件已经执行
       //回调函数已经执行
    </script>

六、从服务器载入数据并且将返回的 HTML 代码并插入至 匹配的元素 中 jquery（selector）.load( )

<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
    <div id="demo" style="width: 300px;height: 300px;background: #ccc;"></div>
    <script>
       /**.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )
       *url 一个包含发送请求的URL字符串
       *data 向服务器发送请求的Key/value参数，例如{name:"",age:23}
       *complete() 当请求成功后执行的回调函数
       *
       * jQuery使用浏览器的.innerHTML属性去解析检索到的文档，并将其插入到当前文档中。
       *在此过程中，浏览器通常会过滤文档中的一些元素 ，比如<html>, <title>, 或者 <head> 元素。
       *其结果是，由.load()方法返回的元素与从浏览器中直接获取到的文档内容，可能是并不完全一样的。
       * 
       * demo.html有一个类名为demo宽高100的黑色div和一个类名为demo1宽高100的白色div
       */
       $("#demo").load('demo.html .main',{id:1},function(responseText,textStatus,XMLHttpRequest){
           console.log(responseText);
           console.log(textStatus);
           console.log(XMLHttpRequest);
       })
    </script>

七、jQuery全局处理函数

①这些方法用于注册事件处理器，用来处理页面上的任何 Ajax 请求，当某些事件触发后，这些事件处理器被调用。

②如何 jQuery.ajaxSetup() 中的 global 属性被设置为 true （这也是默认设置），那么，每个 Ajax 请求都会触发全局事件。

③注意：全局事件绝对不会被跨域（cross-domain）脚本或 JSONP 请求触发，和 global 属性的设置毫无关系。

④包括:

  • $.ajaxStart()  在AJAX 请求刚开始时执行一个处理函数。 这是一个 Ajax Event.
  • $.ajaxStop() 在AJAX 请求完成时执行一个处理函数。 这是一个 Ajax Event。
  • $.ajaxSend()  在Ajax请求发送之前绑定一个要执行的函数，这是一个 Ajax Event.
  • $.ajaxSuccess() 绑定一个函数当 Ajax 请求成功完成时执行。 这是一个Ajax Event.
  • $.ajaxError() Ajax请求出错时注册一个回调处理函数，这是一个 Ajax Event。
  • $.ajaxComplete()  当Ajax请求完成后注册一个回调函数。这是一个 AjaxEvent

八、进度条插件 nprogress

 

posted @ 2018-06-26 17:59  澎湃_L  阅读(294)  评论(0)  编辑  收藏  举报