前言

　　同源策略的限制，使得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的更多相关文章

  1. ajax实现跨域访问

    ajax跨域访问是一个老生畅谈的问题啦,网上解决方法很多,discuz用的p3p协议,有兴趣的朋友可以了解下,比较常用的是JSONP方法,貌似目前这种方法只支持GET方式,不如POST方式安全. 即使 ...

  2. 跨域访问之JSONP

    跨域 在平常的工作中常常会遇到A站点的需要访问B站点的资源. 这时就产生了跨域访问. 跨域是指从一个域名的网页去请求另一个域名的资源.浏览器遵循同源策略,不允许A站点的Javascript 读取B站点 ...

  3. ajax实现跨域访问的两种方式

    一.使用jsonp实现跨域请求 在前端开发这中你会发现,所有带src属性的标签都可以跨域访问其他服务器文件.jsonp实现的原理也是如此. 以jsonp的数据类型进行请求时,JQ会动态在页面中添加sc ...

  4. Ajax实现跨域访问的两种方法

    调程序时遇到"已拦截跨源请求:同源策略禁止读取位于--的远程资源",这是因为通过ajax调用其他域的接口会有跨域问题. 解决方法如下: 方法一:服务器端(PHP)设置header头 ...

  5. ASP.NET MVC & WebApi 中实现Cors来让Ajax可以跨域访问 （转载）

    什么是Cors? CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing).它允许浏览器向跨源服务器,发出XMLHttpReq ...

  6. js,java,ajax实现跨域访问及其原理

    http://blog.csdn.net/saytime/article/details/51540876 这篇文章对跨域访问做了较为细致得分析,我这里做下简单总结 1.实现跨域访问原理: 浏览器由于 ...

  7. Ajax.Nodejs.跨域访问

    使用环境: 客户端: jQuery 服务器: Node.js 在通过Ajax调用非本域的链接/接口时, 一般是不能成功的, 就算是同一个IP下不同的端口也被认作跨域访问 解决办法记录如下: 客户端: ...

  8. Ajax实现跨域访问的三种方法

    转载自:http://www.jb51.net/article/68424.htm 一.什么是跨域 我们先回顾一下域名地址的组成: http:// www . google : 8080 / scri ...

  9. Ajax不能跨域访问的解决方案

      文章介绍 这是一篇,引导文吧... 因为写这篇文章时,实在想不出该如何分序.因此以实现跨域访问为目的,从基础知识往上写.最后以百度搜索智能提示为例,来讲解跨域的具体应用! 内容 首先,我们得明确什 ...

随机推荐

  1. 杨其菊201771010134《面向对象程序设计（Java）》第三周学习总结

    <面向对象程序设计(Java)>第三周学习总结 第一部分:理论知识 这周课程没有新进度,由于感觉对基础语法的不熟悉,复习了一遍前三章的细碎知识,学到一些之前不知道的原理: 1.计算机高级语 ...

  2. centOS redis的安装及配置

    1.下载redis的安装包 wget http://download.redis.io/releases/redis-4.0.2.tar.gz 我一般wget的文件都是在一个download的文件夹里 ...

  3. java多线程系列12 ConcurrentHashMap CopyOnWriteArrayList 简介

    我们知道 ,hashmap 和 arraylist 是线程不安全的 在多线程环境下有数据安全问题, 当然 我们可以通过Collections的一些方法把他们变成线程安全的, Collections.s ...

  4. 在centos7上使用最简单的方法把php脚本做成服务，随开机启动运行

    1.准备文件:coffeetest.service # copy to /usr/lib/systemd/system # systemctl enable coffeetest.service [U ...

  5. C#部分试题实例

    1.在C#中,下列选项中自定义方法的语句错误的是().(选择一项) 正确答案:AD 解析:本题考查自定义方法的定义及调用.A项void是无返回值类型,D项定义方法的时候没有写返回值类型:故选AD. 2 ...

  6. c语言基础课第三次作业

    7-1找出最小值 1.实验代码 #include <stdio.h> int main(void) int n, i, m, min; scanf("%d", & ...

  7. php 将对象转化为数组

    $list = json_decode(json_encode($list), true);  

  8. 在Unity5.6.5f1中使用C#7语法

    备忘,记忆力越来越差了,必需把这种琐碎的东西记下来,以防1年后想再用完全没头绪. 之前试过用C#6语法,但是怎么配置操作的完全没印象了. 首先去这下载扩展 https://bitbucket.org/ ...

  9. centos7安装python3.6后导致防火墙功能无法正常工作的解决办法

    问题:因为默认python版本被设置成了python3.6,而进行防火墙的指令操作频频报错. Jul 19 16:30:51 localhost.localdomain systemd[1]: Sta ...

  10. UVa 11481 Arrange the Numbers (组合数学)

    题意:给定 n,m,k,问你在 1 ~ n 的排列中,前 m 个恰好有 k 个不在自己位置的排列有多少个. 析:枚举 m+1 ~ n 中有多少个恰好在自己位置,这个是C(n-m, i),然后前面选出 ...