码迷,mamicode.com
首页 > Web开发 > 详细

JQuery Ajax

时间:2016-10-05 00:58:44      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:

优势:

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

标签:

原文地址:http://www.cnblogs.com/Sea1ee/p/5931554.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!