关于jsonp的实现和应用

jsonp与ajax实现的原理不同，在本质上两者是不同的东西。jsonp利用了script标签可以访问跨域文件中script代码的特性（和img 标签访问云路径图片原理一样），在向服务器发出请求的同时提交要执行的回调函数，服务器在接受到请求后作出响应（表现为回传一段带有参数的函数执行代码），客户端得到响应后执行回传的代码返回数据。注意一定要有服务器才行，因为这是跨域请求（在本文中我们用node写了服务器部分）。实现代码如下：

客户端代码：

<script type="text/javascript">

var log = function(msg) //定义一个叫log 的回调函数

{

alert(msg);

}

var add=function(n)//定义一个叫add的回调函数

{

n++;

alert("处理后的数值是："+n);

}

var url="http://10.17.152.22:8000/?fn=add";//ip地址注意换成自己的

var head = document.getElementsByTagName('head')[0];

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

//script.innerHTML="fn()";

script.src = url;

head.appendChild(script);

</script>

服务器端代码：(此处使用nodejs编写,直接node编译即可)

var http = require('http');

var express = require('express');

var app = express();

app.get('/*', function (req, res) {

var query=req.query;

var fn=query.fn; // fn代表用户传送的函数名称

if(fn)

{

res.send(fn+'(22)'); //在此只做了简单处理对所有请求返回22

}

});

var server = app.listen(8000);

基本流程图：

优点：不受同源策略的限制，可以实现跨域请求。

缺点：安全性并不高，因为服务器返回的是可以直接执行的代码，可能会引起注入式错误。

应用案例：

下面我们使用jsonp 运用第三方的后台接口实现一个简单的百度搜索功能：

代码如下

html 部分:

<input type="text" id="box">

<ul class="u_list"></ul>

css 部分 :

<style>

*{

padding: 0;

margin: 0;

}

input{

width: 480px;

height: 40px;

padding-left:20px;

margin-left: 300px;

}

.u_list{

width: 500px;

margin-left: 300px;

min-height: 30px;

}

.u_list li{

height: 30px;

line-height: 30px;

width: 480px;

list-style: none;

border: 1px #ccc solid;

padding-left: 20px;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

cursor: pointer;

}

.u_list li:hover{

background: #ccc;

}

</style>

js 部分 ：

<script>

var myInput=document.getElementById('box');

var Ulist=document.getElementsByClassName('u_list')[0];

function getRes(val){

var script = document.createElement("script");

script.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback";

document.getElementsByTagName("head")[0].appendChild(script);

}

function callback(res) {

Ulist.innerHTML='';

var arr=res.s;

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

{

var li=document.createElement('li');

li.innerHTML=arr[i];

Ulist.appendChild(li);

}

var contentArr=Ulist.children;

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

{

contentArr[i].onclick=function () {

myInput.value=this.innerHTML;

this.parentNode.style.display='none';

}

}

}

myInput.onkeyup=function (evt) {

evt=evt||window.event;

var val=myInput.value;

if(evt.keyCode==13) // 如果按下enter键

{

window.location.href = "http://www.baidu.com.cn/s?wd=" + val + "&cl=3";

}

else

{

Ulist.style.display='block';

getRes(val);

}

}

</script>

案例讲解：

以上的代码实现的功能是：在input的搜索框中输入某些关键词，在搜索框下自动生成相关信息列表。 选择列表中某条信息添加到搜索框，然后键盘enter确认搜索，跳转到相关信息页面。

在搜索框下相关信息列表的生成就是通过 jsonp形式返回给我们的数据。

script.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd="+val+"&json=1&p=3&sid=22084_1436_13548_21120_22036_22073&req=2&csor=0&cb=callback";

上边这行代码中比较重要的两个参数是val 和callback 分别代表我们要传入的关键词和我们所定义的回调函数名称。

本文所讲的案例效果仅限学习交流，请不要山寨百度搜索更不要利用本案例进行违法犯罪活动。