javascript 实现jsonp
jsonp原理其实也简单，虽然ajax不能跨域，但是通过src这个属性我们可以实现跨域，其实和我们引入第三方jquery调用它的方法一样的。
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jsonp</title>
<meta name="description" content="">
<meta name="keywords" content="">
<script>
function jsonp(data){
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
if(data.s.length){
var htmlText = '';
oUl.style.display = 'block';
for(var i = 0 ; i < data.s.length; i++){
htmlText += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+data.s[i]+'</a></li>';
}
oUl.innerHTML = htmlText
}else{
oUl.style.display='none'
}
}
document.onclick = function(e){
console.log(e.target.nodeName)
if(e.target.nodeName.toLowerCase() != 'input'){
document.getElementsByTagName('ul')[0].style.display = 'none'
}
}
window.onload = function(){
var oInput = document.getElementById('search');
oInput.oninput = function(){
var that= this;
var scriptTag = document.getElementsByTagName('script');
var tempScript =[];
var reg = /http:\/\/suggestion\.baidu\.com\/su\?wd=(.*)&cb=jsonp/;
if(scriptTag.length>1){
for(var i=0 ;i<scriptTag.length;i++){
if(scriptTag[i].src && reg.test(scriptTag[i].src)){
document.body.removeChild(scriptTag[i]);
var oScript = document.createElement('script');
oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=jsonp';
document.body.appendChild(oScript);
}
}
}else{
var oScript = document.createElement('script');
oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=jsonp';
document.body.appendChild(oScript);
}
}
}
</script>
<style>
input{
width:200px;
height:40px;
line-height: 40px;
text-indent: 5px;
outline:none;
border:1px solid #333;
}
ul{
list-style: none;
padding:0px;
margin:0px;
width:200px;
border:1px solid #333;
display: none;
}
ul li{
padding: none;
margin:0px; }
ul li:hover{
background:#f1f1f1;
}
ul li a{
text-decoration: none;
color:#333;
height:40px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width:100%;
line-height: 40px;
}
</style>
</head>
<body>
<input type="text" id="search">
<ul>
</ul>
</body>
</html>
js:
<script>
function jsonp(data){
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
if(data.s.length){
var htmlText = '';
oUl.style.display = 'block';
for(var i = 0 ; i < data.s.length; i++){
htmlText += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+data.s[i]+'</a></li>';
}
oUl.innerHTML = htmlText
}else{
oUl.style.display='none'
}
}
document.onclick = function(e){
console.log(e.target.nodeName)
if(e.target.nodeName.toLowerCase() != 'input'){
document.getElementsByTagName('ul')[0].style.display = 'none'
}
}
window.onload = function(){
var oInput = document.getElementById('search');
oInput.oninput = function(){
var that= this;
var scriptTag = document.getElementsByTagName('script');
var tempScript =[];
var reg = /http:\/\/suggestion\.baidu\.com\/su\?wd=(.*)&cb=jsonp/;
if(scriptTag.length>1){
for(var i=0 ;i<scriptTag.length;i++){
if(scriptTag[i].src && reg.test(scriptTag[i].src)){
document.body.removeChild(scriptTag[i]);
var oScript = document.createElement('script');
oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=jsonp';
document.body.appendChild(oScript);
}
}
}else{
var oScript = document.createElement('script');
oScript.src = 'http://suggestion.baidu.com/su?wd='+this.value+'&cb=jsonp';
document.body.appendChild(oScript);
}
}
}
</script>
javascript 实现jsonp的更多相关文章
- javascript笔记——jsonp
上篇博客介绍了同源策略和跨域访问概念,其中提到跨域常用的基本方式:JSONP和CORS. 那这篇博客就介绍JSONP方式. JSONP原理 在同源策略下,在某个服务器下的页面是无法获取到该 ...
- Javascript的jsonp原理
Javascript的jsonp原理 首先JSON是一种基于文本的数据交换方式,或者叫做数据描述格式 当一个网页在请求JavaScript文件时则不受是否跨域的影响,凡是拥有”src”这个属性的标 ...
- JavaScript的jsonp
目录索引: 一.AJAX的概念二.POST && GET三.原生实现AJAX简单示例 3.1 实现代码 3.2 重点说明四.框架隐藏域 4.1 基本概念 4.2 后台写入脚本 4.3 ...
- jquery及原生javascript对jsonp解决跨域问题实例详解
jquery方式 前端: $.ajax({ url: 'http://m.xxx.tv/goLottery', data: { data: data }, type: 'GET', dataType: ...
- JavaScript使用jsonp实现跨域
为什么要把ajax跨域写一下呢,因为ajax跨域并不是想跨就能跨的.因为为了安全,ajax是不允许跨域的. 举个例子,你有一个卖水果的网站,你的ajax请求另一个网站提供的图片,正常的时候,图片是一个 ...
- 原生javascript里jsonp的实现原理
ajax不能跨域,jsonp可以跨域 跨域的核心思想: 调用(拿到的接口),定义(jsonp核心处理器)分别是不同的script标签里面进行跨script取数据(只有get方式进行取数据 ) ...
- javascript实现jsonp跨域问题+原理
在工作中往往存在跨域的问题 ,跨域是什么概念就不在这里了,搜这类问题的肯定已经知道了.下面直接探讨jsonp跨域原理 jspon跨域原理: 1.动态创建一个script标签 var script = ...
- javascript - 封装jsonp
jsonp牵扯到同源策略.跨域等问题,这里不细说了. 实现就是创建动态的script标签来请求后台地址: 示例: jsonp('xxx.php', { uid: 1 }, function (res) ...
- 疯狂的JSONP
何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...
随机推荐
- 在Eclipse中编译maven项目出的问题
在Eclipse中编译Maven项目,运行 jetty:run 指令的时候会出错,在 JRE选项卡中加入: -Dorg.mortbay.util.URI.charset=GBK-Xms512m -Xm ...
- union关键字 与大小端模式
union 关键字(主要用来压缩空间,如果一些数据不可能同一时间同时用到,可是考虑使用union) union关键字声明的变量称之为联合体变量: (1)联合体变量只配置一个足够大的空间来容纳最大长度的 ...
- WDCP一些常用的一健安装包可选安装组件
为有更好的性能,也为更简洁的系统,一些不是常用或不是基本的功能,都将做为可选的安装组件需要用到的就安装 memcache的安装 wget -c http://down.wdlinux.cn/in/me ...
- 在windows下搭建linux-c学习环境
下载virtualbox并安装: https://www.virtualbox.org/wiki/Downloads 现在vagrant并安装: https://www.vagrantup.com/d ...
- nodejs 在headers添加内容发送到后端
app.all('*', function(req, res, next){ req.headers['COOKIE'] = 'Your Cookie' next() })
- Linux中判断大小端的一种方法
大小端的定义无需赘言,常用的方法有使用联合体和指针法,如: int checkCPU() { union w { int a; char b; }c; c.a = 1; return (c.b == ...
- rsync同步目录及同步文件
最简单的只读同步工作. 一,服务端的配置 1,安装rsync(阿里云默认已有此程序) 略 2,生成文件rsyncd.conf,内容如下: #secrets file = /etc/rsyncd.sec ...
- AD学习笔记----PCB设计
1.重新设置板子的形状 Design ---->Board Shape---->Redefine Board Sharp 2.通过Board Options 对板子进行设置 3.添加一个新 ...
- 2013第39周一Web打印
2013第39周一Web打印 项目中遇到了Java Web打印问题,简单调用IE浏览器的打印不能完全满足要求,于是就搜集了Web打印相关的主题,简单汇总一下.web打印难点在分页.页面纸张设置,页眉页 ...
- 生成excel内存溢出问题的解决方式
常用的excel生成工具包括jxl.poi.但二者都存在一个问题:生成excel需要大量的消耗内存.如果一次性往excel中写入的数据足够的多将导致内存溢出. 1.数据写入excel为什么会大量的消耗 ...