ajax和jsonp的封装
一直在用jQuery的ajax,跨域也是一直用的jQuery的jsonp,jQuery确实很方便,$.ajax({...})就可以搞定。
为了更好的理解ajax和jsonp,又重新看了下书,看了一些博客,参照他们的代码封装了一个简单的库。
代码地址:http://files.cnblogs.com/zjzhome/ajax.js
使用方法和jQuery类似。
不跨域的话:
Z.ajax('test.php', {
data: {
name: 'zjz',
age: 10
},
dataType: 'json',
timeout: 2000,
success: function(r) {
console.log(r);
},
failure: function(xhr, msg) {
console.log(msg);
}
});
跨域的话把dataType改成jsonp:
Z.ajax('http://xxxxx/test.php', {
data: {
name: 'zjz',
age: 23
},
dataType: 'jsonp',
callback: 'callback',
success: function(data) {
console.log(data)
}
});
不过不要产生误解,其实jsonp和ajax半点关系都没有了,jQuery的封装让好多人以为jsonp是ajax的一种方式,之前我也是。。。。可以去看看书。
还有待完善,jsonp还没有加上错误处理。
参考:《JavaScript高级程序设计(第三版)》
http://www.travisup.com/post/index/28
http://www.cnblogs.com/snandy/archive/2011/04/25/2026648.html
ajax和jsonp的封装的更多相关文章
- 原生javascript封装ajax和jsonp
在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp: <!DOCTYPE html> <html lang="en"> <head ...
- 从 AJAX 到 JSONP的基础学习
目录索引: 一.AJAX的概念二.POST && GET三.原生实现AJAX简单示例 3.1 实现代码 3.2 重点说明四.框架隐藏域 4.1 基本概念 4.2 后台写入脚本 4.3 ...
- 针对AJAX与JSONP的异同
针对AJAX与JSONP的异同 1.ajax和jsonp这两种技术在调用方式上“看起来”很像,目的也一样,都是请求一个url,然后把服务器返回的数据进行处理,因此jquery和ext等框架 ...
- ajax和jsonp使用总结
前言:ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新. 一.ajax 定义:一种发送http请求与后台进行异步通讯的技术. 原理:实例化xmlhttp对 ...
- ajax 和jsonp 不是一码事
由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯 ...
- 关于jQuery.ajax()的jsonp碰上post详解
前言 以前一直以为当$.ajax()的 dataType设置为jsonp时,其method(请求方法)无论怎么设置,都会变成get,直到前两天遇到了一个坑. 下面来一起看看详细的介绍: 关于跨域请求与 ...
- 原生 JavaScript 实现 AJAX、JSONP
相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...
- ajax和jsonp
ajax和jsonp 前言:ajax和jsonp可以与后台通信,获取数据和信息,但是又不用刷新整个页面,实现页面的局部刷新. 一.ajax 定义:一种发送http请求与后台进行异步通讯的技术. 原理: ...
- Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
为什么要用jsonp? 相信大家对跨域一定不陌生,对同源策略也同样熟悉.什么,你没听过?没关系,既然是深入浅出,那就从头说起. 假如我写了个index页面,页面里有个请求,请求的是一个json数据(不 ...
随机推荐
- SQL 索引
1.http://www.cnblogs.com/AK2012/archive/2013/01/04/2844283.html 2 .聚簇索引和非聚簇索引的区别 3.聚集索引:只能有一个 (相当于字 ...
- RocketMQ常用命令
转自:http://jameswxx.iteye.com/blog/2091971 1.1. 控制台使用 RocketMQ 提供有控制台及一系列控制台命令,用于管理员对主题,集群,broker 等信息 ...
- eclipse 护眼色
eclipse windows 窗口背景颜色 保护视力 博客分类: 工具使用 EclipseWindows eclipse 窗口背景颜色 windows 窗口背景颜色
- Android studio插件安装
Android Studio安装插件的方式其实和Eclipse大同小异.废话不多说,直接上图: 区域1:你当前已经安装了的插件 区域2:在线安装 区域3:从硬盘安装,即针对你已经下载好了的插件,可通过 ...
- 理解shared_ptr<T>
1.shared_ptr<T>解决什么问题? auto_ptr有个局限,拥有权转移.这往往不符合我们的需求,有时候我们期望,多个资源管理对象可以共享一个资源,当引用计数为0的时候,执行de ...
- Xcode中的Info.plist字段列表详解
Info.plist用于向iOS提供关于app,bundle或者framework的一些重要信息.它指定了比如一个应用应该怎样启动,它如何被本地化,应用的名称,要显示的图标,还有更多.Info.pli ...
- ios十进制、十六进制字符串,byte,data等之间的转换
十进制->十六进制 Byte bytes[]={0xA6,0x27,0x0A}; NSString *strIdL = [NSStringstringWithFormat:@"%@& ...
- 解决content is not allowed in prolog问题
将xml文档用notepad++以UTF-8无BOM格式编码保存便可以了
- careercup-中等难题 17.2
17.2 设计一个算法,判断玩家是否赢了井字游戏. 解法: 假设这个检查某人是否赢得了井字游戏的函数为HasWon,那么我们第一步要向面试官确认, 这个函数是只调用一次,还是要多次频繁调用.如果是多次 ...
- JavaScript网站设计实践(五)编写photos.html页面,实现点击缩略图显示大图的效果
一.photos.html页面,点击每一张缩略图,就在占位符的位置那里,显示对应的大图. 看到的页面效果是这样的: 1.实现思路 这个功能在之前的JavaScript美术馆那里已经实现了. 首先在页面 ...