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. Date与Calendar

    Date date=new Date();//现在时间 Date date1=new Date(1000);//格林威治时间1997/01/01开始算,后面的是毫秒 Calendar calendar ...

  2. HDU 4611 - Balls Rearrangement（2013MUTC2-1001）（数学，区间压缩）

    以前好像是在UVa上貌似做过类似的,mod的剩余,今天比赛的时候受baofeng指点,完成了此道题 此题题意:求sum(|i%A-i%B|)(0<i<N-1) A.B的循环节不同时,会有重 ...

  3. phpcms二次开发步骤

    文件目录结构 根目录 | – api 接口文件目录 | – caches 缓存文件目录 | – configs 系统配置文件目录 | – caches_* 系统缓存目录 | – phpcms phpc ...

  4. 数据库和Doctrine（转载自http://www.111cn.net/phper/332/85987.htm）

    对于任何应用程序来说最为普遍最具挑战性的任务,就是从数据库中 读取和持久化数据信息.尽管symfony完整的框架没有默认集成ORM,但是symfony标准版,集成了很多程序,还自带集成了Doctrin ...

  5. 如何统一修改 Altium Designer 中的字符大小

    如下图 1 所示: Q1. Q2. C1. C2. R1 等等的字符你想统一修改他们的大小.原来是 Text Height( 100mil), Text Width( 12mil),想改成 Text ...

  6. 一个坑：java.sql.ResultSet.getInt==》the column value; if the value is SQL NULL, the value returned is 0

    Retrieves the value of the designated column in the current row of this ResultSet object as a String ...

  7. rsyslog 只读取变化的日志

    <pre name="code" class="html">input(type="imfile" File="/us ...

  8. 配置Delphi工具菜单 转

    配置Delphi工具菜单 Delphi工具菜单是可配置的.缺省时,Delphi Tools工具菜单的菜单项为[Database Desktop].[Image Editor].[Package Col ...

  9. BZOJ2038: [2009国家集训队]小Z的袜子(hose) -- 莫队算法 ，，分块

    2038: [2009国家集训队]小Z的袜子(hose) Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 3577  Solved: 1652[Subm ...

  10. 九度oj 1482：玛雅人的密码

    题意:输入一个长度为n(2<=n<=13)的字符串(所有字符为'0','1'或'2'),通过交换相邻的两个字符,至少要交换多少次才能处出现字串"2012",输出这个值, ...