JSONP:JSON With Padding
要点：
1.script标签
2.用script标签加载资源是没有跨域问题的
概要：
在资源加载进来之前先定义一个函数，这个函数接受一个参数(数据)，函数里面利用这个参数做一些事情。
然后在需要的时候通过script标签加载对应远程文件资源，当远程的文件资源被加载进来的时候，就会执行我们前面定义好的函数，并且把我们想拿到的数据当做这个函数的参数传入进去。
小例子：
function fn(data){
alert(data);
}
/*
* 1.txt中的内容：fn([1,2,3]);
* 也就是执行了上面定义的fn函数
* script的src属性可以加载任何类型的文件，但文件里存放的必须是js语句
*/
程序运行结果：
当然这只是最基本的理解，对于JSONP的运用还有很多特定的规则
下面再通过两个例子说明：
首先我在自己的个人服务器上放置一个txt文件，以便跨域读取用：
注意里面的test函数，是运用JSONP的核心。
function test(data) {
var html = "";
for(var i = 0; i < data.s.length; i++) {
html += '
' + data.s[i] + '';
document.getElementById("god").innerHTML = html;
}
}
function cli() {
var oScript = document.createElement("script");
oScript.src = "ftp://linhuo:*********@/web/test/1.txt";
document.body.appendChild(oScript);
}
JSONP
我们再来看百度的实时推荐效果：
这也是利用了跨域加载技术，实现起来也不难：
function test(data) {
var oUl = document.getElementById("list");
var html = "";
if(data.s.length) {
oUl.style.display = "block";
for(var i = 0; i < data.s.length; i++) {
html += '
' + data.s[i] + '';
}
oUl.innerHTML = html;
} else {
oUl.style.display = "none";
}
}
window.onload = function() {
var in_put = document.getElementById("in");
var oUl = document.getElementById("list");
in_put.onkeyup = function() {
if(this.value != "") {
var oScript = document.createElement("script");
oScript.src = "/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + this.value + "&cb=test";
document.body.appendChild(oScript);
}else{
oUl.style.display = "none";
}
}
}
总结
以上是编程之家为你收集整理的用JSONP解决ajax跨域问题全部内容，希望文章能够帮你解决用JSONP解决ajax跨域问题所遇到的程序开发问题。
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如果觉得《jsonp解决ajax跨域问题 用JSONP解决ajax跨域问题》对你有帮助，请点赞、收藏，并留下你的观点哦！
