使用JSONP实现跨域通信
引语
打开百度首页
按下F12 审查元素
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div1{width:500px; margin:50px auto; height:25px;}
#text1{ width:500px; height:25px;}
#ul1{ width:500px; margin:50px auto; border:1px solid #e5e5e5;}
</style>
<script type="text/javascript">
function succ(json){
var oUl=document.getElementById("ul1");
oUl.innerHTML="";
for(var i=0; i<json.s.length; i++){
var oLi=document.createElement("li");
oLi.innerHTML=json.s[i];
oUl.appendChild(oLi);
}
}
window.onload=function (){
var oTxt=document.getElementById("text1");
var oS=null;
oTxt.onkeyup=function (){
if (oS){
document.body.removeChild(oS);
}
oS=document.createElement("script");
var url="http://suggestion.baidu.com/su?wd="+oTxt.value+"&cb=succ";
oS.src=url;
document.body.appendChild(oS);
}
}
</script>
</head>
<body>
<div id="div1">
<input type="text" id="text1"/>
</div>
<ul id="ul1">
</ul>
</body>
</html>
使用JSONP实现跨域通信的更多相关文章
- 使用 JSONP 实现跨域通信
简介 Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的 ...
- 跨域通信的解决方案JSONP
在web2.0时代,熟练的使用ajax是每个前端攻城师必备的技能.然而由于受到浏览器的限制,ajax不允许跨域通信. JSONP就是就是目前主流的实现跨域通信的解决方案. 虽然在在jquery中,我们 ...
- JavaScript 跨域:window.postMessage 实现跨域通信
JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...
- 【JavsScript】父子页面之间跨域通信的方法
由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...
- 【JavaScript】父子页面之间跨域通信的方法
由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...
- JavaScript系列----AJAX机制详解以及跨域通信
1.Ajax 1.1.Ajax简介 Ajax简介这一部分我们主要是谈一下ajax的起源,ajax是什么?因为这些是跟技术无关的.所以,大多细节都是一笔带过. Ajax的起源? Ajax一词源于2005 ...
- 使用JSONP实现跨域
什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通 ...
- JSONP解决跨域方案
一.jsonp原理 本质并不是ajax,只是执行了跨域js,所以该方式只支持get方式 html中,所有带src属性的标签都可以跨域script img iframe 所以,可以通过script加载其 ...
- 【13】javascript跨域通信
javascript跨域通信 同源:两个文档同源需满足 协议相同 域名相同 端口相同 跨域通信方法: 01,通过设置img,script,link,iframe元素的src,href属性为目标url. ...
随机推荐
- Word不能添加目录?
我复制粘贴了一大把文字,标题也设置了,就是添加不了目录,也不知道是什么原因. 后来同事给我指点了一下,真是万分感激啊 比如下面这张图,第13章那么大的标题在那里,但是就是添加不了目录 原因是在于换行的 ...
- Oracle导出数据中的prompt,set feedback 等是什么意思
prompt 显示后面的提示,相当于一般的操作系统命令echo,输出后面的信息Importing table t_testset feedback off 1.set feedback 有三种方式: ...
- js 定义像java一样的map方便取值【转】
js 定义像java一样的map方便取值. 百度有位大神说"js对象本身就是一种Map结构",这真是一段让人欢天喜地的代码. <script> //定义一个全局map ...
- 运用Zabbix实现内网服务器状态及局域网状况监控(2) —— 环境配置
一.基本要求 Zabbix支持如下操作系统: LinuxIBM AIXFreeBSDNetBSDOpenBSDHP-UXMac OS XSolarisWindows: 2000, Server 200 ...
- Java高并发秒杀API之高并发优化
---恢复内容开始--- 第1章 秒杀系统高并发优化分析 1.为什么要单独获得系统时间 访问cdn这些静态资源不用请求系统服务器 而CDN上没有系统时间,需要单独获取,获取系统时间不用优化,只是n ...
- 转--python 黑魔法2
Python 高效编程小技巧 个人博客:临风|刀背藏身 Python 一直被我拿来写算法题,小程序,因为他使用起来太方便了,各种niubi闪闪的技能点也在写算法的过程中逐渐被挖掘到,感谢万能的谷哥度娘 ...
- DOM盒子模型
获取行间样式 style.height //获取行间样式高度 xx.currentStyle.height //计算后的样式高度 IE低版本 getComputedStyle().height //获 ...
- QWidget窗口类
import sys from PyQt5.QtWidgets import QWidget, QApplication,QPushButton from PyQt5.QtGui import QIc ...
- luogu P2726 [SHOI2005]树的双中心
传送门 强行安利->巨佬题解 如果只有一个点贡献答案,那么答案显然是这棵树的带权重心,这个是可以\(O(n)\)求的.一个\(O(n^2)\)暴力是枚举两个集合之间的分界边,然后对这两个集合分别 ...
- 【centos】 error: command 'gcc' failed with exit status 1
原文连接http://blog.csdn.net/fenglifeng1987/article/details/38057193 用安装Python模块出现error: command 'gcc' f ...