20151211Jquery Ajax进阶学习笔记

四.JSON 和 JSONP

如果在同一个域下,$.ajax()方法只要设置 dataType 属性即可加载 JSON 文件。而在非 同域下,可以使用 JSONP,但也是有条件的。

//$.ajax()加载 JSON 文件

$.ajax({
 type:‘POST‘,
 url:‘test.json‘,
dataType:‘json‘,
 success:function(response,status,xhr){
 alert(response[0].url);
}
});

  如果想跨域操作文件的话,我们就必须使用 JSONP。JSONP(JSONwithPadding)是一个 非官方的协议,它允许在服务器端集成 Scripttags 返回至客户端,通过 javascriptcallback 的 形式实现跨域访问(这仅仅是 JSONP 简单的实现形式)。

//跨域的 PHP 端文件

<?php
 $arr=array(‘a‘=>1,‘b‘=>2,‘c‘=>3,‘d‘=>4,‘e‘=>5);
 $result=json_encode($arr);
$callback=$_GET[‘callback‘];
 echo$callback."($result)";
 ?>

  //$.getJSON()方法跨域获取 JSON

$.getJSON(‘http://www.li.cc/test.php?callback=?‘,function(response){ console.log(response);});

  //$.ajax()方法跨域获取 JSON

$.ajax({
url:‘http://www.li.cc/test.php?callback=?‘,
dataType:‘jsonp‘,
success:function(response,status,xhr){
 console.log(response);
alert(response.a);
}
});

  五.jqXHR 对象

在之前,我们使用了局部方法:.success()、.complete()和.error()。这三个局部方法并不 是 XMLHttpRequest 对象调用的,而是$.ajax()之类的全局方法返回的对象调用的。这个对象, 就是 jqXHR 对象,它是原生对象 XHR 的一个超集。

//获取 jqXHR 对象,查看属性和方法

varjqXHR=$.ajax({
 type:‘POST‘,
 url:‘test.php‘,
data:$(‘form‘).serialize()
});

for(variinjqXHR){
 document.write(i+‘<br/>‘);
 }

  注意:如果使用 jqXHR 对象的话,那么建议用.done()、.always()和.fail()代 替.success()、.complete()和.error()。以为在未来版本中,很可能将这三种方法废弃取消。

//成功后回调函数

jqXHR.done(function(response){
 $(‘#box‘).html(response);
});

  使用 jqXHR 的连缀方式比$.ajax()的属性方式有三大好处:

1.可连缀操作,可读性大大提高;

2.可以多次执行同一个回调函数;

3.为多个操作指定回调函数;

//同时执行多个成功后的回调函数

jqXHR.done().done();

  //多个操作指定回调函数

varjqXHR=$.ajax(‘test.php‘);
varjqXHR2 =$.ajax(‘test2.php‘);
$.when(jqXHR,jqXHR2).done(function(r1,r2){
alert(r1[0]);
alert(r2[0]);
 });

注意:以上教程均来源于北风网,学习ing

时间: 2024-12-05 11:32:15

20151211Jquery Ajax进阶学习笔记的相关文章

Jmeter进阶学习笔记(对性能、接口测试的进阶学习)

1.在进行测试的时候,可以采用fildler进行捕捉:如果需要在手机上操作的话,可在fildler option设置下,然后再手机的wifi中设置代理即可: 1.登录测试 登录的话,肯定是存在两个参数的,用户名与密码,且使用的方法应是Post; PS:登录此处还可以使用断言去判断是否登录正确: 2.获取列表系统(可以看下加载此列表需要多少时间),使用的get方法即可: 3.在列表中选择某一条记录进行发送信息操作(如果10万用户都同时发送信息,服务器是否正常工作): ...... 未完待续~ Jm

AJAX快速学习笔记

可关注我的个人微信公众号:卟野iiiiiiiya AJAX快速学习笔记: https://mp.weixin.qq.com/s?__biz=MzI0MDY0NzI3Mw==&tempkey=OTMwX2NOeUIrdzFEaThtMFBiUlJYdFhqcWViaHY1bFlQUTdmU1RrUnpkc1IzQmNfWENHVXFZb2ZLajhURlFwbzZoOF80RlA0THdQeGVYcDB2OENSdnBKcUNHdU9QRER0OWxkUE9YUGp0SU90WmwwWVl1SnJ

AJAX之学习笔记(持续更新......)

以前的学习都是在Evernote上做的笔记,之前也在博客园注册过,但是一直没用,就荒废了.最近想既然是学技术的,用这个来记我的一些日常学习笔记是在好不过了. 总之加油吧~~~希望自己能早日摆脱新手这个称呼嘻嘻(*^__^*) 1.AJAX的定义 AJAX=Asynchronous JavaScript and XML(异步的JavaScript和XML)——此处应先了解HTML.XHTML.CSS.JavaScript和DOM结构. AJAX是一种新方法,不是新的编程语言,可以在不需要重新加载网

Ajax的学习笔记(一)

AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),ajax并不是一门单独的语言,而是一种技术,是指一种创建交互式网页应用的网页开发技术.局部刷新页面使用的就是这种技术,这样的好处是页面不需要刷新,服务器处理的数据大大减少,减轻服务器压力.但是学习这门技术必须要邮编JavaScript的基础.

AJAX(学习笔记一)

1:什么是AJAX? AJAX是一组英文单词的简写,这组英文单词是 :Asynchronous JavaScript and XML ,翻译成中文的意思是: 异步的JavaScript 和 XML.什么意思呢?简单点讲就是:通过HTML页面中的JavaScript方法能够不刷新整个页面的情况下实现和服务端进行交流返回对应的请求数据,而返回的数据常常是两种格式的,文本格式和XML格式的,但是文本格式比较简单使用XML格式的数据很容易替代掉,所以使用XML表示更加的贴切,现在常常返回JSON格式的数

20151211jquery ajax进阶代码备份

//数据处理 $('form input[type=button]').click(function() { //json处理 /*$.ajax({ type:'POST', url:'test.json', dataType:'json', data:$('form').serialize(), success: function(response,status,xhr){ alert(response[0].url); } }); */ //本地获取jsonp.php成功 /*$.ajax(

Jquery+Ajax+php学习笔记

昨天研究ajax,想作个登陆框,无刷新就把用户名密码提交给后台php程序,验证后发回. 几经琢磨 总算出来前台代码: <script src="./javascript/jquery-latest.pack.js" type="text/javascript"></script> //导入jQuery框架文件 要用jQuery必须做此步<script type="text/javascript">$(docum

Python进阶 学习笔记(一)

(笔记范围:第一章 课程介绍:第二章 函数式编程:第三章 模块) Python支持的函数式编程 不是纯函数式编程:允许有变量 支持高阶函数:函数也可以作为变量传入 支持闭包:有了闭包就能返回函数 有限度地支持匿名函数 变量可以指向函数名: >>> f=abs >>> f(-10) 10 高阶函数:能接受函数做参数的函数 变量可以指向函数 函数的参数可以接收变量 一个函数可以接收另一个函数作为参数 能接收函数做参数的函数就是高阶函数 DEMO:接收abs函数 定义一个函数

ROS 进阶学习笔记(16):ROS导航1:关于Costmap_2d Package (代价地图包)

=== 关于Costmap_2d Package === wiki page: http://wiki.ros.org/costmap_2d === 我遇到的问题是 obstacle layer的刷新频率太低 === costmap_2d包下的所有类文档:http://docs.ros.org/hydro/api/costmap_2d/html/annotated.html 其中,值得注意滴是 costmap_2d::ObservationBuffer 这个类,这个类会被 costmap_2d: