JSONP

来源：互联网发布：整型数据输入说明符编辑：程序博客网时间：2024/06/05 16:00

l 跨域的问题

• 域：域名

• 跨域请求（访问）：一个域名下的文件请求另外一个域名下的资源，就产生了跨域

l 跨域的解决

• Jsonp : json with padding

window.onload = function() {

//ajax跨域请求限制

varoBtn = document.getElementById('btn');

oBtn.onclick= function() {

varxhr = new XMLHttpRequest();

xhr.onreadystatechange= function() {

if(xhr.readyState == 4) {

if( xhr.status == 200 ) {

alert(xhr.responseText );

}

xhr.open('get','http://api.douban.com/book/subjects?q=javascript&alt=json&max-results=1',true);

xhr.send();

}

</script>

</head>

<body>

<inputtype="button" value="按钮"id="btn" />

XMLHttpRequest cannotloadhttp://api.douban.com/book/subjects?q=javascript&alt=json&max-results=1.No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://localhost' is therefore not allowed access.

<p>

跨域：跨域名

一个域名下的文件去请求了和他不一样的域名下的资源文件，那么就会产生跨域请求

</p>

</body>

解决跨域问题办法：

1. 通过本地代理：服务端文件访问资源，我们再访问同域下的服务器端的文件

2. Flash 服务端有个xml文件跨域文件名

3. Jsonp JSON and padding

l <script>标签

• src的作用：加载（包含指定的外部文件）

– 可以跨域包含

– 被包含的资源可以是任何类型的文件(可以是txt,php等)

– 他只关注被包含的文件的内容是否是合法的JS

l 原理

• 定义函数

• 包含外部文件，在被包含的文件中执行调用定义好的函数

• 参数的（数据）的实现

– 问题：包含就调用，通过动态创建<script>实现按需调用

– 问题：包含动态文件时可以通过一个接口实现按需生成调用函数名称

function fn(data){

alert(data);

}

</script>

<scriptsrc="2.txt"></script>

//alert(a);

</script>

</head>

<body>

JSONP : JSON withPadding

1.script标签

2.用script标签加载资源是没有跨域问题的

在资源加载进来之前定义好一个函数，这个函数接收一个参数（数据），函数里面利用这个参数做一些事情

然后需要的时候通过script标签加载对应远程文件资源，当远程的文件资源被加载进来的时候，就会去执行我们前面定义好的函数，并且把数据当作这个函数的参数传入进去

</body>

function fn(data){

alert(data);

}

</script>

window.onload =function() {

var oBtn =document.getElementById('btn');

oBtn.onclick = function() {

//当按钮点击的时候再去加载远程资源，让他执行

var oScript =document.createElement('script');

oScript.src = '2.txt';

document.body.appendChild(oScript);

}

</script>

</head>

<body>

JSONP : JSON withPadding

1.script标签

2.用script标签加载资源是没有跨域问题的

在资源加载进来之前定义好一个函数，这个函数接收一个参数（数据），函数里面利用这个参数做一些事情

</body>

注意：

function fn(data){

var oUl1 =document.getElementById('ul1');

var html = '';

for (var i=0; i<data.length; i++) {

html +='<li>'+data[i]+'</li>';

}

oUl1.innerHTML = html;

}

</script>

window.onload =function() {

var oBtn1 =document.getElementById('btn1');

oBtn1.onclick = function() {

var oScript =document.createElement('script');

oScript.src = 'getData.php';

document.body.appendChild(oScript);

}

</script>

</head>

<body>

</body>

</html>

对于不同按钮调用后端执行函数，可以传一个参数callback去执行不同的函数

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>

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>

</body>

getData.php

<?php

$t =isset($_GET['t']) ? $_GET['t'] : 'num';

$callback =isset($_GET['callback']) ? $_GET['callback'] : 'fn1';

$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.');';

0 0