jQuery在学习之五、jQuery的ajax

前言

jQuery的ajax提供了简介易用的方法让我们来实现ajax。

 

 

1          jQuery.ajax(options);——通过http请求加载远程数据

1.1        $.ajax() 只有一个参数，参数是一个json对象

1.1.1  url：发送请求的地址

1.1.2  type：请求方式包括GET和POST

1.1.3  timeout：请求超时时间(毫秒)

1.1.4  data：发生到服务器的数据，是一个json对象

1.1.5  datatype：预期服务器返回的数据类型，包括：xml、html、script、json。（注意：如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。）

 

1.1.6  beforeSend事件：发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。

 

1.1.7  complete事件：请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。

 

1.1.8  success事件：请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态

 

1.1.9  error事件：请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。

 

1.1.10     请注意：以上的beforeSend、complete、success和error事件里的this都是指向ajax请求的选项信息

 

1.1.11     示例如下：

    <script type="text/javascript">

    $(function(){

        $("#result").toggle(

            function(){

                //第一次点击时的普通ajax请求

                $.ajax({

                    url:"ajax_return.aspx",     //发送请求的地址

                    type:"GET",                 //请求方式，包括GET和POST

                    data:{name:"luo", age:"23"},    //发送到服务器的数据。将自动转换为请求字符串格式。

                   

                    //请求发送前触发，发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义HTTP头。XMLHttpRequest对象是唯一的参数。

                    beforeSend:function(XMLHttpRequest){

                        alert("请求发送前");

                    },

                    

                    //请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态

                    success:function(data, status){

                        alert("请求执行成功了");

                        show(this, data, status);

                    },

                   

                    //请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。

                    complete:function(XMLHttpRequest, status){

                        alert("请求执行完了，不管成功与否");

                        show(XMLHttpRequest);

                    },

                    

                    //请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。

                    error:function(XMLHttpRequest, errMsg, errObj){

                        alert("请求出现了错误");

                    }

                });

            },

           

            //第二次点击时，从服务器抛出一个错误

            function(){

                $.ajax({

                    type:"get",

                    url:"ajax_return.aspx?error=true",

                   

                    beforeSend:function(XMLHttpRequest){

                        alert("请求发送前");

                    },

                   

                    success:function(data, status){

                        alert("请求执行成功了");

                        show(this, data, status);

                    },

                   

                    complete:function(XMLHttpRequest, status){

                        alert("请求执行完了，不管成功与否");

                    },

                   

                    error:function(XMLHttpRequest, errMsg, errObj){

                        alert("请求出现了错误");    //这回出现了错误将执行error函数

                        show(this, '', '');

                    }

                });

            },

           

            function(){

                //第三次点击返回json对象，请设置dataType为对应类型

                $.ajax({

                    type:"get",

                    url:"ajax_return.aspx",

                    data:{json:true},

                    dataType:"json",    //如果不设置则返回的是字符串，如果设置了则返回json对象

                   

                    beforeSend:function(XMLHttpRequest){

                        alert("请求发送前");

                    },

                   

                    success:function(data, status){

                        alert("请求执行成功了");

                        alert(typeof data + " : " + data.name); //可直接访问返回对象的属性

                    },

                   

                    complete:function(XMLHttpRequest, status){

                        alert("请求执行完了，不管成功与否");

                    },

                   

                    error:function(XMLHttpRequest, errMsg, errObj){

                        alert("请求出现了错误");    //这回出现了错误将执行error函数

                        show(this, '', '');

                    }

                });

            }

        );

       

        function show(obj, data, status){

            var msg = "";

            msg += "status: " + status + "/r/r";

            for(var x in obj) msg += x + ": " + obj[x] + "/r";

            msg += "/rdata:/r" + data;

            alert(msg);

        }

    });

    </script>

 

      Ajax_return.aspx页面的后台代码：

    protected void Page_Load(object sender, EventArgs e)

    {

        if (Request["error"] != null)

        {

            throw new Exception("我抛出的错误");

        }

 

        if (Request["json"] != null)

        {

            Response.Clear();

            Response.Write("{'name':'soldierluo', 'age':'23'}");    //1.3.2  请自行选择

            Response.Write("{/"name/":/"soldierluo/", /"age/":/"23/"}");    //1.4.2

            Response.End();

        }

        else

        {

            Response.Write(DateTime.Now.ToString());

        }

    }

 

 

以下所有函数都是在执行正确时才会有返回，如果需要在错误时处理，请直接使用ajax函数。

 

 

2          $(...).load(url,[data,][callback])：载入远程 HTML 文件代码并插入至 DOM 中。

2.1        默认使用get方式，当data有数据时自动转换成post方式

2.2        url：请求的地址

2.3        data：json对象，要发送的参数

2.4        callback：载入成功时的回调函数

2.5        示例如下：

    <script type="text/javascript">

    $(function(){

        $("#result").click(function(){

            $(this).load("ajax_return.aspx", {name:"luo", age:24}, function(){

                alert("ajax请求执行成功后才会执行的哦~~");

            });

        });

    });

    </script>

      Html代码如下

    <div id="result">

    点击异步获取数据

    </div>

 

 

3          jQuery.get(url[,data][,callback][,type])：通过get方式异步请求信息

3.1        url：请求的地址

3.2        data：json对象，要发送的参数

3.3        callback：执行成功时的回调函数，参数为返回的数据

3.4        type：返回内容格式，包括：xml、html、script、json、text等（这个不知道怎么用，还要看看先）

3.5        示例如下：

    <script type="text/javascript">

    $(function(){

        $("#result").click(function(){

            //注意此处，是$.get而不是$(this).什么什么了

            $.get("ajax_return.aspx", {name:"luo", age:24}, function(data){

                alert("执行成功才会调用，返回数据是： " + data);

            });

        });

    });

    </script>

      Html代码如下

    <div id="result">

    点击异步获取数据

    </div>

 

 

4          jQuery.getJSON(url[,data][,callback])：通过get请求载入json数据（注意大小写）

4.1        url：请求的地址

4.2        data：json对象，要发送的数据

4.3        callback：执行成功时的回调函数，参数为返回的json对象

4.4        示例如下：

    <script type="text/javascript">

    $(function(){

        $("#result").click(function(){

            //注意此处，是$.get而不是$(this).什么什么了

            $.getJSON("ajax_return.aspx", {json:true, type:"test"}, function(obj){

                alert("成功执行，返回json对象：" + obj.name);

            });

        });

    });

    </script>

 

 

5          jQuery.post(url[,data][,callback][,type])：通过post请求载入信息

5.1        url：请求地址

5.2        data：json对象，要发送的数据

5.3        callback：执行成功时的回调函数，参数为返回的json对象

5.4        type：返回内容格式：xml、html、script、json、text等

5.5        示例如下：

    <script type="text/javascript">

    $(function(){

        $("#result").toggle(

            function(){

                //未指定返回内容格式，则返回内容格式为text

                $.post("ajax_return.aspx", {json:true}, function(result){

                    alert(typeof result + " : " + result);

                })

            },

            function(){

                //指定了返回内容格式为json，则返回内容格式为json，当然返回的字符串必须是json格式

                $.post("ajax_return.aspx", {json:true}, function(result){

                    alert(typeof result + " : " + result.name); //可以直接访问对象的属性

                }, "json")

            }

        );

    });

    </script>