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].οnclick=function () {
myInput.value=this.innerHTML;
this.parentNode.style.display='none';
}
}
}
myInput.οnkeyup=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 分別代表我們要傳入的關鍵詞和我們所定義的回調函數名稱。
本文所講的案例效果僅限學習交流，請不要山寨百度搜索更不要利用本案例進行違法犯罪活動。