JSONP学习笔记

最新推荐文章于 2024-04-28 04:05:42 发布
最新推荐文章于 2024-04-28 04:05:42 发布
阅读量221 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Night_Emperor/article/details/78197875
版权 


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
function fn1(data) {
	var oUl1 = document.getElementById('ul1');
	var html = '';
	for (var i=0; i<data.length; i++) {
		html += '<li>'+data[i]+'</li>';
	}
	oUl1.innerHTML = html;
}
function fn2(data) {
	var oUl2 = document.getElementById('ul2');
	var html = '';
	for (var i=0; i<data.length; i++) {
		html += '<li>'+data[i]+'</li>';
	}
	oUl2.innerHTML = html;
}
function fn3(data) {
	var oUl3 = document.getElementById('ul3');
	var html = '';
	for (var i=0; i<data.length; i++) {
		html += '<li>'+data[i]+'</li>';
	}
	oUl3.innerHTML = html;
}
</script>
<script>
window.onload = function() {
	
	var oBtn1 = document.getElementById('btn1');
	
	var oBtn2 = document.getElementById('btn2');
	
	oBtn1.onclick = function() {
		
		var oScript = document.createElement('script');
		oScript.src = 'getData.php?callback=fn1';
		document.body.appendChild(oScript);
		
	}
	
	var oBtn2 = document.getElementById('btn2');
	
	oBtn2.onclick = function() {
		
		var oScript = document.createElement('script');
		oScript.src = 'getData.php?t=str&callback=fn2';//传递了两个参数
		document.body.appendChild(oScript);
		
	}
	
	var oBtn3 = document.getElementById('btn3');
	
	oBtn3.onclick = function() {
		
		var oScript = document.createElement('script');
		oScript.src = 'getData.php?callback=fn3';
		document.body.appendChild(oScript);
		
	}
	
}
</script>
</head>

<body>
	<input type="button" id="btn1" value="加载数字" />
    <ul id="ul1"></ul>
    <input type="button" id="btn2" value="加载字母" />
    <ul id="ul2"></ul>
    <input type="button" id="btn3" value="加载字母" />
    <ul id="ul3"></ul>
</body>
</html>

getData.php文件中的内容： 

<?php
$t = isset($_GET['t']) ? $_GET['t'] : 'num';//接受一个参数t,赋值给$t,如果没有t，将num赋值给$t
$callback = isset($_GET['callback']) ? $_GET['callback'] : 'fn1';//接受一个参数callback，赋值给$callback,如果没有，则将fn1赋值给$callback

$arr1 = array('111111','22222222','33333333','4444444','555555555555555555555');
$arr2 = array('aaaaaaaaaaaa','bbbbbbbb','cccccccccccc','ddddddddd','eeeeeeeeeeee');

if ($t == 'num') {
	$data = json_encode($arr1);
} else {
	$data = json_encode($arr2);
}

echo $callback.'('.$data.');';

