利用JSONP解决AJAX跨域问题的原理与jQuery解决方案

写在前面

跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP。

 

 

什么是跨域?

简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”。而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果。

 

具体策略限制情况可看下表:

URL说明允许通信
http://www.a.com/a.js
http://www.a.com/b.js
同一域名下允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js
同一域名下不同文件夹允许
http://www.a.com:8000/a.js
http://www.a.com/b.js
同一域名,不同端口不允许
http://www.a.com/a.js
https://www.a.com/b.js
同一域名,不同协议不允许
http://www.a.com/a.js
http://127.0.0.100/b.js
域名和域名对应ip不允许
http://www.a.com/a.js
http://script.a.com/b.js
主域相同,子域不同不允许
http://www.a.com/a.js
http://a.com/b.js
同一域名,不同二级域名(同上)不允许
http://www.a.com/a.js
http://www.b.com/b.js
不同域名不允许

 

什么是JSONP?

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,而JSONP(JSON with Padding)则是JSON 的一种“使用模式”,通过这种模式可以实现数据的跨域获取。 

 

JSONP跨域的原理

在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但img、iframe、script等标签是个例外,这些标签可以通过src属性请求到其他服务器上的数据。利用script标签的开放策略,我们可以实现跨域请求数据,当然,也需要服务端的配合。当我们正常地请求一个JSON数据的时候,服务端返回的是一串JSON类型的数据,而我们使用JSONP模式来请求数据的时候,服务端返回的是一段可执行的JavaScript代码。

 

