找回密码
当前位置：前端开发者 > 教程 > 正文

前端json文本格式，jsonP实现跨域

2018-12-13 分类：教程 阅读(818) 评论(0)
前端开发和美工有区别么
前端开发和运维的区别
html与前端开发区别

什么是JSON？

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation），是一种轻量级的文本数据交换格式，类似于XML，但比 XML 更小、更快，更易解析。
PS: 前端中的文本格式都有，html，xml，js…文件

  • JSON 使用 Javascript语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。 目前非常多的动态（PHP，JSP，.NET）编程语言都支持JSON。

实例：

html 代码

<script>
    var JSONObject = {
        name: ‘菜鸟教程’,
        url: ‘www.runoob.com’,
        slogan: ‘学的不仅是技术，更是梦想！’,
    }
    document.getElementById(‘jname’).innerHTML = JSONObject.name
    document.getElementById(‘jurl’).innerHTML = JSONObject.url
    document.getElementById(‘jslogan’).innerHTML = JSONObject.slogan
</script>

为什么使用 JSON？

对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：

  1. 使用XML
    （1）读取 XML 文档
    （2）使用 XML DOM 来循环遍历文档
    （3）读取值并存储在变量中
  2. 使用JSON
    （1）读取 JSON 字符串
    （2）用 eval() 处理 JSON 字符串
  3. 与XML相同
    JSON 是纯文本
    JSON 具有”自我描述性”（人类可读）
    JSON 具有层级结构（值中存在值）
    JSON 可通过 JavaScript 进行解析
    JSON 数据可使用 AJAX 进行传输
  4. 与XML不同
    没有结束标签
    更短
    读写的速度更快
    能够使用内建的 JavaScript eval() 方法进行解析
    使用数组
    不使用保留字

JSON语法

JSON值
数字（整数或浮点数）
字符串（在双引号中）
逻辑值（true 或 false）
数组（在方括号中）
对象（在花括号中）
null
JSON对象
html 代码

{ “name”:”菜鸟教程” , “url”:”www.runoob.com” }

JSON数组
html 代码

“sites”: [
    {
        “name”: “菜鸟教程”,
        “url”: “www.runoob.com”
    },
    {
        “name”: “google”,
        “url”: “www.google.com”
    },
    {
        “name”: “微博”,
        “url”: “www.weibo.com”
    }
]

JSON文件

JSON 文件的文件类型是 ".json"
JSON 文本的 MIME 类型是 "application/json"

JSONP

是什么

Jsonp(JSON with Padding) 是 json 的一种”使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

跨域读取为什么需要JSONP

我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )，这是因为同源策略，即在同一个页面下，域名，协议，端口相同，他保证了浏览器最基本的安全功能。

应用

  1. 服务器端jsonp代码
    html 代码
<?php
header(‘Content-type: application/json’);
//获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST [‘jsoncallback’]);
//json数据
$json_data = ‘[“customername1″,”customername2”]’;
//输出jsonp格式的数据
echo $jsoncallback . “(” . $json_data . “)”;
?>
  1. 客户端完整代码
    html 代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″ />
        <title>JSONP 实例</title>
    </head>
    <body>
        <div id=”divCustomers”></div>
        <script type=”text/javascript”>
            function callbackFunction(result, methodName) {
                var html = ‘<ul>’
                for (var i = 0; i < result.length; i++) {
                    html += ‘<li>’ + result[i] + ‘</li>’
                }
                html += ‘</ul>’
                document.getElementById(‘divCustomers’).innerHTML = html
            }
        </script>
        <script
            type=”text/javascript”
            src=”http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction”
        ></script>
    </body>
</html>
  1. jquery jsonp
    html 代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″ />
        <title>JSONP 实例</title>
        <script src=”http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js”></script>
    </head>
    <body>
        <div id=”divCustomers”></div>
        <script>
            $.getJSON(
                ‘http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?’,
                function(data) {
                    var html = ‘<ul>’
                    for (var i = 0; i < data.length; i++) {
                        html += ‘<li>’ + data[i] + ‘</li>’
                    }
                    html += ‘</ul>’
                    $(‘#divCustomers’).html(html)
                },
            )
        </script>
    </body>
</html>
前端后台开发区别
后台与前端的开发区别
前端开发和设计区别
赞(0)
前端开发者 » 前端json文本格式，jsonP实现跨域
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论