利用百度数据库，进行搜索提示：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#q {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}
#ul1 {border:1px solid #f90; width: 310px; margin: 0;padding: 0; display: none;}
li a { line-height: 30px; padding: 5px; text-decoration: none; color: black; display: block;}
li a:hover{ background: #f90; color: white; }
</style>
<script>
function miaov(data) {
	
	var oUl = document.getElementById('ul1');
	var html = '';
	if (data.s.length) {
		oUl.style.display = 'block';
		for (var i=0; i<data.s.length; i++) {
			html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';
		}
		oUl.innerHTML = html;
	} else {
		oUl.style.display = 'none';
	}
	
}
window.onload = function() {
	
	var oQ = document.getElementById('q');
	var oUl = document.getElementById('ul1');
	
	oQ.onkeyup = function() {
		
		if ( this.value != '' ) {
			var oScript = document.createElement('script');
			oScript.src = 'https://www.baidu.com/su?&wd='+this.value+'&cb=miaov';
			document.body.appendChild(oScript);
		} else {
			oUl.style.display = 'none';
		}
		
	}
	
}
</script>
</head>

<body>
	<input type="text" id="q" />
	<ul id="ul1"></ul>
</body>
</html>

使用jQuery的ajax():

<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>无标题文档</title>  
<style>  
#q {width: 300px; height: 30px; padding: 5px; border:1px solid #f90; font-size: 16px;}  
#ul1 {border:1px solid #f90; width: 310px; margin: 0;padding: 0; display: none;}  
li a { line-height: 30px; padding: 5px; text-decoration: none; color: black; display: block;}  
li a:hover{ background: #f90; color: white; }  
</style>  
<script src="jquery-2.0.3.js"></script>
<script>  
window.onload = function() {    
    var oQ = document.getElementById('q');  
    var oUl = document.getElementById('ul1');  
      
    oQ.onkeyup = function() {  
          _this = this
        if ( this.value != '' ) {  
//          var oScript = document.createElement('script');  
//          oScript.src = 'https://www.baidu.com/su?wd='+this.value+'&cb=miaov';  
//          document.body.appendChild(oScript);  
            $.ajax({
            	type:"get",
            	url:"https://www.baidu.com/su?wd=" + _this.value,
            	dataType:"jsonp",
            	jsonp:"cb",
            	jsonpCallback:"miaov",
            	async:false,
            	success:function (data) {    
					    var oUl = document.getElementById('ul1');  
					    var html = '';  
					    if (data.s.length) {  
					        oUl.style.display = 'block';  
					        for (var i=0; i<data.s.length; i++) {  
					            html += '<li><a target="_blank" href="http://www.baidu.com/s?wd='+data.s[i]+'">'+ data.s[i] +'</a></li>';  
					        }  
					        oUl.innerHTML = html;  
					    } else {  
					        oUl.style.display = 'none';  
					    }       
					}
            });

        } else {  
            oUl.style.display = 'none';  
        }  
          
    }      
}  
</script>  
</head>  
  
<body>  
    <input type="text" id="q" />  
    <ul id="ul1"></ul>  
</body>  
</html>





Night_Emperor
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
揭开AJAX神秘的面纱(AJAX个人学习笔记)第1/5页
10-29
5. **跨域问题**：AJAX请求受到同源策略的限制，了解如何使用JSONP或CORS解决跨域请求。 6. **性能优化**：理解如何减少不必要的服务器请求，缓存数据，以及使用分页和延迟加载技术来提高页面性能。 7. **安全性...
JSON学习笔记
03-17
这篇"JSON学习笔记"可能涵盖了以下几个关键知识点： 1. JSON的基本结构：JSON数据由键值对（key-value pairs）组成，键和值之间用冒号隔开，键值对之间用逗号分隔。键必须是字符串，而值可以是字符串、数字、布尔值...
JSONP--笔记
洪海洋的博客
01-23 198
参考资料：http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html JSON 是一种数据格式。JSONP（JSON with padding）顾名思义是传递 JSON 数据的方法。jsonp 用来解决跨域问题。 是否跨域要看： 是否同协议（http 和 https） 是否同域名（子域不同也算，
jsonp学习笔记
qq_38497391的博客
03-14 180
什么是jsonp jsonp是一种基于json文本格式的使用模式，为了解决json的跨域问题， 结构相当于在json字符串外拼接一个方法名称，以括号包含该json字符串 例如：test({“key”:“hello world”}) 为什么使用jsonp js在跨域访问数据时会失效，因为违反了js的同源策略 所谓同源策略是，只要系统的访问地址、域名、端口有一个不同，就是违反同源策略 怎么使用jso...
jsonp原理学习笔记
weixin_49834243的博客
04-11 225
PS：根据B站学习视频 jsonp原理 学习整理，如有错误，欢迎随时指正，互相学习。 JSONP JSON with padding —— 填充式 JSON 原理 script 、link 、img 可以进行跨域请求并成功接收响应。 // 服务端代码 // 引入支持接受请求，返回响应的模块 http const http = require("http"); // 创建服务端程序实例 http.creatServer( // 每次请求自动调用回调函数 (req,res) => {
原生js写的复选框的全选、不选、反选
Fanbin168的专栏
01-16 2959
window.onload = function(){ var obtn1 = document.getElementById('btn1'); var obtn2 = document.getElementById('btn2'); var obtn3 = document.getElementById('btn3'); var odiv = document.g
JavaWEB笔记 CORS & JSONP 学习笔记
RainOnTheMoon的博客
09-04 108
CORS & JSONP 学习笔记 文章目录CORS & JSONP 学习笔记什么是跨域?为什么要跨域?利用 jsonp 进行跨域：cors： 什么是跨域? 首先,现代浏览器为了安全,做了一个同源限制，也就是所谓的同源安全策略，本质上，其实是不存在所谓的跨不跨域的。把浏览器想象成一个发送网络请求的软件，按照道理来说,请求都是可以发送出去的。但是在 web 端,浏览器里，这么做的就不合适。如果网络上的接口可以不受限制的被任意人调用，那将是一个非常混乱的场景。所以，为了防止这种情况，浏览器做了这
Ajax学习笔记
最新发布
2301_82244607的博客
04-28 912
XMLHttpRequest()：创建 XHR 对象的构造函数status：响应状态码值，如 200、404statusText：响应状态文本，如 ’ok‘、‘not found’readyState：标识请求状态的只读属性 0-1-2-3-4onreadystatechange：绑定 readyState 改变的监听responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应response：响应体数据，类型取决于 responseType 的指定。
extJs+2.1学习笔记.pdf
06-15
本学习笔记将深入探讨ExtJS 2.1的关键概念和技术，帮助读者掌握这个框架的核心要素。 1. **ExtJs 结构树** 在ExtJS中，应用程序通常基于组件树构建，每个组件都有自己的属性、方法和事件。理解这种结构对于布局...
学习笔记 MHT2
03-21
【学习笔记 MHT2】是一份综合性的IT学习资料，主要涵盖了JavaScript编程、软件开发工具、Web服务器技术、编码解码方法以及设计模式等多个领域的知识。以下是对这些知识点的详细阐述： 1. **JavaScript经典技巧**：...
ajax学习笔记代码
03-19
**Ajax学习笔记代码详解** Ajax，全称Asynchronous JavaScript and XML，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。这种技术的...
数组的slice方法和类数组
Night_Emperor的博客
10-31 1707
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice slice 方法可以用来将一个类数组（Array-like）对象/集合转换成一个数组。你只需将该方法绑定到这个对象上。下述代码中 list 函数中的 arguments 就是一个类数组对象。 fun
cookie学习笔记-通过数组读取cookie
Night_Emperor的博客
09-10 1377
function setCookie(name, value, iDay) { var oDate=new Date(); oDate.setDate(oDate.getDate()+iDay); document.cookie=name+'='+value+';expires='+oDate; } function getCookie(name) { //'username=a...
JavaScript中的try...catch语句和es5的严格模式
Night_Emperor的博客
11-09 1070
try...catch语句： try{ console.log('a'); console.log(b); console.log('c') }catch(e){//error error.name error.message -->error console.log(e.name+" : "+e.message); } console.log('d');结果：
JavaScript中的连续赋值
Night_Emperor的博客
11-11 960
JavaScript中的连续赋值： var a = {n: 1} var b = a; a.x = a = {n: 2} console.log(a.x);//undefined console.log(b.x)//Object {n: 2}
JavaScript DOM操作
Night_Emperor的博客
11-07 638
DOM查询： getElementById():Document 对象，返回值类型是元素对象。 getElementsByTagName():元素对象,返回值类型是类数组NodeList object。 getElementsByClassName():元素对象,返回值类型是类数组NodeList object。(IE8和IE8以下不支持) 由于getElementsByCl
JavaScript中的offset
Night_Emperor的博客
08-23 571
一.offsetLeft：元素的border与父元素border之间的距离。 无标题文档 *{margin: 0;padding: 0;} #div1{ width: 200px;height: 200px;background: red; background-clip:content-box;padding: 15px;border: solid 20px pink; marg
jsonp cookie
01-11
JSONP（JSON with Padding）是一种跨域数据请求技术，它允许在不受同源策略限制的前提下从不同域的服务器上获取数据。它的原理是通过在请求URL中添加一个回调函数的名称，服务器返回的数据会作为该回调函数的参数而...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值