(一)什么是跨域请求?

首先要理解什么是跨域?

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。

其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

常见跨域场景:(JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。)

常见解决跨域办法:

①代理:使用php做代理文件,ajax直接请求php文件

②通过设置响应头

③通过jsonp,通过某些标签(img,script,iframe )src属性

(二)json和jsonp的定义和区别

区别:

　　json是一种基于文本的数据交换格式（无法跨域）,jsonp是一种非官方跨域数据交互协议。json返回的是一串数据,而 jsonp返回的是脚本代码（包含一个函数调用）。

定义:

　　json可以理解为是一种格式，它的键必须用双引号。json格式的对象必须写在{}花括号里面，json格式的数组写在[]大括号里面。

　　jsonp实现跨域的原理：

　　 1.首先在客户端注册一个callback, 然后把callback的名字传给服务器。
　　 2.服务器先生成 json 数据。 然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp. 最后将 json 数据直接以入参

的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

3.客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

 (三)使用demo示例

script标签jsonp跨域具体实现

(1)script标签实现跨域

客户端html代码:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>script标签与jsonp</title>

     <script>

         var script = document.createElement('script');

         script.type = 'text/javascript';

         //传参并指定回调执行函数为jsonpBack

         script.src = 'http://dev.test.com/jsonp.php?callback=jsonpBack';

         //script标签追加到head标签中

         document.head.appendChild(script);

         //回调执行函数

         function jsonpBack(data) {

             alert(JSON.stringify(data));

         }

     </script>

 </head>

 <body>

 </body>

 </html>

服务端php.代码

 <?php

 $a = $_GET['callback'];//接收参数,名为js函数名

 $data = array('name'=>'admin','age'=>100);

 $json = json_encode($data);

 echo "$a($json)";//服务端输出,可执行的js函数名称

打印结果如下图:

注意:由于浏览器的同源策略,禁止ajax从一个域名请求另外一个域名上面的数据.

(2)ajax获取json数据

客户端html代码:

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>ajax获取json</title>

 </head>

 <body>

 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>

 <script type="text/javascript">

 </script>

 <script type="text/javascript">

         $.ajax({

             type : 'get',

             url  : 'http://dev.php.com/test3/json.php',

             dataType : 'json',

             success : function(data) {

                 alert('ajax获取json数据:' +JSON.stringify(data));

             }

         });

 </script>

 </body>

 </html>

服务端php.代码

 <?php

 $data = array("name"=>"admin","age"=>"100");

 $json = json_encode($data);

 echo $json;

打印结果如下图:

ajax中jsonp跨域具体实现

(3)ajax中jsonp使用

客户端html代码:

 <!DOCTYPE html>

 <html>

 <head>

   <meta charset="UTF-8">

     <title>ajax中jsonp</title>

 </head>

 <body>

 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>

 <script type="text/javascript">

   $.ajax({

        type: "get",

        url: "http://dev.test.com/jsonp.php",

        dataType: "jsonp",

        jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)

        jsonpCallback:"jsonpBack",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据

        success: function(data){

            alert('ajax中jsonp回调:' +JSON.stringify(data));

        },

        error: function(){

            alert('fail');

        }

    });

 </script>

 </body>

 </html>

服务端php.代码

 <?php

 $a = $_GET['callback'];//接收参数,名为js函数名

 $data = array('name'=>'admin','age'=>100);

 $json = json_encode($data);

 echo "$a($json)";//服务端输出,可执行的js函数名称

打印结果如下图:

 

