jquery-ajax $.get() $.post() $.load() $.ajax $.getJson

http://hi.baidu.com/tianshuhaoz/item/7ce554f4cb544f10a72988c4


jquery-ajax .get()

1.语法形式:

$(selector).get(url,data,success(response,status,xhr),dataType)

2.$.get 有四个参数

     其中url是要请求数据的文件路径

     其中data是要发送给服务器的{值对}

     第三个参数是get请求成功后要调用的函数。注意“成功”两个字,如果get请求失败了,则后面的函数不会调用。要是需要在失败时也有要调用的函数,那就不能用$.get()这样的方法了,需要用$.ajax()。由此可见,虽然$.get的成功能回调函数也有三个形参,但其第二个参数,status这个枚举量对应的值只能是"success"成功状态了。 回调函数的三个形参其中response是返回的数据结果,status是请求的状态。是个枚举量,因为$.get的特殊性,所以,只要回调函数能执行,则status==“success”

    第四个参数dataType规定预期的服务器响应的数据类型。默认执行智能判断(xml、json、script 或 html)。


jquery-ajax .post()

1.语法:
$.post(url,data,success(data, textStatus, jqXHR),dataType);
2.共有四个参数

   从名称上讲,$.post主要的目的在于发送数据到服务器端供处理,所以其传数据的能力比$.get强大。在量上与安全性上都优于$get但需要注意的是$.post的url不能是静态页,而$get重于请求数据,所以$get的参数url可以是静态页(html文件与txt文件)。$.post的回调函数也是只有$.post发送请求成功时才会执行的,这样的话,当然回调函数的第二个参数textStatus的枚举值就是“success”,在发送请求失败时,回调函数根本不会执行。参数data也是json值对。dataType参数可以设置,也可以默认由jquery智能判断。



jquery-ajax .load()

1.语法形式

load(url,data,function(response,status,xhr))

2.共有三个参数

   其中url是必选参数

   data是json格式的值对,即{key1:value1,key2:value2……}

   需要注意的是function()函数中的三个参数response,status,xhr当然,对于形参用什么样的单词是无所谓的,比如我们可以写成

function(a1,a2,a3)来代替response,status,xhr,当然后面的程序代码也就应该用对应的形参a1,a2……三个参数中,第一个代表返回的数据结果;第二个代表请求的状态他是一个枚举量其枚举列表是("success", "notmodified", "error", "timeout" 或 "parsererror"),当然,具体的程序中,参数二的值只能是这个枚举表中的一个具体值,比如请求成功,那么参数二的值就会是"success",失败其值会是"error"

这样后面的代码中可以根据参数二的不同的值来作出不同的反应。第三个参数代表全局的 XMLHttpRequest 对象可根据其属性值的不同让后面的代码以不同的反应。

3.在jquery中还有一个以.load()命名的事件,区别ajax load与事件load的方法是使用的参数不同,对于事件,.load(参数为function)表示选择的对象加载完成时要触发的函数,而ajax.load的参数第一个必选的就是要请求数据的服务器文件路径。

4.注意,在加载页与被加载的数据编码不一致时,会出现乱码,有时还会不显示,所谓编码一致,是指如果前台页是utf-8的那么后台页也应该是utf-8……

5.默认情况下,ie浏览器中,load()是使用缓存的,不让其使用缓存的方法是在设置全局ajax参数

  如下:

          $.ajaxSetup({cache:false});

5.只要路径正确,文件名正确就会返回成功的请求状态,但是不是能显示则是不确定的,比如我们加载一个rar压缩文件,显然,不能显示在html页面上,但这个load请求的状态却是成功的,可用function函数的第二个参数来验证。

6.load() 方法,与 $.get() 不同,允许我们规定要插入的远程文档的某个部分。这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格,紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。注意id选择器还要写成#id ;class选择器还要写成 .class选择器的写法不变。



$.ajax()

$.ajax()常用参数的设置及其意义

较常用的也就下面这些了

<html>
<head>
<script type="text/javascript">
function abc(){
$.ajax({
    async:true,
/*是否异步请求,用这对象的目的就是为了异步请求,所以此值一般不变,恒为true*/

    cache:false, /*是否用缓存*/
    global:true, /*是否触发已设置的全局事件,比如$("#id").ajaxStart()或
$("#id").ajaxSend(),等事件*/

    timeout:3000, /*定义请求超时时间,此设置覆盖全局,毫秒数*/
    username:"", /*定义服务器http请求用户名,跟服务器的设置有关*/
    password:"",  /*定义服务器http请求密码,跟服务器的设置有关*/
    type:"post", /*定义发送数据的方式*/
    url:"jx.asp", /*定义请求的url*/
    data:{aa:"bb"}, /*要发往服务器的数据值对*/
    context:$(".m"), /* 指定回调函数中this指的是哪个对象,如果值写成
document.body则对整个窗口文档有效,此处为用class选择的                                                                        一个div,执行后会看到,该被选择的div在回调函数中用this来指代,从而实现了改变颜色,把这篇章的全部代码                                                                         复制,再引好相应的jquery文件就可以执行*/

    beforeSend:function(){alert("请求之前");}, /* 发送请求之前要执行的函数*/
    dataType:"text",  /*定义返回的数据类型*/
    success:function(aa){alert(aa);$(this).css("background-color","#666666");}, /*请求成功
时要执行的函数,注意该函数的一个参                                                                                                                                                                                                                                              数,且来捕捉返回数据*/

    complete:function(xhr,ts){alert(ts);},/*请求完成(不管是否成功)时执行的函数,注意该函数的两个参数的使用,后一个参数是请                                                                                                                                    求的状态值,此处用alert()弹出,这篇文章的代码执行后显示是success,表示请求是成功                                                                                                                                                                                                                                                                            的*/

    error:function(){alert("发生了错误");}/*请求错误时执行的函数*/
    });
}
</script>
</head>
<body>
<div id="d" name="id" style="width:200px; height:100px;">bbb</div>
<div class="m" name="m" style="width:200px; height:100px;">bbb</div>
<button id="ii" onclick="abc()">加载</button>
</body>
</html>
上面的参数并不是全部的参数,还有一些不常用的,没有写进去



