内容简介：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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
CSS实战手册（第2版）
[美] David Sawyer McFarland / 俞黎敏 / 电子工业出版社 / 2010-6 / 69.80元
本书从介绍最基本的CSS知识开始，到建立用于打印网页的CSS和改进你的CSS习惯的最佳实践。将关于CSS的选择器、继承、层叠、格式化、边距、填充、边框、图片、网站导航、表格、表单、浮动布局、定位网页上的元素，以及用于打印网页的CSS等技术通过逐步地讲解与教程串联了起来。每章内容从简单到复杂，一步一步地建立起一个完整的教程示例，并在每章都会详细讨论一些技巧、最佳实践和各浏览器之间一致性的兼容问题及如......一起来看看 《CSS实战手册（第2版）》 这本书的介绍吧!