举个例子,假如需要从服务器(http://www.a.com/user?id=123)获取的数据如下:

  1. {"id": 123, "name" : 张三, "age": 17}

那么,使用JSONP方式请求(http://www.a.com/user?id=123?callback=foo)的数据将会是如下: 

  1. foo({"id": 123, "name" : 张三, "age": 17});

当然,如果服务端考虑得更加充分,返回的数据可能如下: 

  1. try{foo({"id": 123, "name" : 张三, "age": 17});}catch(e){}

这时候我们只要定义一个foo()函数,并动态地创建一个script标签,使其的src属性为http://www.a.com/user?id=123?callback=foo: 

 

便可以使用foo函数来调用返回的数据了。 

 

在jQuery中如何通过JSONP来跨域获取数据

第一种方法是在ajax函数中设置dataType为'jsonp': 

  1. $.ajax({
  2.         dataType: 'jsonp',
  3.         url: 'http://www.a.com/user?id=123',
  4.         success: function(data){
  5.                 //处理data数据
  6.         }
  7. });

第二种方法是利用getJSON来实现,只要在地址中加上callback=?参数即可: 

  1. $.getJSON('http://www.a.com/user?id=123&callback=?', function(data){
  2.         //处理data数据
  3. });

也可以简单地使用getScript方法:

  1. //此时也可以在函数外定义foo方法
  2. function foo(data){
  3.         //处理data数据
  4. }
  5. $.getJSON('http://www.a.com/user?id=123&callback=foo');

 

JSONP的应用

JSONP在开放API中可以起到非常重要的作用,开放API是运用在开发者自己的应用上,而许多应用往往是在开发者的服务器上而不是在新浪微博的服务器上,因此跨域请求数据成为开发者们所需要解决的一大问题,广大开放平台应该实现对JSONP的支持,这一点新浪微博开放平台便做的非常好(虽然某些API里没有说明,但实际上是可以使用JSONP方式调用的)。



=======================签 名 档=======================
原文地址(我的博客):http://www.clanfei.com/2012/08/1637.html
欢迎访问交流,至于我为什么要多弄一个博客,因为我热爱前端,热爱网页,我更希望有一个更加自由、真正属于我自己的小站,或许并不是那么有名气,但至少能够让我为了它而加倍努力。。
=======================签 名 档=======================

转自:http://blog.csdn.net/coolanfei/article/details/7849735

转载于:https://www.cnblogs.com/zhengteng/p/5297203.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/396570.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

江西理工大学南昌校区cool code竞赛

这次比赛原本就是来打酱油的,想做个签到题就走!一开始不知道1002是签到题,一直死磕1001,WA了四发过了,回头一看Rank,三十名,我靠!看了1001的AC率,在我AC之前只有一个人AC…

mysql 枚举_详解MySQL数据类型之枚举类型ENUM的用法

本节主要内容:MySQL数据类型之枚举类型ENUMMySQL数据库提供针对字符串存储的一种特殊数据类型:枚举类型ENUM,这种数据类型可以给予我们更多提高性能、降低存储容量和降低程序代码理解的技巧,前面介绍了首先介绍了四种数据类型的特…

# 异运算_小学数学运算三要点:定律、法则与顺序(解析)

很多孩子的数学不好,尤其是女孩子。家长往往认定为数学不好就是孩子不擅长,能力差。其实未必,有的孩子数学不好的原因并不在于智商,而是没有理解到数学的方法与逻辑,比如小学的运算中,很多孩子并没有了解到…

如何实现一个教师与学生教学辅助平台?

在软件工程的学习过程中,我们要完成一个团体项目,关于个人教学辅助系统,对于这个,还有太多要学。对于如何实现其中的功能,我们会利用到html,css等语言来编写网页前端,同样也会用到数据库的知识。…

证明创建runnable实例和普通类时间一样长

import java.util.concurrent.ConcurrentLinkedQueue;import java.util.concurrent.CountDownLatch;import java.util.concurrent.ExecutorService;import java.util.concurrent.Executors;//证明创建runnable实例和普通类时间一样长public class Test002 { private Concurre…

mysql数据库维护_维护MySQL数据库表

在本教程中,我们将向您介绍一些非常有用的语句,使您可以在MySQL中维护数据库表。MySQL提供了几个有用的语句,可以有效地维护数据库表。 这些语句使您能够分析,优化,检查和修复数据库表。分析表语句MySQL查询优化器是My…

node-glob 正则表达式

https://github.com/isaacs/node-glob转载于:https://www.cnblogs.com/chris-oil/p/6507368.html

机器学习笔记—再谈广义线性模型

前文从线性回归和 Logistic 回归引出广义线性回归的概念,很多人还是很困惑,不知道为什么突然来个广义线性回归,有什么用?只要知道连续值预测就用线性回归、离散值预测就用 Logistic 回归不就行了?还有一些概念之间的关…

python连接access数据库odbc_对Python通过pypyodbc访问Access数据库的方法详解

看书上通过ODBC访问数据库的案例,想实践一下在Python 3.6.1中实现access2003数据库的链接,但是在导入odbc模块的时候出现了问题,后来查了一些资料就尝试着使用pypyodbc,最后成功了。操作步骤:①安装pypyodbc目前Python…

mysql异机备份

xx.xx..4.43----xx.xx..4.51 1、配置client通过密钥来连接server 43机器上: /root/.ssh 目录下执行 ssh-keygen -t rsa ls /root/.ssh会发现在/root/.ssh下生成一对密钥id_dsa和id_dsa.pub,将生成的公钥id_dsa.pub拷贝到server的/root/.ssh目录下&#…

周末想找个地方敲代码_观看我们的代码游戏,全周末直播

周末想找个地方敲代码by freeCodeCamp通过freeCodeCamp 观看我们的代码游戏,全周末直播 (Watch us Code Games Live All Weekend) Note: this was originally published on our now-defunct blog on July 15, 2015.注意:该文章最初于2015年7月15日发布在…

5.7和5.6的mysql_mysql5.6和5.7的区别

展开全部MySQL 5.7 已经开发两年了。相比 MySQL 5.6,有特别多的改进。团队主要关注速度,性能据报告是比之前62616964757a686964616fe4b893e5b19e31333365643661版本提升了 2 至 3 倍。新特性列表,主要改进:提升 MySQL 安全性改进了…

01:数制转换

01:数制转换 查看提交统计提问总时间限制: 1000ms内存限制: 65536kB描述求任意两个不同进制非负整数的转换(2进制~16进制),所给整数在long所能表达的范围之内。不同进制的表示符号为(0,1,...&am…

局域网只能看到一部分电脑_win10 网上邻居看不到其它电脑、共享不了文件

最近电脑遇到了局域网文件共享的问题,Win 10 系统在网络和共享中心里无法看到其他电脑,只能看到本机。确认共享已经打开后,通过查找最终解决。下面是解决流程。1.进入:控制面板 – 网络和共享中心 – 更改高级共享设置&#xff0c…

javascript 开发_25个新JavaScript开发人员的免费资源

javascript 开发by freeCodeCamp通过freeCodeCamp 25个新JavaScript开发人员的免费资源 (25 Free Resources for New JavaScript Developers) We asked our campers to share their favorite free resources for new JavaScript developers on Camper News. The list includes…

mysql数据库语法_MySQL数据库语法(一)

MySQL数据库语法数据库管理系统(DBMS)的概述什么是DBMS:数据的仓库方便查询可存储的数据量大保证数据的完整、一致安全可靠DBMS的发展:今天主流数据库为关系型数据库管理系统(RDBMS 使用表格存储数据)常见DBMS:Orcale、MySQL、SQL Server、DB…

作业1---四则运算

一.需求分析: 除了整数以外,还要支持真分数的四则运算,真分数的运算,例如:1/6 1/8 7/24 运算符为 , −, , 并且要求能处理用户的输入,并判断对错,打分统计正确率。 要求能处理用户输入的真分…

python有序数组中删除元素_python刷LeetCode:26. 删除排序数组中的重复项

题目描述:给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度。不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成。示例 1:给定数组…

mysql数据库修改数据库名称_MySQL数据库之MySQL 修改数据库名称的一个新奇方法...

本文主要向大家介绍了MySQL数据库之MySQL 修改数据库名称的一个新奇方法 ,通过具体的内容向大家展现,希望对大家学习MySQL数据库有所帮助。MySQL在5.1引入了一个rename database操作,但在MySQL5.1.23后又不支持这个命令。可以说是一个实验性的…

Lesson 001 —— 数据

Lesson 001 —— 数据 数据(data)是事实或观察的结果,是对客观事物的逻辑归纳,是用于表示客观事物的未经加工的原始素材。数据是信息的表现形式和载体,可以使符号、文字、数字、语音、图像、视频等。 进制 进制也就是进…