首页 > 代码库 > JQuery Ajax

JQuery Ajax

2024-08-15 16:31:46   217人阅读

优势：

不需要插件支持   优秀的用户体验    提高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 }                })            })

 

JQuery Ajax


联系
我们