在jQuery中，$.Ajax()方法属于最底层的方法，第2层是load()，$.get()，和$.post()，第3层是$.getScript()和$.getJSON()方法

1、load()

load( url , [data] , [callback] ) 通常是从web服务器上获取静态的数据

参数	说明
URL	请求HTML页面的地址
data	可选，发送至服务器端的key-value
callback	可选，请求完成时的回调函数，无论成功和失败

主页

<h3>你最喜欢读什么书？</h3>
<p id="cont"></p>
<button>点击</button>

<script>
    $('button').click(function(){
        $('#cont').load('xi.html');
    })
</script>

追加页面

<ul>
    <li>《慢慢来，一切都来得及》</li>
    <li>《你的孤独虽败犹荣》</li>
    <li>《你只是看上去很努力》</li>
    <li>《MySQL从入门到跑路》</li>
</ul>
<div>你点出来的元素</div>

1.1 筛选载入的HTML文档

<script>
    $('button').click(function(){
        $('#cont').load('xi.html li');//可这里
    })
</script>

1.2 传递方式

load()方法传递方式根据参数data来自动指定。如果没有参数传递，则采用get方式，反之，则自动转换为post方式

<script>
    $('button').click(function(){
        $('#cont').load('xi.html li',{name:"jack"},function(){

        });
    })
</script>

Apache、IIS、Nginx等绝大多数web服务器，都不允许静态文件响应POST请求，否则会返回“HTTP/1.1 405 Method not allowed”错误

1.3 回调函数

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

<script>
    $('button').click(function(){
        $('#cont').load('xi.php', {name:"jack"},function(responseText,textStates,XMLHttpRequest){
            //responseText：请求返回的内容
            //textStates：请求状态：success   error  notmodified  timeout4种
           //XMLHttpRequest：XMLHttpRequest对象
        });
    })
</script>

2、$.get() 方法

需要专递一些参数给服务器. $.get( url，[ data ]，[ callback ]，[ type ])

参数	说明
url	请求地址
data	可选，发送给服务器的数据key-value。以QueryString的形式
callback	可选，载入成功时的回调函数，自动将请求结果和状态传递给该方法
type	可选，服务器端返回内容的格式（xml、json，text，html等）

2.1 应用

<p><h3>评论</h3></p>
<p>姓名:<input type="text" name="" id="name"></p>
<p>内容:<textarea id="cont"></textarea></p>
<button>发表留言</button>
<hr>
<h3>已有评论</h3>
<div id="msg"></div>
<script>
    $("button").click(function(){
        var _data = {"username":$("#name").val(),"content":$("#cont").val()};

        $.get("get_html.php",_data, function(data,textStatus){
            //data：返回的内容，可以是XML文档，json文件，XHML片段等等
            //textStatus：请求状态：success  error  notmodified timeout4种
            if(textStatus=="success"){
                $(data).appendTo("#msg");
            }
        },'html');
    })
</script>

3、$.post()方法

它与$.get()方法的结构和使用方式都相同.区别：

区别	描述
安全	Post的安全性高于get；如果以get方式请求，请求参数会拼接到url后面，安全性性低，以post方式请求，请求参数会包裹在请求体中，安全性更高
传输数据量	get方式传输的数据量小，规定不能超过2kb，post方式请求数据量大，没有限制。
速度	get的传输速度高于post

使用

<script>
    $("button").click(function(){
        var _data = {"username":$("#name").val(),"content":$("#cont").val()};

        $.post("get_html.php",_data, function(data,textStatus){
            //data：返回的内容，可以是XML文档，json文件，XHML片段等等
            //textStatus：请求状态：success  error  notmodified timeout4种
            if(textStatus=="success"){
                $(data).appendTo("#msg");
             }
        },'html');
    })
</script>

4、$.getScript()

很多时候页面其实不必完全把所有的js文件都引到页面，而是需要的时候再加载进来。$.getScript( )方法来直接加载js文件，与加载一个HTML片段一样简单方便，并且不需要对JavaScript文件进行处理，JavaScript文件会自动执行。

$.getScript( url , fn )

<button>变</button>
<script>
$("button").click(function(){
    $.getScript("basejs.js",function(){
        $("body").click(function(){
            $(this).css("background-color",randomColor())
        })
    })
})
</script>

5、$.getJson()

$.getJson()方法用于加载JSON文件，与$.getScript()方法的用法相同

# $.getJSON( url，回调函数})
<button>变</button>
<script>
$(function(){
    $("button").click(function(){
        $.getJSON( "ren.json" , function( data ){
           $.each( data, function(index,comment){
               console.log(index + '-----' + comment);
          })
       })
    })
})
</script>

ren.json 文件

{"name":"jack","blog":"www.aipanshi.com"}

6、$.Ajax()方法

都是基于$.ajax()方法构建的，$.ajax()是jQuery最底层的Ajax实现，因为可以用来代替前面的所有方法

参数	说明
url	请求地址
type	get/post/put/delete 默认get
data	请求参数{'id':123,'name':'jack'}
dataType	请求数据类型，html，text，json，xml，jsonp
success	请求成功时function(data,dataTextStatus,jqxhr)
error	请求失败function(jqxhr,TextStatus，error）
beforeSend	请求前的回调函数
complete	请求完成后的回调函数

贡献代码

$('button').click(function () {
    $.ajax({
        type : 'POST', //这里可以换成 GET
        url : 'test.php',
        data : {
            url : 'guowen'
        },
        success : function (response, stutas, xhr) {
            $('#box').html(response);
        }
    });
});