轻松搞定JSONP跨域请求

一、同源策略

要理解跨域,先要了解一下“同源策略”。所谓同源是指,域名,协议,端口相同。所谓“同源策略“,简单的说就是基于安全考虑,当前域不能访问其他域的东西。

一些常见的是否同源示例可参照下表:

这里写图片描述

在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的。例如我们在自己的网站通过ajax去获取豆瓣上https://developers.douban.com/wiki/?title=api_v2提供的接口数据。这里我们以搜索图书为例,参数链接为:https://api.douban.com/v2/book/search?q=javascript&count=1,该链接中数据为JSON格式,如下:

这里写图片描述

我通过如下代码去访问该数据:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajaxtitle>
head>
<body>
    <div id="mydiv">
        <button id="btn">点击button>
    div>
body>
<script type="text/javascript">
    window.onload = function() {

    var oBtn = document.getElementById('btn');

    oBtn.onclick = function() {

        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                    alert( xhr.responseText );
            }
        };

        xhr.open('get', 'https://api.douban.com/v2/book/search?q=javascript&count=1', true);
        xhr.send(); 
    };

};
script>
html>

上述程序运行时会报错:

这里写图片描述

的src(获取图片),的href(获取css),

你可能感兴趣的:(跨域)