原生JS實(shí)現(xiàn)JSONP：

addEvent('search-input-text', 'keyup', function() {

? ? ? ? var searchText = getDOM("search-input-text").value;

? ? ? ? //供jsonp服務(wù)的url地址（不管是什么類型的地址，最終生成的返回值都是一段javascript代碼）

? ? ? ? //其實(shí)參數(shù)都是前端和后臺(tái)程序員規(guī)定的，前端傳過(guò)去，后端判斷獲取即可。

? ? ? ? var url = "http://api.bing.com/qsonhs.aspx?type=cb&cb=jsonpcallback&q=" + searchText;

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

? ? ? ? script.setAttribute('src', url);

? ? ? ? // 把script標(biāo)簽加入body，此時(shí)調(diào)用開(kāi)始 ? ? ? ?

? ? ? ? document.getElementsByTagName('body')[0].appendChild(script);

? ? ? ? getDOM('search-suggest').style.top = getElementTop(getDOM('search-form')) + 38 + 'px';

? ? ? ? getDOM('search-suggest').style.left = getElementLeft(getDOM('search-form')) + 'px';

? ? ? ? getDOM('search-suggest').style.position = 'absolute';

? ? ? ? getDOM('search-suggest').style.display = 'block'; ? ? ? ?

? ? });

? ? function jsonpcallback(data) {

? ? ? ? var data = data.AS.Results[0].Suggests;

? ? ? ? var html = "";

? ? ? ? console.log(data);

? ? ? ? var html = "";

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

? ? ? ? ? ? html += "<li>" + data[i].Txt + "</li>"

? ? ? ? }

? ? ? ? getDOM('search-result').innerHTML = html;

? ? };

// JavaScript Document
$('#search_input').bind('keyup',function(){
?? ?/*var searchText=$('#search_input').val();//獲取到用戶輸入的內(nèi)容
?? ?$.get('http://api.bing.com/qsomhs.aspx?q='+searchText,function(d){//Ajax與服務(wù)器進(jìn)行交互
?? ??? ?var d =d.AS.Results[0].Suggests;
?? ??? ?var html='';
?? ??? ?for(var i=0;i<d.length;i++){
?? ??? ??? ?html+='<li>'+d[i].Txt+'</li>';
?? ??? ??? ?}
?? ??? ??? ?$('#search-result').html(html);
?? ??? ??? ?$('#search-suggest').show().css({
?? ??? ?top:$('#search-form').offset().top+$('#search-form').height()+10,
?? ??? ?left:$('#search-form').offset().left,
?? ??? ?position:'absolute'
?? ??? ?})
?? ??? ?},'json');*/
?? ??? ?
?? ??? ?//為了解決JSON同源策略，使用jsonp進(jìn)行跨域請(qǐng)求，可直接請(qǐng)求'api.bing.com'域名
?? ??? ?$.ajax({
?? ??? ??? ?type:'GET',
?? ??? ??? ?url:'http://api.bing.com/qsonhs.aspx?type=cb&cb=callback&q='+$(this).val(),
?? ??? ??? ?dataType:'jsonp',
?? ??? ??? ?jsonp:'cb',
?? ??? ??? ?success:function(d){
?? ??? ??? ??? ?var one=d.AS.Results[0].Suggests;
?? ??? ??? ??? ?var html='';
?? ??? ??? ??? ?for(var i=0;i<one.length;i++){
?? ??? ??? ??? ??? ?html+='<li>'+one[i].Txt+'</li>';
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?$('#search-result').html(html);
?? ??? ??? ??? ?$('#search-suggest').show().css({
?? ??? ??? ??? ??? ?top:$('#search-form').offset().top+$('#search-form').height()+10,
?? ??? ??? ??? ??? ?left:$('#search-form').offset().left,
?? ??? ??? ??? ??? ?position:'absolute'
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ?},
?? ??? ??? ?error: function(jqXHR){
?? ??? ??? ??? ?alert('錯(cuò)誤:'+jqXHR.status)
?? ??? ??? ??? ?}
?? ??? ??? ?})
?? ?})

//添加事件，當(dāng)點(diǎn)擊頁(yè)面其他位置時(shí)隱藏'search-suggest'
$(document).bind('click',function(){
?? ?$('#search-suggest').hide();
?? ?})
?? ?
//事件代理，為每一個(gè)<li>添加事件，當(dāng)點(diǎn)擊<li>時(shí)進(jìn)行頁(yè)面跳轉(zhuǎn)，實(shí)現(xiàn)搜索
$(document).delegate('li','click',function(){//事件代理
?? ?var keyword=$(this).text();
?? ?location.+keyword;//bing提供的頁(yè)面搜索方式
?? ?})

使用jsonp跨域