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. 批处理备份和恢复mysql数据库

    备份 set "Ymd=%date:~,4%%date:~5,2%%date:~8,2%%time:~0,2%%time:~3,2%%time:~6,2%" md "D: ...

  2. Python----定义

    变量的定义: 变量第一次出现不是声明类型就是赋初值,才能后续使用. 函数的定义: ''' 函数的返回值不用声明类型 函数参数值最好赋一个类型值,例如整型赋值0,列表[] 函数名后面必须跟: ''' d ...

  3. Android向SDCard中上传文件时报错:Failed to push items

    向sdcard中添加文件为什么总是提示Failed to push the item(s) Failed to push XXXXX.txt on emulator-     : Read-only ...

  4. javascript之闭包深入理解（二）

    在上一节中,详细理解了作用域链和垃圾回收机制,似乎这两点跟闭包关系不大,但是仔细想一想就会发现,其实不然.这一节将通过上一部分的说明详细理解闭包.请看代码: function createCompar ...

  5. php resizeimage 部分jpg文件 生成缩略图失败

    今天遇到GD的resizeimage 函数处理jpg后缀文件的缩略图的时候 提示该图片不是合法的jpg图片并报错 <b>Warning</b>: imagecreatefrom ...

  6. 文件磁盘读写类CArchive类

    CArchive类的成员 数据成员 m_pDocument 指向被串行化的CDocument对象 构造函数 Carchive 创建一个Carhcive对象 Abort在不异常的情况下,关闭归档文件 C ...

  7. CSS jQuery 图片全屏切换

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

  8. EF 多线程插入 Insert into DbContext Multithreading

    当通过task 插入多条数据时报错. DBcontext 不是线程安全的, 如果是WebAPI 为每个请求创建DbContext 部分解释: http://stackoverflow.com/ques ...

  9. jquery升级到新版本报错[jQuery] Cannot read property ‘msie’ of undefined错误的解决方法(转)

    最近把一个项目的jQuery升级到最新版,发现有些页面报错Cannot read property 'msie' of undefined.上jQuery网站上搜了一下,原因是$.browser这个a ...

  10. 采访：Go语言编程

    Go语言是由Google在2009年11月份公布的,它的目标是要应对软件开发所面临的最新挑战.Go语言特别被设计为快速(包括在编译时).支持多核的语言,并且兼顾了动态语言的简单性和静态类型语言的安全性 ...