理解json和jsonp的定义和区别以及如何实际使用的更多相关文章

  1. json、jsonp的定义和区别

    一.区别 简单来说,json是一种数据交换格式,jsonp是一种非官方跨域数据交互协议.json描述的是信息的格式,而jsonp是信息传递双方约定的方法.json返回的是一串数据,而 jsonp返回的 ...

  2. JSON、JSONP、XML的区别

    这两天看jquery手册的时候看到了jsonp.发现手册把jsonp与json放在一起讲解了,所以想写篇文章 梳理一下这三者的关系. jsonp: jsonp是json的一种“使用模式”,可以让网页从 ...

  3. JSON、JSONP、Ajax的区别

    什么是JSON JSON是一种基于文本的数据交换方式,或者叫做数据描述格式. JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量 ...

  4. json与jsonp区别浅析（json才是目的，jsonp只是手段）

    一言以蔽之,json返回的是一串数据:而jsonp返回的是脚本代码(包含一个函数调用): JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展 ...

  5. json与jsonp区别浅析（json才是目的，jsonp只是手段） (转)

    一言以蔽之,json返回的是一串数据:而jsonp返回的是脚本代码(包含一个函数调用): JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展 ...

  6. JSON跟JSONP的区别以及实战

    前言 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socke ...

  7. JSON和JSONP的区别，以及使用方法

    (一)场景 在拉京东城市选择的基础数据时候,遇到被服务器拒绝的情况,也就是ajax跨域问题 (二)json和jsonp 说的直白一点,在我们做ajax异步的一些功能的时候,一定会或多或少的遇到两个问题 ...

  8. 【转】json与jsonp区别浅析（json才是目的，jsonp只是手段）

    一言以蔽之,json返回的是一串数据:而jsonp返回的是脚本代码(包含一个函数调用): JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展 ...

  9. json和jsonp的区别（转）

    原文链接:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html  前言: 说到AJAX就会不可避免的面临 ...

随机推荐

  1. idea下载和设置自动翻译（有道）

    1:下载 点击file,点击settings,找到plugins,之后所搜translation并下载,他会自动从新启动idea 2:设置translation 3:这个应用ID和秘钥需要在有道智云去 ...

  2. python基础-9.1 面向对象进阶 super 类对象成员 类属性 私有属性 查找源码类对象步骤 类特殊成员 isinstance issubclass 异常处理

    上一篇文章介绍了面向对象基本知识: 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使用(可以讲多函数中公用的变量封装到对象中) 对象 ...

  3. 总结：String类型与Int类型的转换【实现插入操作主键自增】

    1.String类型(此类型是数字格式的字符串类型)转换成Int类型 String str = "10000"; 转换成Int类型: int num = Integer.parse ...

  4. STM32启动地址设置及从非0x800000 开始调试程序

    首先设置程序的启动地址,STM32默认的启动地址是从0x8000000开始的,现在我要设置程序向后偏移10K地址,也就是从0x8002800启动. 需要分两步完成上面操作: 一.Keil MDK设置: ...

  5. python里的排序

    本篇文章主要讲: 自定义规则排序 多字段排序 开讲之前,先讲一些简单sorted()或者sort(),两者返回值不同!大家自行学习,不是本文的重点! sorted([5, 2, 3, 1, 4]) # ...

  6. 洛谷 - P4114 - Qtree1 - 重链剖分

    https://www.luogu.org/problem/P4114 维护边权的话,用深度大的点表示这条边(可以遍历一边边询问两端深度,这样不需要修改dfs1,也可以在dfs1的时候向下走的同时把边 ...

  7. Python2和Python3中的rang()不同之点

    知道在python中rang()是一个有序的列表,在使用过程发现,Python2和Python3中的rang()不同之点,下面讲述不同之点 1,Python2 rang()用法 ->> r ...

  8. Neo4j的查询语法笔记(二)

    cypher是neo4j官网提供的声明式查询语言,非常强大,用它可以完成任意的图谱里面的查询过滤,我们知识图谱的一期项目 基本开发完毕,后面会陆续总结学习一下neo4j相关的知识.今天接着上篇文章来看 ...

  9. RocksDB解析

    0. 存储引擎基础 存储引擎的基本功能和数据结构 一个存储引擎需要实现三个基本的功能: write(key, value)                                       ...

  10. Lambda创建表达式目录树

    一,如下代码: using System; using System.Linq.Expressions; namespace Demo { class Program { static void Ma ...