经由过程jsonp猎取json数据--完成AJAX跨域要求

2019年8月31日 199次阅读 来源: readyGo

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来完成：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>test</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
     <script type="text/javascript">
     $(document).ready(function(){ 
         
        $.ajax({
             type: "get",
             async: false,
             url: "http://encounter.christmas023.space/json.php?name=mavis&age=18",
             dataType: "jsonp",
             jsonp: "callback",//通报给要求处置惩罚顺序或页面的，用以取得jsonp回调函数名的参数名(平常默以为:callback)
             jsonpCallback:"message",//自定义的jsonp回调函数称号，默以为jQuery自动天生的随机函数名，也能够写"?"，jQuery会自动为你处置惩罚数据
             success: function(json){
                 alert('你的名字：' + json.name + '  岁数： ' + json.age);
                 
             },
             error: function(){
                 alert('fail');
             }
         });
   
     });
     </script>
</head>
<body>

</body>
</html>

type：要求范例，GET 或 POST,默以为 GET；
async:true（异步）或 false（同步）,默许状况下为true,同步要求将锁住浏览器，用户别的操纵必需守候要求完成才能够实行;
url:发送要求的地点(跨域要求时应为相对地点);
dataType:指定服务器返回的数据范例;
jsonpCallback:自定义JSONP回调函数称号;
success:要求胜利后回调函数;
error:要求失利时挪用此要领。

运转效果：
《经由过程jsonp猎取json数据--完成AJAX跨域要求》

服务器返回的数据范例：
《经由过程jsonp猎取json数据--完成AJAX跨域要求》

返回一个指定函数名为message的回调函数，函数内里包裹的数据为JSON花样。

    原文作者：readyGo
    原文地址: https://segmentfault.com/a/1190000007754910
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