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的更多相关文章

  1. javascript笔记——jsonp

    上篇博客介绍了同源策略和跨域访问概念,其中提到跨域常用的基本方式:JSONP和CORS.   那这篇博客就介绍JSONP方式.   JSONP原理   在同源策略下,在某个服务器下的页面是无法获取到该 ...

  2. Javascript的jsonp原理

    Javascript的jsonp原理   首先JSON是一种基于文本的数据交换方式,或者叫做数据描述格式 当一个网页在请求JavaScript文件时则不受是否跨域的影响,凡是拥有”src”这个属性的标 ...

  3. JavaScript的jsonp

    目录索引: 一.AJAX的概念二.POST && GET三.原生实现AJAX简单示例 3.1 实现代码 3.2 重点说明四.框架隐藏域 4.1 基本概念 4.2 后台写入脚本 4.3 ...

  4. jquery及原生javascript对jsonp解决跨域问题实例详解

    jquery方式 前端: $.ajax({ url: 'http://m.xxx.tv/goLottery', data: { data: data }, type: 'GET', dataType: ...

  5. JavaScript使用jsonp实现跨域

    为什么要把ajax跨域写一下呢,因为ajax跨域并不是想跨就能跨的.因为为了安全,ajax是不允许跨域的. 举个例子,你有一个卖水果的网站,你的ajax请求另一个网站提供的图片,正常的时候,图片是一个 ...

  6. 原生javascript里jsonp的实现原理

    ajax不能跨域,jsonp可以跨域 跨域的核心思想:      调用(拿到的接口),定义(jsonp核心处理器)分别是不同的script标签里面进行跨script取数据(只有get方式进行取数据 ) ...

  7. javascript实现jsonp跨域问题+原理

    在工作中往往存在跨域的问题 ,跨域是什么概念就不在这里了,搜这类问题的肯定已经知道了.下面直接探讨jsonp跨域原理 jspon跨域原理: 1.动态创建一个script标签 var script = ...

  8. javascript - 封装jsonp

    jsonp牵扯到同源策略.跨域等问题,这里不细说了. 实现就是创建动态的script标签来请求后台地址: 示例: jsonp('xxx.php', { uid: 1 }, function (res) ...

  9. 疯狂的JSONP

    何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...

随机推荐

  1. angularjs不同页面间controller传参方式，使用service封装sessionStorage

    这里分享一个我在实际项目中,使用service封装的一个依赖sessionStorage的传参服务. 这里先说下大背景,在我们的实际开发中,登陆之后一般会存在一个token,这个token将会贯穿全场 ...

  2. 软件测试 homework1

    申明数组变量后,在使用的时候,出现了向上溢出的情况(程序运行过程中出现的),导致最后答案不正确,经过输出数组数据发现错误, 现在在申明数组的时候都会大致估算一下,确认申明什么样的数组不会导致溢出. 在 ...

  3. wm_char

    用于接收键盘输入的消息 int CXuexi2View::OnCreate(LPCREATESTRUCT lpCreateStruct) { if (CView::OnCreate(lpCreateS ...

  4. ionic初体验

    inoic使用入门安装inoic1.安装nodejs2.通过npm install -g iomic 在全局安装ionic3.通过ionic --help来查看帮助(其他命令详见弹出提示脚本) 后续收 ...

  5. PHP生成数字+字符混合型字符串

    以下是一个用PHP随机生成字符+数字混合型的随机字符串,可用来生成会员ID.用户密码/密钥等内容,函数简单,代码如下: <?php function generate_rand($l){ $c= ...

  6. 复杂事件处理引擎—Esper入门

    说明: 以下内容,可以参考Esper官方网站<Qucik start & Tutorial >(顺序做了部分调整). PS:因为英语水平有限(大学期间刚过CET4的英语小盲童一枚) ...

  7. Highly divisible triangular number

    我的那个暴力求解,太耗时间了. 用了网上产的什么因式分解,质因数之类的.确实快!还是数学基础不行,只能知道大约. The sequence of triangle numbers is generat ...

  8. Web应用部署工具

    Fabric----python写的,没试用过,基本上是local函数是调用本地命令,run是调用远程命令,看了些sample,还是觉得挺方便的. jekins------java的集成测试工具,也可 ...

  9. iOS 9之3D Touch

    金田 北京时间9月10日凌晨, Apple在美国旧金山比尔格拉汉姆公民大礼堂(Bill Graham Civic Auditorium)召开新品发布会.本次着重介绍了3D Touch功能, 大体介绍一 ...

  10. HDU5196--DZY Loves Inversions 树状数组 逆序数

    题意查询给定[L, R]区间内 逆序对数 ==k的子区间的个数. 我们只需要求出 子区间小于等于k的个数和小于等于k-1的个数,然后相减就得出答案了. 对于i(1≤i≤n),我们计算ri表示[i,ri ...