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

时间 2019-12-07

标签经过 jsonp 获取 json 数据实现 ajax 请求栏目 JSON 繁體版

原文原文链接

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

JSON实例：php

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

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

纯文本，易于跨平台传递java
Javascript原生支持，后台语言几乎所有支持jquery
使用轻量级的文本数据交换格式，适合在互联网中传递web
比 XML 更小、更快，更易解析。ajax

基于JSON的这些特性，能够经过使服务器动态生成JSON文件，而后将客户端须要的数据装入这个文件，再将该文件调回客户端供客户端使用。为了便于客户端使用数据，逐渐造成了一种非正式传输协议JSONP，该协议的一个要点就是容许用户传递一个callback参数给服务端，而后服务端返回数据时会将这个callback参数做为函数名来装入JSON数据，这样客户端就能够随意定制本身的函数来自动处理返回数据了。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:请求失败时调用此方法。数组

运行结果：

服务器返回的数据类型：

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