如何在Google Chrome擴展中使用jQuery ajax？

Question

我已經寫了代碼從通過JSONP調用（基於jQuery）請看看下面的代碼的另一臺服務器獲取數據....

$("#submit").click(function() { 
var state=$("#state").val(); 
var city=$("#city").val(); 
     $.ajax({ 
      type: "GET", 
      url: "http://www.dizainstore.com/chrome/info.php", 
      async: true, 
      data: "state="+ state+ "&city="+ city, 
      dataType: 'jsonp', 
       success: function(response) { 
        var centres=response.centres_info.centre; 
        var address=response.centres_info.address; 
        var val ; 
        var val1 ; 
        var und 
        $.each(centres, function(i,cent){ 
      val += "<div class='box2-l'>" + cent + "</div><div class='box2-r'>" + address[i] + "</div>" ; 
       }); 
       var new_val = "<div class='box1'><div class='box1-l'>Center List</div><div class='box1-r'>Address List</div>"+val+"</div>" 
        $(".result1").html(new_val); 
           } 

     }); 
     return false; 
    }); 

它的工作對我罰款。但是當我在Google Chrome擴展中使用它時，它不起作用，發生錯誤： - 我們無法使用jQuery Ajax調用，他們建議使用xmlhttprequest。但我不知道如何將此代碼轉換爲XMLhttpRequest。所以請建議我。

感謝

Answer 1

因爲回報是JSONP，看來dizainstore使用一個RESTful API和希望你使用JSONP與腳本注入：

http://en.wikipedia.org/wiki/JSONP#Script_element_injection

您的代碼反而會是這個樣子：

function handleDizain(response) 
{ 
    var centres=response.centres_info.centre; 
    var address=response.centres_info.address; 
    var val ; 
    var val1 ; 
    var und 
    $.each(centres, function(i,cent){ 
      val += "<div class='box2-l'>" + cent + "</div><div class='box2-r'>" + address[i] + "</div>" ; 
    }); 
    var new_val = "<div class='box1'><div class='box1-l'>Center List</div><div class='box1-r'>Address List</div>"+val+"</div>" 
    $(".result1").html(new_val); 
} 

$("#submit").click(function() { 
     var state=$("#state").val(); 
     var city=$("#city").val(); 

     //Create a new script tag 
     var loader = document.createElement("script"); 
     loader.setAttribute("type", "text/javascript"); 

     //Set the source 
     loader.src = "http://www.dizainstore.com/chrome/info.php?state=" + state + "&city=" + city + "&callback=handleDizain"; 

     //Add it to the body 
     document.body.appendChild(loader); 

    }); 

Answer 2

如果您希望在Chrome擴展程序中進行跨源來電，則不必使用JSON P.你可以簡單地使用Chrome擴展跨域權限：http://developer.chrome.com/extensions/xhr.html

問候， 烏迪