内容简介:Ajax jsonp 跨域实例
欢迎大家关注我的其他Github博客和 简书 ,互相交流!
1.什么是jsonp:
JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
2.JSONP有什么用?
由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。
3.如何使用JSONP?
下边这一DEMO实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数。
下面是我自己做的一个简单的demo。实现的是306关键字搜索功能。采用的就是jsonp的跨域功能!
看例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>推荐搜索</title> </head> <body> <p>推荐搜索</p> <input type="text" id="val" name ="wd" > <input type="button" id="dian" value="搜索"> <ul></ul> <script> function abc(res) { var wds = res['result']; for(var i =0,str=''; i<wds.length; i++) { str = str + '<li>' + wds[i].word + '</li>'; } document.getElementsByTagName('ul')[0].innerHTML = str; } document.getElementsByName('wd')[0].oninput = function () { var url = 'http://sug.so.360.cn/suggest?callback=abc&encodein=utf-8&encodeout=utf-8&format=json&word=' + this.value; var sc = document.createElement('script'); sc.src = url; var hd = document.getElementsByTagName('head')[0]; hd.appendChild(sc); } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
图解物联网
[ 日] NTT DATA集团、河村雅人、大塚纮史、小林佑辅、小山武士、宫崎智也、石黑佑树、小岛康平 / 丁 灵 / 人民邮电出版社 / 2017-4 / 59.00元
本书图例丰富,从设备、传感器及传输协议等构成IoT的技术要素讲起,逐步深入讲解如何灵活运用IoT。内容包括用于实现IoT的架构、传感器的种类及能从传感器获取的信息等,并介绍了传感设备原型设计必需的Arduino等平台及这些平台的选择方法,连接传感器的电路,传感器的数据分析,乃至IoT跟智能手机/可穿戴设备的联动等。此外,本书以作者们开发的IoT系统为例,讲述了硬件设置、无线通信及网络安全等运用Io......一起来看看 《图解物联网》 这本书的介绍吧!