Ajax之跨域访问与JSONP
前言
同源策略的限制，使得ajax无法发出跨域请求。在许多情况下，我们需要让ajax支持跨域。以下是其中一种解决方案（JSONP）。JSONP解决了跨域数据访问的问题。
在html中，具有src属性的标签支持跨域，例如<script>、<img>。
其中，<script>特别适合解决ajax跨域问题。首先当我们通过src引入js文件时，便会对其中的js代码进行执行。我们知道json是文本，js也是文本，那我们就把json伪装成js。也就是将请求地址放入到<script>标签的src中，那怎么样将json伪装成js，且能够在浏览器获取json数据呢？
答案就是通过调用方法，将json伪装成调用方法的语句，其中真正的json数据作为该方法的参数，当通过script标签引入这些文本时，就相当于执行了这个方法。而在前端，我们只需要编写对应的方法，而从服务器发过来的script脚本将会执行该方法并且传入真正的json数据。这样，就可以轻松实现跨域访问了。以下为大概流程图（丑）：
实现
- 使用javascript与php简单实现如下：
前端代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsonp</title>
</head>
<body>
<script>
ajax("http://localhost/province/json.php");
function ajax(url) {
var script = document.createElement("script");
script.src = url + "?jsonp=callback";
document.getElementsByTagName("head")[0].append(script);
}
// 编写回调函数
function callback(data) {
alert(data.msg);
}
</script>
</body>
</html>
后端代码：
<?php
header("Content-Type", "application/json");
$fun = $_REQUEST["jsonp"]; // 获取调用的方法名
echo "$fun({'msg': 'jsonp'});";
- 使用jquery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jsonp</title>
</head>
<body>
<script src="http://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script>
$.ajax({
url: "http://localhost/province/json.php",
type: "get",
data: {},
dataType: "jsonp",
jsonp: "jsonp",
success: function (data) {
alert(data.msg);
},
error: function () {//...}
});
</script>
</body>
</html>
使用jquery提供的$.ajax可以快速实现跨域请求。首先设置dataType为"jsonp"，表示使用jsonp。参数jsonp是传递将被调用函数名，服务器通过使用该属性的值来获得函数名。使用jquery后也不需要自己写调用函数了，它将由jquery自动生成，正在的json数据将通过success属性回调自定义函数进行传递。
Ajax之跨域访问与JSONP的更多相关文章
- ajax实现跨域访问
ajax跨域访问是一个老生畅谈的问题啦,网上解决方法很多,discuz用的p3p协议,有兴趣的朋友可以了解下,比较常用的是JSONP方法,貌似目前这种方法只支持GET方式,不如POST方式安全. 即使 ...
- 跨域访问之JSONP
跨域 在平常的工作中常常会遇到A站点的需要访问B站点的资源. 这时就产生了跨域访问. 跨域是指从一个域名的网页去请求另一个域名的资源.浏览器遵循同源策略,不允许A站点的Javascript 读取B站点 ...
- ajax实现跨域访问的两种方式
一.使用jsonp实现跨域请求 在前端开发这中你会发现,所有带src属性的标签都可以跨域访问其他服务器文件.jsonp实现的原理也是如此. 以jsonp的数据类型进行请求时,JQ会动态在页面中添加sc ...
- Ajax实现跨域访问的两种方法
调程序时遇到"已拦截跨源请求:同源策略禁止读取位于--的远程资源",这是因为通过ajax调用其他域的接口会有跨域问题. 解决方法如下: 方法一:服务器端(PHP)设置header头 ...
- ASP.NET MVC & WebApi 中实现Cors来让Ajax可以跨域访问 （转载）
什么是Cors? CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing).它允许浏览器向跨源服务器,发出XMLHttpReq ...
- js,java,ajax实现跨域访问及其原理
http://blog.csdn.net/saytime/article/details/51540876 这篇文章对跨域访问做了较为细致得分析,我这里做下简单总结 1.实现跨域访问原理: 浏览器由于 ...
- Ajax.Nodejs.跨域访问
使用环境: 客户端: jQuery 服务器: Node.js 在通过Ajax调用非本域的链接/接口时, 一般是不能成功的, 就算是同一个IP下不同的端口也被认作跨域访问 解决办法记录如下: 客户端: ...
- Ajax实现跨域访问的三种方法
转载自:http://www.jb51.net/article/68424.htm 一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / scri ...
- Ajax不能跨域访问的解决方案
文章介绍 这是一篇,引导文吧... 因为写这篇文章时,实在想不出该如何分序.因此以实现跨域访问为目的,从基础知识往上写.最后以百度搜索智能提示为例,来讲解跨域的具体应用! 内容 首先,我们得明确什 ...
随机推荐
- 获取fastdfs所有文件
工作中,mysql中存储的图片链接信息和FastDFS实际存储的图片数量不一致,此时应该与mysql中有存储记录的图片保持一致,我们要在FastDFS服务器中删除哪些无用的图片.于是乎自己写了一个脚本 ...
- IFrame跨域访问&&IFrame跨域访问自定义高度
1.IFrame跨域访问: http://blog.csdn.net/fdipzone/article/details/17619673 2.IFrame跨域访问自定义高度: 由于JS禁止跨域访问,如 ...
- bittorrent 学习(一) 种子文件分析与bitmap位图
终于抽出时间来进行 BITTORRENT的学习了 BT想必大家都很熟悉了,是一种文件分发协议.每个下载者在下载的同时也在向其他下载者分享文件. 相对于FTP HTTP协议,BT并不是从某一个或者几个指 ...
- service 设计问题
今天写了一段让自己尴尬的代码,就是在一个方法中调用了两个 service 方法,而我为每个service 都定义了 事物回滚. 然后郁闷了,我执行请求调用该方法, 发现第二个service方法执行失败 ...
- solr7.7.0搜索引擎使用(一)(下载安装)
一.下载安装 可以直接在官网下载地址:https://lucene.apache.org/solr/ 解压之后,目录结构如下图,bin里边提供部署的文件,contrib提供额外的jar包,docs提供 ...
- 【Selenium】【BugList4】执行pip报错：Fatal error in launcher: Unable to create process using '""D:\Program Files\Python36\python.exe"" "D:\Program Files\Python36\Scripts\pip.exe" '
环境信息: python版本:V3.6.4 安装路径:D:\Program Files\python36 环境变量PATH:D:\Program Files\Python36;D:\Program F ...
- More x64 assembler fun-facts–new assembler directives（转载）
原文地址 The Windows x64 ABI (Application Binary Interface) presents some new challenges for assembly pr ...
- SGU 176 Flow construction (有源有汇有上下界最小流)
题意:给定 n 个点,m 条有向边,如果有向边的标号是1的话,就表示该边的上界下界都为容量 ,如果有向边的标号为0的哈,表示该边的下界为0,上界为容量 ,现在问,从 1 到 n 的最小流是多少,并输出 ...
- linux系统下载pycharm
如何下载pycharm安装包? 你可以通过访问 https://www.jetbrains.com/pycharm/download/#section=linux 获取安装包,如果是新手建议使用社区版 ...
- 整理python小爬虫
编码使我快乐!!! 我也不知道为什么,遇到自己喜欢的事情,就越想做下去,可以一个月不出门,但是不能一天没有电脑 掌握程度:对python有了一个更清晰的认识,自动化运维,也许可以用python实现呢, ...