jquery 获取json格式数据 $.getJSON

首先要了解JSON数据的格式,从形式上说,最简单的json数据对象是一个大括号包起来的{"名" :"值",……}对。

一 $.getJSON的使用

看下面的例子(省略了一些开始和结束的标签只有主杆)

function abc(){
$.ajaxSetup({cache:false});
$.getJSON("jx.js",function(json){$("#d").html(json.aaa);});
}
<body>
<div id="d" name="id" style="width:200px; height:100px;">bbb</div>
<button id="ii" onclick="abc()">加载</button>
</body>

其中,jx.js直接就是json对象(不用包含javascript开始与结束标签)

也就是说jx.js全部的内容

就是

{"name1":"vale1","name2":"value2"……}

二、用$.get与$.post来获取json格式数据

很简单

$.get("url",function(){},"json")

(直接用上面的$.getJSON较好,这里只为了说明也可以使用)

$.post("url",function(){},"json")

有些朋友可能出于某种需要,从服务器返回来的是字符串,事实上,这种需要都可以转化成以上的两种$.get或$.post,没有必要把返回值设置为字符串,再用函数转成json对象,如果却实有这种需要了,可以用下面的函数$.parseJSON(字符串)

也就是说,预先不设置请求的数据类型,那么一般就是返回具有json格式特征的字符串了,把返回的字符串用函数$.parseJSON(字符串)转化下就可以了简单示例如下:

<script type="text/javascript">
function abc(){
$.ajaxSetup({cache:false});
$.post("jx.asp",function(json){

var bb=$.parseJSON(json);alert(bb.aaa);});
}
</script>
<body>
<div id="d" name="id" style="width:200px; height:100px;">bbb</div>
<button id="ii" onclick="abc()">加载</button>
</body>

对于$.get()如果不设置最后的参数即返回类型,也用$.parseJSON转型即可

需要说明的是,如果既不设置返回数据类型,也不用$.parseJSON转成json对象,而直接把返回的只是具有json特征的字符串当作json对象来用是回出错误的。

还有一点,一般来说,从动态页返回数据在输出双引号上有些麻烦,无论是asp还是php程序,大家可以不用输出双引号,而用嵌入的方法代替输出,也许这里说的不够明确,简单示例如下:

asp动态页程序一般不要用response.write()函数来输出双引号,因为容易出现错误,即便我们很好滴掌握了函数能直接写出正确的输出格式也不如下面的程序段来的保险。

<% if 1=2 then %>
{"aaa":"valaa"}

<% else %>
{"aaa":"valbb"}
<% end if%><!--直接嵌到asp程序外部的字符串代码,可保正既清楚明了简单正确-->

三、json数据格式是可以嵌套的,可以以数组的形式,使数据信息包含逻辑关系如下{"name1":[{"na1":"va1"},{"na2":"va2"},{"na3":"va3"}],  "name2":[{"nab1":"vab1"},{"nab2":"vab2"},{"nab3":"vab3"}]}引用的格式是name1[n].名 如name1[0].na1name2[n].名 如name1[0].na1当然对于回调函数来说,是用一个参数来接受返回数据的,所以具体方法要依回调函数的参数来定,如下$.post("url",function(json){alert(json.name1[0].na1);   alert(json.name2[0].nab1);},"json")




jquery ajax全局事件及其执行流程(转载明河)原文链接http://www.36ria.com/2882

jquery在ajax方面是非常强大和方便的,以下是jquery进行ajax请求时方法模板:

$.ajax({
          type: "get",
          url: "",
          data : {},
          beforeSend : function(){   },
          success : function(data){  },
          complete : function(){ }
       });

关于$.ajax()方法的使用,不是明河写这篇文章的目的,今天明河主要讲解当进行ajax请求时整个完整的事件流程。


jquery的ajax方法的全部全局事件:
ajaxStart:ajax请求开始前
ajaxSend:ajax请求时
ajaxSuccess:ajax获取数据后
ajaxComplete:ajax请求完成时
ajaxError:ajax请求发生错误后
ajaxStop:ajax请求停止后

当你使用jquery的ajax方法,不管是$.ajax()、$.get()、$.load()、$.getJSON()等都会默认触发全局事件,只是通常不绑定全局事件,但实际上这些全局事件非常有用处。


ajax方法的全局事件的用处

ajax全局事件,有个典型的应用场合:
你的页面存在多个甚至为数不少的ajax请求,但是这些ajax请求都有相同的消息机制。ajax请求开始前显示一个提示框,提示“正在读取数据“;ajax请求成功时提示框显示“数据获取成功”;ajax请求结束后隐藏提示框。
不使用全局事件的做法是:
    给$.ajax()加上beforeSend、success、complete回调函数,在回调函数中加上处理提示框。
使用全局事件的做法是:


$(document).ajaxStart(onStart)
              .ajaxComplete(onComplete)
              .ajaxSuccess(onSuccess);

   function onStart(event) {
       //.....
   }
   function onComplete(event, xhr, settings) {
       //.....
   }
   function onSuccess(event, xhr, settings) {
       //.....
   }

ajax方法完整事件流

为了更直观的说明,明河使用Axure画了二个流程图,画的不好还请见谅,O(∩_∩)O



你可能感兴趣的:(jquery-ajax)