你的位置:首页 > Java教程

[Java教程]弄一个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地址,参数类型为String2. data:可选,发送的key/value数据,参数类型为Object3. callback:可选,成功或失败的回调函数,参数类型为函数Function

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

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

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

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

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

$('.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+',xhr.statusText);    // index.html:36 返回的值为:蜗牛,  });});

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

注意:status得到的值,如果成功返回数据则为:success,否则为:error。

属性名      说明responseText   作为响应主体被返回的文本response

返回数据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,即服务器返回的内容格式:包括

$('.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.,{    url:'snail',  },function(response,status,xhr){    if(status=='success'){      $('.ajax_box').html(response);    }    // type自动转化成  })});

注意:如果载入的是

$.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);  });});