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

时间: 2024-08-25 21:45:13

ajax和jsonp的封装的相关文章

Ajax和Jsonp的工作原理,以及区别。

Ajax工作原理是 相当于在用户和服务器之间加了-个中间层(AJAX引擎),使用户操作与服务器响应异步化. 对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务器读取新数据时由Ajax引擎代为向服务器提交请求.AJAX最大优点就是不刷新整个页面的前提下与服务器通信维护数据. 过程的话 第一步:创建一个ajax引擎对象,ie6的是new ActiveXObject其他浏览器是new一个xmlHttpRequest对象 第二步 调用open方法启动一个请求以备

ajax 和jsonp 不是一码事

由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能,又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能,但这两种方式都有其局限性,前者需要PhoneGap支持,后者要求用户设备必须支持WebSocket,因此都不能算是ST2的原生解决方案,原生的只有AJAX. 说到AJAX就会不可避免的面临两个问题,第一

关于jQuery.ajax()的jsonp碰上post详解

前言 以前一直以为当$.ajax()的 dataType设置为jsonp时,其method(请求方法)无论怎么设置,都会变成get,直到前两天遇到了一个坑. 下面来一起看看详细的介绍: 关于跨域请求与jsonp 跨域:由于受到同源策略(协议.域名.端口三者必须全部相同)的影响,ajax请求会受到限制,要突破这种限制,跨域便产生了.跨域的解决方案有多种,这里不展开阐述,只是针对GET请求中的jsonp跨域解决方案做一下说明. jsonp,本质上jsonp不是xhr异步请求,就是请求了一个js文件,

ajax 和jsonp 不是一码事 细读详解

由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能,又或者通过HTML5的WebSocket也可以实现与服务器的通讯和服务端推功能,但这两种方式都有其局限性,前者需要PhoneGap支持,后者要求用户设备必须支持WebSocket,因此都不能算是ST2的原生解决方案,原生的只有AJAX. 说到AJAX就会不可避免的面临两个问题,第一

Ajax和Jsonp的工作原理,以及区别

Ajax工作原理是: 相当于在用户和服务器之间加了-个中间层(AJAX引擎),使用户操作与服务器响应异步化. 对于用户请求ajax引擎会做一些数据验证和数据处理,不是所有请求都提交给服务器,当需要从服务器读取新数据时由Ajax引擎代为向服务器提交请求.AJAX最大优点就是不刷新整个页面的前提下与服务器通信维护数据. 过程的话 第一步:创建一个ajax引擎对象,ie6的是new ActiveXObject其他浏览器是new一个xmlHttpRequest对象 第二步 调用open方法启动一个请求以

原生ajax和jsonp

封装方法: function ajax(options) { options = options || {}; options.type = (options.type || "GET").toUpperCase(); options.dataType = options.dataType || "json"; var params = formatParams(options.data); //创建 - 非IE6 - 第一步 if (window.XMLHttpR

原生 JavaScript 实现 AJAX、JSONP

相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的. 其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP! 一.AJAX AJAX的核心是XMLHttpRequest. 一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象 连接服务器 发送请求 接收响应数据

html --- ajax --- javascript --- 简单的封装

Ajax的简单封装 Ajax的全称是AsynchronousJavaScriptAndXML 如有疑问请参考:http://zh.wikipedia.org/zh-cn/AJAX 以及传智播客的视频教程:http://java.itcast.cn/news/8308d118/740a/4dcd/8dbf/c73d2fe5bc60.shtml 其实已经有好多框架对它进行了封装,但是还是有好多时候用到自己封装的 透露一下,本人是宇多田光的听众之一哦! 封装后的代码如下: 文件路径:\web\Ajax

json和jsonp的区别,ajax和jsonp的区别

json和jsonp虽然只有一个字母的区别,但是它们之间扯不上关系. json是一种轻量级的数据交换格式. jsonp是一种跨域数据交互协议. json的优点:(1)基于纯文本传递极其简单,(2)轻量级数据格式适合互联网传递,(3)容易编写和解析. ajax和jsonp的区别: 相同点:都是请求一个url 不同点:ajax的核心是通过xmlHttpRequest获取内容 jsonp的核心则是动态添加<script>标签来调用服务器 提供的js脚本. --- <来源于网络>