JavaScript跨域调用API附例程

首先介绍一下json，JSON指的是JavaScript Object Notation 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。

 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语言。 JSON建构于两种结构： “名称/值”对的集合（A collection of name/value pairs）。

不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组 （associative array）。 值的有序列表（An ordered list of values）。

在大部分语言中，它被理解为数组（array）。 这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。 JSON具有以下这些形式： 对象是一个无序的“‘名称/值’对”集合。一个对象以 {左括号 开始， }右括号 结束。每个“名称”后跟一个 :冒号 ；“‘名称/值’ 对”之间使用 ,逗号 分隔。

例如：

//描述一个人
var person = {
    "Name": "Bob",
    "Age": 32,
    "Company": "IBM",
    "Engineer": true
}
//获取这个人的名字
console.log(person.Name);
//描述几个人
var members = [
    {
        "Name": "Bob",
        "Age": 32,
        "Company": "IBM",
        "Engineer": true
    },
    {
        "Name": "John",
        "Age": 20,
        "Company": "Oracle",
        "Engineer": false
    },
    {
        "Name": "Henry",
        "Age": 45,
        "Company": "Microsoft",
        "Engineer": false
    }
]
//获取John的公司
var johnsCompany = members[1].Company;
//看着眼熟吧？数组嘛。可以这样理解成数组

今天要用的是JSONP

因为JavaScript出于安全考虑，不允许直接使用XMLHttpRequest进行跨域请求，但是<script src="url://"></script>可以进行跨域请求，这就给我们使用API提供了一个机会。

可以看一下下面的代码：

<script>
var clientinfo = function(data){
console.log(data.query);
//控制台输出返回的IP地址
}

</script>
    <script src="http://ip-api.com/json/?lang=zh-CN&callback=clientinfo"></script>

这种方式使用了callback，大家可以看到返回的数据格式是 callback({"key1":"value1","key2":"value2","key3":"value3"}) 我们可以利用回调函数（callback）进行属于调用。

下面再看一下JQuery使用ajax进行跨域请求

//使用JQuery进行跨域获取
var url = "http://ip-api.com/json/?callback=?&lang=zh-CN";
$.getJSON(url,function(data){
console.log(data);
});