通过jsonp获取json数据--实现AJAX跨域请求

zhoutk 发布于2019-08-22 10:48 / 935人阅读

摘要：可通过进行解析，数据可使用进行传输。实例语法是对象表示法语法的子集数据在名称值对中数据由逗号分隔花括号保存对象方括号保存数组。运行结果服务器返回的数据类型返回一个指定函数名为的回调函数，函数里面包裹的数据为格式。

AJAX（异步的 JavaScript 和 XML）是用于创建快速动态网页的一种技术，它在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页，ajax 使用XMLHttpRequest对象在后台与服务器交换数据，XMLHttpRequest 是 AJAX 的基础，它允许客户端 JavaScript 通过 HTTP请求连接到远程服务器。
但是，由于受到浏览器的限制，这种方法不可以进行跨域访问，如果使用这种方法进行跨域访问则会出现安全问题。不过，我们可以发现，在web页面跨域调用 js文件时，不会受到浏览器的限制，所以我们可以利用将远程服务器端的数据装入js格式的文件，然后再用来供客户端进行调用。
JSON（JavaScript 对象表示法）是一种轻量级的文本数据交换格式，它具有自我描述性，易于理解。JSON 可通过 JavaScript 进行解析，JSON 数据可使用 AJAX 进行传输。

JSON实例：

{
    "employees": [
    { "firstName":"Bill" , "lastName":"Gates" },
    { "firstName":"George" , "lastName":"Bush" },
    { "firstName":"Thomas" , "lastName":"Carter" }
    ]
    }

JSON 语法是 JavaScript 对象表示法语法的子集:
数据在名称/值对中, 数据由逗号分隔 ,花括号保存对象, 方括号保存数组。
JSON的特性

纯文本，易于跨平台传递

Javascript原生支持，后台语言几乎全部支持

使用轻量级的文本数据交换格式，适合在互联网中传递

比 XML 更小、更快，更易解析。

基于JSON的这些特性，可以通过使服务器动态生成JSON文件，然后将客户端需要的数据装入这个文件，再将该文件调回客户端供客户端使用。为了便于客户端使用数据，逐渐形成了一种非正式传输协议JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来装入JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

如何使用JSONP

一种简单的方式就是使用jQuery来实现：




    
    test

type：请求类型，GET 或 POST,默认为 GET；
async:true（异步）或 false（同步）,默认情况下为true,同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行;
url:发送请求的地址(跨域请求时应为绝对地址);
dataType:指定服务器返回的数据类型;
jsonpCallback:自定义JSONP回调函数名称;
success:请求成功后回调函数;
error:请求失败时调用此方法。

运行结果：

服务器返回的数据类型：

返回一个指定函数名为message的回调函数，函数里面包裹的数据为JSON格式。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91293.html

再也不学AJAX了！（三）跨域获取资源 ② - JSONP & CORS

摘要：浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全，但是如果当我们需要使用跨域请求资源时，同源策略又会成为开发者的阻碍。我们之前提到过，如果想要绕过浏览器同源策略，实现使用技术跨域获取资源，需要服务端和客户端的协同合作。浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全，但是如果当我们需要使用AJAX跨域请求资源时，同源策略又会成为开发者的阻碍。在本文中，我们会简单介绍需...

enda 2019-08-21 17:55 评论0 收藏0
JSONP跨域访问API接口深入理解

摘要：说明关于跨域问题的解决方案多达七八种，你不要说哪有这么多，我不跟你较真哈，你也别跟我较真哈自行百度或这里不会跟你说那么多种只说使用最多的一种你要非说用的不是最多的我不信哦你信好了哈哈你开心就好关于跨域浏览器的同源策略要了解什么是跨域你需要了说明关于跨域问题的解决方案多达七、八种，你不要说哪有这么多，我不跟你较真哈，你也别跟我较真哈, ?！自行百度或 Google, 这里不会跟你...

tunny 2019-06-28 18:28 评论0 收藏0
原生JavaScript实现AJAX、JSONP

摘要：在这里讲解一下用原生如何实现。当然，前面也说过，你可以给定固定回调函数名最后我已经将和请求合并在一起了，下载链接原文链接原生实现如有问题，欢迎在下方留言相信大多数前端开发者在需要与后端进行数据交互时，为了方便快捷，都会选择JQuery中封装的AJAX方法，但是有些时候，我们只需要JQuery的AJAX请求方法，而其他的功能用到的很少，这显然是没必要的。其实，原生JavaScript...

xcc3641 2019-08-20 14:06 评论0 收藏0
JSONP的一点笔记<修改中>

摘要：请求服务器数据并规定回调函数为上面代码通过动态添加元素，向服务器发出请求。另外假设向服务发送的请求是这样的在这种情况下，是表示请求的请求参数，而是应用程序的回调函数的名称。清单调用回调服务注意，我们使用作为回调函数名，而非真实的函数名。同源策略同源策略(Same origin policy)，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript的浏览器都...

姘存按 2019-08-20 17:22 评论0 收藏0