JQuery Ajax

优势：

不需要插件支持   优秀的用户体验    提高Web程序的性能    减轻服务器和宽带的负担

不足：

浏览器对XMLHttpRequest对象的支持不足    

破坏浏览器“前进”和“后退”的正常功能

对搜索引擎的支持的不足

Load()方法

load()方法是jquery中最为简单和常用的ajax方法，能载入远程的HTML代码并插入到DOM中。

它的结构为： load(url[,data][,callback]])

url string类型 请求HTML页面的URL地址

data object类型 发送至服务器的KEY/VALUE数据

callback function类型 请求完成时的回调函数，无论请求成功或失败

load()方法的URL参数的语法结构为:“url selector”。注意，URL和选择器之间有一个空格

   $("div").load("GetOrPost.ashx", { "id": "8" }, function (data,status,httpRequst) {
           alert(data);           //请求返回的内容
 
          alert(status);          //请求状态：success，error

           alert(httpRequst);     /XMLHttpRequest对象

});

Load()方法的传递方式根据参数data来自动指定。

如果没有参数传递，则采用GET方式传送；

反之，则会自动转换为POST方式。

通用：Request["id"]

get：Request.QueryString["id"]

post:Request.Form["id"]

回调参数

对于必须在加载完成后才能继续的操作，load()方法提供了回调函数callback,该函数有三个参数，分别代表请求返回的内容、请求状态、和XMLHttpRequest对象。

在jquery中提供了GET和POST两个方法。

$.get(url[,data][,callback]);

$.post(url[,data][,callback][,type]);

url 发送的地址

Data 要发送的数据

Callback 回调函数

Type 期待服务器所返回的类型（text,xml等等）

   //get传递
      $("#Button1").click(function () {
             var val = $("#txt").val();
             $.get("GetOrPost.ashx", { "txt": val }, function (data) {
                 var dd = "<div>" + data + "</div>";
                  $("#result").append(dd);
              })
         });
     //指定post传递
            $("#Button2").click(function () {
                var val = $("#txt").val();
                $.post("GetOrPost.ashx", { "txt": val }, function (data) {
                    var dd = "<div>" + data + "</div>";
                    $("#result").append(dd);
                })
            });

设置ajax细节

$.ajax(option)方法设置ajax的细节部分

$.ajax({

type:"GET",                                           //请求类型

url:"server.aspx",                                     //请求地址

data:createQueryString(),                         //参数字符串

success:function(data){                         //异步交互成功时使用的回调方法

$("#serverResponse").html(decodeURI(data));

}

}); 

   //Ajax控制
            $("#Button3").click(function () {
                var val = $("#txt").val();
                $.ajax({
                    url: "GetOrPost.ashx",
                    type: "get",
                    data: {"txt":val},
                    success: function (data) {
                        var dd = "<div>" + data + "</div>";
                        $("#result").append(dd);
                    }
                })
            })

全局设定ajax

$.ajaxSetup(option)方法设置ajax的全局属性

$.ajaxSetup({    //全局设置    把相同的类容进行了封装

       url:"server.aspx",//请求的页面地址  

       success:function(data){    //异步交互成功时使用的回调方法

             $("#serverResponse").html(decodeURI(data));

      }

});  

function doRequestUsingGET(){

           $.ajax({     

               type:"GET",//请求类型

               data:createQueryString()//参数字符串

    })

};

         //全局设置
            $.ajaxSetup({
              
                url: "GetOrPost.ashx",
                success: function (data) {
                    var dd = "<div>" + data + "</div>";
                    $("#result").append(dd);
                }      
            })
                //全局里面有的就不用写
            $("#Button4").click(function () {
                var val = $("#txt").val();
                $.ajax({
                    type: "get",
                    data: { "txt": val }
                })
            })
            $("#Button5").click(function () {
                var val = $("#txt").val();
                $.ajax({
                    type: "post",
                    data: { "txt": val }
                })
            })