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. Oracle数据库之PL/SQL程序设计简介

    PL/SQL程序设计简介 一.什么是PL/SQL? PL/SQL是 Procedure Language & Structured Query Language 的缩写. ORACLE的SQL ...

  2. YesFinder - 网页文件管理系统 V2.0

    2.0版增加了模态框并重写了右键菜单插件.界面改为全中文.使用方式更加灵活. 同时,文件及目录改名更方便,直接双击名称就可改名. 这是DEMO的效果图. 1.功能上的主要改进是可以双击改文件/目录名称 ...

  3. html表格table设置边框

    对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解. 一般我们用表格的时候总会给它个border属性,比如:<table b ...

  4. ecos之widget

    weekbuy:widget.php<?php $setting['author']='zhang'; $setting['name']='周末购'; $setting['version']=' ...

  5. nodejs学习记录

    一.环境搭建 1.安装express 局部安装 npm i express 全局安装 npm i -g express (命令行express无法使用) 环境变量 npm i -g express-g ...

  6. centos 安装RAR

    根据系统的情况下载rarlinuxx64版本wget http://www.rarlab.com/rar/rarlinux-x64-4.2.0.tar.gzx86版本wget http://www.r ...

  7. Mac下安装MySQL-python

    前提系统中已安装python.mysql数据库: 第一步(终端输入): $ export PATH=$PATH:/usr/local/mysql/bin 第二步(终端输入): $ sudo pip i ...

  8. 利用Python读取json数据并求数据平均值

    要做的事情:一共十二个月的json数据(即12个json文件),json数据的一个单元如下所示.读取这些数据,并求取各个(100多个)城市年.季度平均值. { "time_point&quo ...

  9. Android 拨号器的实现 [视频1]

    Android自带了拨号功能和拨号器 这个是在一个视频里看到的    想写下来记录一下 下面放源代码 /hehe/res/layout/activity_main.xml <RelativeLa ...

  10. Xcode中将图片放入Images.xcassets和直接拖入的区别

    将图片放入Images.xcassets 在mainBundle里面Xcode会生成一个Assets.car文件,将我们放在Images.xcassets的图片打包在里面.(程序会变大(?)) 无论是 ...