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

2016-09-19 19:46
分类:编程  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);
    });
});

 

好文要顶 收藏该文 我要举报
如果您觉得本文对你有用,不妨帮忙点个赞,或者在评论里给我一句赞美,小小成就都是今后继续为大家编写优质文章的动力!
上一篇:JQuery测手速小游戏-遁地龙卷风
下一篇:WNMP集成环境下配置thinkPHP

一起悦读网    Copyright © 2016    浙ICP备11048508号