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. Struts2 模型驱动及页面回显

    * 要从页面中获取表单元素的值,需要在动作类中声明与页面元素同名的属性.导致动作类中既有javabean又有业务方法.        * 将javabean和业务方法进行分离:        * 将重 ...

  2. 跟我学android-搭建Android开发环境（一）

    Android官网地址:http://developer.android.com/,下载和安装 AndroidSDK请按如下步骤进行: 下载ADT 和SDK:http://developer.andr ...

  3. (转)C#.NET使用TTS引擎实现文语转换

    (转)C#.NET使用TTS引擎实现文语转换 本文讲述使用微软TTS5.1语音引擎(中文)实现文本阅读和音频输出为WAV完美解决方案. 网上很多文章说的是要安装SAPI.51 SDK,而这个东西有好几 ...

  4. memcache配置与使用

    php100:73:MemCached高级缓存配置 Memcache相关介绍: memcache 是一个高性能的分布式的内存对象缓存系统,它能够存储各种各样的的数据,包括图片,视频,文件等等.缓存功能 ...

  5. 用C实现一个简单的对拍器——致每个曾经为求AC披星戴月的程序员们

    大一新生,首次创作,虚心受教. 实现思路: 一.需要一个输入文件(input.txt),两个对拍程序(main1.exe,main2.exe) 二.将标准输入重定向为input.txt.将标准输出分别 ...

  6. 使用Jstl异常：The absolute uri: http://java.sun.com/jsp/jstl/core cannot&nbs

    错误提示是:        org.apache.jasper.JasperException: This absolute uri http://java.sun.com/jsp/jstl/core ...

  7. IOS动画总结

    IOS动画总结   一.基本方式:使用UIView类的UIViewAnimation扩展 + (void)beginAnimations:(NSString *)animationID context ...

  8. Swift—静态方法-备

    静态方法与静态属性类似,Swift中定义了静态方法,也称为类型方法.静态方法的定义与静态属性类似,枚举和结构体的静态方法使用的关键字是static:类静态方法使用的关键字是class或static,如 ...

  9. 路由器WDS桥接教程

    因为有吧友买了此款路由又不会桥接,因此做这个教程.老鸟自动路过,废话不多说,下面开始讲解. 1.wifi密码破解和路由器用户名和密码部分请自行解决,我只讲桥接部分.首先,在浏览器里输入192.168. ...

  10. ionic android app 签名处理

    第一步:生成签名证书． y@y:my_temp$ $ keytool -genkey -v -keystore my-release-key.keystore -alias ydkt -keyalg ...