跨域解决方案之JSONP

同源策略

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

同源策略,它是由Netscape提出的一个著名的安全策略。

现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。

例如:

http://www.baidu.com 和 http://www.baidu.com:8080 二者是不同源的。
http://www.baidu.com和https://www.baidu.com 同样是不同源的。

当请求不同源的数据的时候,浏览器就会在控制台报出一个异常,并且提示拒绝访问。同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收。

JSONP介绍

JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的 元素是一个例外。利用 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON,而是任意的JavaScript,用 JavaScript 直译器执行而不是用 JSON 解析器解析。

JSONP之百度小案例

主要借助百度搜索的API,调用时会存在跨域问题,需要通过JSONP来解决这个问题:

http://suggestion.baidu.com/su

想要使用这个接口需要设置两个参数:

wd  要搜索的内容
cb 回调函数
  • 我们首先在页面当中实现一个输入框:
 <input type="search" name='p' id="p" placeholder="请输入搜索内容">
<button id="btn">点击搜索</button>
<ul id="list">
<!-- <li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li> -->
</ul>
  • 下面是js代码:
let lis = document.getElementById('list');
let p = document.getElementById('p'); //callback回调函数 为了直观的把后台数据显示到网页中
function fn(data) {
let html = '';
for (let i = 0; i < data.s.length; i++) {
html += `<li><a href="http://www.baidu.com/s?wd=${data.s[i]}">${data.s[i]}</a></li>`;
// html += `<li><a href="http://www.baidu.com/s?wd=${data.s[i]}">${data.s[i]}</a></li>`;
}
lis.innerHTML = html;
}
//获取按钮
let btn = document.getElementById('btn');
btn.onclick = function() {
let info = p.value;
// console.log(info);
let url = "http://www.baidu.com/s?wd=" + info;
window.location.assign(url); }
//获取搜索框
p.onkeyup = function() {
lis.style.display = 'block';
if (this.value !== "") {
let script = document.createElement('script');
script.src = "http://suggestion.baidu.com/su?wd=" + this.value + "&cb=fn";
document.body.appendChild(script);
} else {
lis.style.display = 'none';
}
}

跨域解决方案之JSONP,通过借助调用百度搜索的API了解跨域案例的更多相关文章

  1. HTML实现调用百度在线翻译API

    HTML实现调用百度在线翻译API 本文章已收录于:   <!doctype html> <html lang="en"> <head> < ...

  2. QT调用百度语音REST API实现语音合成

    QT调用百度语音REST API实现语音合成 1.首先点击点击链接http://yuyin.baidu.com/docs/tts 点击access_token,获取access_token,里面有详细 ...

  3. 苹果手机 微信调用百度地图Javascript API 频繁闪退问题

    最近在网页中调用百度地图API js大众版,但是在IOS8系统中,缩放的时候频繁闪退,安卓手机没有这个问题! 在网上查询了下,有网友回答说不要频繁的去new marker,而是初始化话一定量的mark ...

  4. [妙味Ajax]第三课:AJAX跨域解决方案:JSONP

    知识点总结: JSONP(JSON with Padding): 1.script标签 2.用script标签加载资源是没有跨域问题的 在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据), ...

  5. 【PHP】Ajax跨域解决方案 、jsonp、cors

    参考文章: 1.https://blog.csdn.net/u014727260/article/details/72793459 (后台java,实际上差不多) 2. 如何解决ajax跨域传输 数据 ...

  6. C#怎么调用百度地图Web API

    直接上代码: public ActionResult FindMileage() { string s; HttpWebRequest req = (HttpWebRequest)HttpWebReq ...

  7. [ActionScript 3.0] AS3调用百度天气预报查询API

    接口说明 根据经纬度/城市名查询天气的结果 接口示例 http://api.map.baidu.com/telematics/v3/weather?location=成都&output=jso ...

  8. PHP调用百度天气接口API

    //百度天气接口API $location = "北京"; //地区 $ak = "5slgyqGDENN7Sy7pw29IUvrZ"; //秘钥,需要申请,百 ...

  9. jsonp模仿了得一个百度搜索框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. sql server time(7) 默认值

    语句为 ALTER TABLE dbo.YourTable ADD CONSTRAINT DF_TimeDefault DEFAULT '00:00:00' FOR YourTimeColumn 比如 ...

  2. Jsp页面中常用的EL表达式

    首先引入标签 <%@ page language="java" contentType="text/html; charset=utf-8"  pageE ...

  3. phtoshop CC2018破解简单过程

    1.下载adobe photoshop cc 2018(可以用360安全卫士下载)-->并安装2.下载破解补丁,破解补丁下载地址:http://www.xue51.com/soft/1377.h ...

  4. 【转载】使用JSONObject生成和解析json

    1. json数据类型 类型 描述 Number 数字型 String 字符串型 Boolean 布尔型 Array 数组 Object 对象 null 空值 (1)json中不区分整数.小数等类型, ...

  5. 【第一课】kaggle初识

    Evernote Export Crowdflower搜索结果相关性 文件和数据描述 train.csv训练数据集包括: id:产品ID查询:使用的搜索词 product_description:完整 ...

  6. 15.5.2 【Task实现细节】骨架方法的结构

    尽管骨架方法中的代码非常简单,但它暗示了状态机的职责.代码清单15-11生成的骨架方 法如下所示: [DebuggerStepThrough] [AsyncStateMachine(typeof(De ...

  7. jquery判断字符串中是否存在某个的字符串

    有两种方式: 1)test 2)indexOf $(function(){ var str="sunny,woo"; var sear=new RegExp(','); if(se ...

  8. laravel-hprose(rpc框架)

    Laravel-hprose 基于 hprose/hprose-php 开发的Laravel扩展:laravel-hprose 版本要求 Laravel>=5.2 安装 composer req ...

  9. 认识一下.net的架构设计

    首先我们先逐步的了解一下.net都包含什么? 从层次结构上来看,公共语言运行时(CLR:Common Language Runtime).服务框架(Services Framework)和上层的两类应 ...

  10. WinForm 登录窗体 + 单实例运行

    关于怎么在winform里增加登录窗体或者如何让winform程序单实例运行网上都很多例子. 然而两者结合起来呢? //Program.cs static class Program { public ...