弄一个ajax笔记方便查询-基础知识篇

jQuery对Ajax做了大量的封装，jQuery采用了三层封装：
最底层的封装方法为：$.ajax()
通过最底层进一步封装了第二层的三种方法：.load()、$.get()、$.post()
最高层是：$.getScript() and $.getJSON()

我自己的记忆方法：$.ajax()是异步处理本源，它是一个区域、一个村子、一个小型生态系统，是jQuery的一个分公司；$.get()是得到、获得，也就是往我们的生态系统中运输我们生态系统所没有的东西；$.post()是把我们不能完全消耗的物品运出去换我们需要的东西；一个掌管输入，一个掌管输出，这时就需要一个管理自身的管家，而.load()就是管理生态系统的管家，由于它不需要出去，只是在自家进行活动，所以就不用打上，jQuery公司的LOGO=>$了。由于我们有的货物是重要的有的是次要的，这样就诞生了贵宾服务，$.getScript()和$.getJSON()这两个专为贵宾服务的特殊通道，方便快捷

【1】.laod()方法拥有三个参数：
1. url：必须，请求html文件的url地址，参数类型为String
2. data：可选，发送的key/value数据，参数类型为Object
3. callback：可选，成功或失败的回调函数，参数类型为函数Function

// 例子：
GET方式：不传递data,则默认get方式
$('.ajax_btn').on('click',function(){
    $('.ajax_box').load('ajax.php?url=snail',function(){
        alert('我是回调函数！');
    });
});

<?php
if($_GET['url']=='snail'){
    echo '蜗牛';
}else{
    echo '其它动物！';
}
?>

// POST方式：传递data,则为post方式
$('.ajax_btn').on('click',function(){
    $('.ajax_box').load('ajax.php',{
        url:'snail',
    },function(){
        alert('我是回调函数！');
    });
});

<?php
if($_POST['url']=='snail'){
    echo '蜗牛';
}else{
    echo '其它动物！';
}
?>

在Ajax数据载入完毕之后，就能执行回调函数callback，也就是第三个参数；
回调函数可以传递三个可选参数：responseText(请求返回)、textStatus(请求状态)、XMLHttpRequest(XMLHttpRequest对象)

$('.ajax_btn').on('click',function(){
    $('.ajax_box').load('ajax.php',{
        url:'snail',
    },function(response,status,xhr){
        console.log('返回的值为：'+response+'，状态为：'+status+'，状态是：'+xhr.statusText);
        // 返回的值为：蜗牛，状态为：success，状态是：OK
        console.log('返回的值为：'+xhr.responseText+'，XML DOM文档：'+xhr.responseXML+'，响应的HTTP状态：'+xhr.status+'，HTTP状态的说明：'+xhr.statusText);
        // index.html:36 返回的值为：蜗牛，XML DOM文档：undefined，响应的HTTP状态：200，HTTP状态的说明：OK
    });
});

<?php
if($_POST['url']=='snail'){
    echo '蜗牛';
}else{
    echo '其它动物！';
}
?>

注意：status得到的值，如果成功返回数据则为：success，否则为：error。XMLHttpRequest对象属于JavaScript范涛，可以调用一些属性如下：

属性名            说明
responseText     作为响应主体被返回的文本
responseXML      如果响应主体内容类型是"text/xml"或"application/xml"，则返回包含响应数据的XML DOM文档
status           响应的HTTP状态
statusText       HTTP状态的说明

返回数据status和statusText对照表：
HTTP状态码     状态字符串                  说明
200           OK                        服务器成功返回了页面
400           Bad Request               语法错误导致服务器不识别
401           Unauthorized              请求需要用户认证
404           Not found                 指定的 URL 在服务器上找不到
500           Internal Server Error     服务器遇到意外错误,无法完成请求
503           ServiceUnavailable        由于服务器过载或维护导致无法完成请求

【2】$.get()和$.post()
.load()方法是局部方法，因为它需要一个包含元素的jQuery对象作为前缀。
而$.get()和$.post()是全局方法，无须指定某个元素。
用途方面：.load()适合做静态文件的异步获取，而对于需要传递参数到服务器页面的，$.get()和$.post()更加合适

$.get()方法有四个参数：前面三个和.load()一样，多了一个第四参数type，即服务器返回的内容格式：
包括xml、html、script、json、jsonp和text
第一个参数为必选参数，后面三个为可选参数

$('.ajax_btn').on('click',function(){
    $.get('ajax.php',{
        url:'snail',
    },function(response,status,xhr){
        if(status=='success'){
            $('.ajax_box').html(response);
        }
        // type自动转化成text
    })
});

注意:第四参数type是指定异步返回的类型。一般情况下type参数是智能判断,并不需要我们主动设置,如果主动设置,则会强行按照指定类型格式返回。

$('.ajax_btn').on('click',function(){
    $.get('ajax.xml',{
        url:'snail',
    },function(response,status,xhr){
        if(status=='success'){
            $('.ajax_box').html(response);
        }
        // type自动转化成XML
    })
});

注意:如果载入的是xml文件,type会智能判断。如果强行设置html类型返回,则会把xml文件当成普通数据全部返回,而不会按照xml格式解析数据。

$.post()方法的使用和$.get()基本上一致,他们之间的区别也比较隐晦,基本都是背后的不同,在用户使用上体现不出。
具体区别如下:
1.GET请求是通过URL提交的,而POST请求则是HTTP消息实体提交的;
2.GET提交有大小限制(2KB),而POST方式不受限制;
3.GET方式会被缓存下来,可能有安全性问题,而POST没有这个问题;
4.GET方式通过$_GET[]获取,POST方式通过$_POST[]获取。

$('.ajax_btn').on('click',function(){
    $.post('ajax.php',{
        url:'snail',
    },function(response,status,xhr){
        if(status=='success'){
            $('.ajax_box').html(response);
        }
    })
});

$.getScript()和$.getJSON()=>
jQuery提供了一组用于特定异步加载的方法:
$.getScript(),用于加载特定的JS文件;
$.getJSON(),用于专门加载JSON文件。

$('.ajax_btn').on('click',function(){
    $.getScript('ajax.js');
});
$('.ajax_btn').on('click',function(){
    $.getJSON('ajax.json',function(response,status,xhr){
        console.log(response.ajax.name);
    });
});