JQuery中的Ajax详解

浅谈JQuery中的AJax使用

• 在切入正题之前，我希望大家能带着问题去阅读，比如：jQuery中AJax有哪些？？？

• 我们都知道，JQuery对AJax进行了封装，但是你知道它究竟分成了几种封装，每种封装的内容和用法又是什么吗？？

• 好了，带着这些问题往下看，希望我的浅浅的认识能够帮到和我一样曾经困惑的人…

---

一、3层封装概述

• 1. 第一层，也是最底层的封装方法：$.ajax()

• 2. 第二层，我们平时使用频率最高的一层：load()、$.get()、$.post()

• 3. 第三层，我们会在有些特殊情况下使用$.getScript()、$.getJSON()

二、详情分述

首先我们要说是最常用的一层，也就是第二层。

1) load()
    作用：能载入远程HTML代码并插入到DOM中。
    用法:load(url, [data], [callback])
    参数解析：
        1.url: string，请求html的URL地址
        2.data(可选): object，发送至服务器的数据
        3.callback(可选): function, 请求完成时 的回调函数，无论请求成功或者失败
    用例1:载入HTML文档

        $(function() {
            $(".className").load("test.html");
        })

    用例2:筛选载入的html文档

        $(function() {
            //divName是test.html中一个div的类名,使用id用#
            $(".className").load("test.html  .divName")
        })      

    用例3:请求方式

        //load方法会根据参数决定请求的方式，如果没有参数面采用GET方式、有参数采用POST方式、

        $(function() {
            $(".className").load("test.php", {"username" : "admin", "password" : "pwd"}, 
                function()
                {
                    //TODO
                })
            }
        })

    用例4:回调参数

        //在回调函数中执行加载完成之后的操作、
        $(function() {
            $(".className").load("test.php", {...}, 
                function(responseText, textStatus, XMLHttpRequest) 
                {
                    //responseText:   请求返回的内容
                    //textStatus:     请求状态:success、error、 motmodified、timeout 4种
                    //XMLHttpRequest: XMLHttpRequest对象
                });
        })      

注意：在load方法中，无论ajax请求是否成功，只要请求完成，回调函数就会被触发。

2) $.get() 和 $.post()

提醒：$.get() 和 $.post()方法都是JQuery中的全局函数。

作用:通过GET方式来进行异步请求
用法:$.get(url, [data], [callback], [type])
参数解析:
    前三个参数用法与load()方法一样
    type(可选): string, 服务器返回数据的格式,包括 xml、html、script、json、text、default

用例1:与load的回调函数不同

    $(function() {
        $(".className").click(function() {
                $.get("getTest.php", {"username" : "admin", "password" : "pws"}, 
                    function(data, textStatus) {
                        //注意:get的回调函数只有两个参数，而且只有当数据成功返回之，才会调用，与load方法不同
                        //data:         返回的内容(可以是:XML、JSON、html片段)
                        //textStatus:   请求状态(success、error、notmodified、timeout)
                    })
        })
    })  

用例2:post()方法

补充: 它与$.get()的结构和使用方式都相同，不过它们之间仍然有区别:
    1)GET请求会将参数跟在url后面，明文传递；而POST请求则是最为HTTP消息的实体内容发送给文本服务器
    2)GET方式对传递的数据大小限制(通常不同大于2kb)，而使用post方式传递，数据量要比get大的多(理论上不受限制)
    3)GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到数据，例如账号和密码等。
    4)GET方式和POST方式传递的数据在服务器端的获取方式也不同。

未完待续…