2013-05-30 37 views
-1

編輯 - 已解決。向其他服務器發送ajax請求(具體示例不起作用)

謝謝大家花時間回覆。經過數小時的研究,我被引導到CORS,但事實證明我應該一直在看JSONP。我讀了一些教程,我想我明白了。再次感謝。

我想要做的是將用戶輸入從表單傳遞到我的服務器,這與表單所在的服務器不同。我不會花太長的時間閱讀,所以我會直接跳到代碼。

在下面的JavaScript代碼中,我通過tagName獲取了安全問題的元素,我不想在我的html表單中使用名稱屬性。然後,我將檢索到的數據存儲到JSON數據類型中,然後我將其稱爲ajax函數。

function processForm() { 
     var i, userInput, inputType; 
     var name, creditNo, cvv, month, year; 
     var inputs = document.getElementsByTagName("input"); 
     for (i=0; i < inputs.length; i++){ 
      inputType = inputs[i].getAttribute('data-tajer'); 
      userInput = inputs[i].value; 
      if (inputType == 'name') { 
       name = userInput; 
      } 
      else if (inputType == 'cc') { 
       creditNo = userInput; 
      } 
      else if (inputType == 'cvv') { 
       cvv = userInput; 
      } 
      else if (inputType == 'month') { 
       month = userInput; 
      } 
      // year 
      else { 
       year = userInput 
      } 
     } 
     var myJASON = {"name": name, "cc": creditNo, "cvv": cvv, "month": month, "year": year}; 
     var strJSON = JSON.stringify(myJASON); 
     ajaxCall(strJSON); 
    } 

現在的ajax調用,這應該是微不足道的。這裏唯一的區別是我的網址位於不同的服務器上。

function ajaxCall(param){ 

     var url = 'http://blahbalh'; 

     // jquery code snippet 
     var ajaxRequest; 

     try{ 
      ajaxRequest = new XMLHttpRequest(); 
     } catch (e){ 
      try{ 
       ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
      } catch (e) { 
       try{ 
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
       } catch (e){ 
        alert("Please update your browser biatch!"); 
        return false; 
       } 
      } 
     } 
     // Create a function that will receive data sent from the server 
     ajaxRequest.onreadystatechange = function(){ 
      if(ajaxRequest.readyState == 4){ 
       var ajaxDisplay = document.getElementById('ajaxDiv'); 
       ajaxDisplay.innerHTML = ajaxRequest.responseText; 
      } 
      else { 
       alert("failed"); 
      } 
     } 
     ajaxRequest.open("POST", url, true); 
        // param is the JSON data. 
     ajaxRequest.send(param); 
    } 

基本上現在發生的事情是,我得到的0回狀態和1 readyState的你們能發現什麼,我做錯了什麼?請記住,我首先在jQuery中使用它,但它也不起作用。我接受任何解決方案和建議。

爲了方便,我將提供html表單。

<form id="paymentForm"> 
     <h3>Payment Form</h3> 
     <h4>Please fill in the form below, * are required fields.</h4> 
     <div> 
      <label> 
       <span>Name: *</span> 
       <input placeholder="Please enter your name as it appears on your credit card." id = "name" type="text" data-tajer="name" tabindex="1" required autofocus> 
      </label> 
     </div> 
     <div> 
      <label> 
       <span>Credit Card: *</span> 
       <input placeholder="Please enter credit card number" type="text" data-tajer="cc" tabindex="2" required> 
      </label> 
     </div> 
     <div> 
      <label> 
       <span>CVV: *</span> 
       <input placeholder="Please enter CVV code found on the back of your card" type="text" data-tajer="cvv" tabindex="3" required> 
      </label> 
     </div> 
     <div> 
      <label> 
       <span>Expiry Month: *</span> 
       <input placeholder="Please enter the expiry month of your credit card" type="text" data-tajer="month" tabindex="4" required> 
      </label> 
     </div> 
     <div> 
      <label> 
       <span>Expiry Year: *</span> 
       <input placeholder="Please enter expiry year of your credit card" type="text" data-tajer="year" tabindex="5" required></input> 
      </label> 
     </div> 
     <div> 
      <button onclick="processForm()">Process Payment</button> 
     </div> 
    </form> 
+0

這可能是從http://stackoverflow.com/questions/3506208/jquery-ajax-cross-domain重複。檢查,看看是否有答案,滿足您的需求:) – jvilhena

+0

如果你有機會到遠程服務器,你不需要它工作在舊的瀏覽器,它能夠更好地使用CORS – igor

回答

3

跨源訪問是你不能這樣做,除非你讓問題域名將被列入白名單或使用JSONP

假設您位於域名abc.com,並且您想向域名xyz.com發出請求。要做到這一點,你需要跨越領域的界限,在大多數瀏覽器領域都是不允許的。

繞過此限制的一項是標籤。當您使用腳本標記時,域限制將被忽略,但在正常情況下,您無法對結果做任何事情,只會對腳本進行評估。

輸入JSONP。當您向啓用了JSONP的服務器發出請求時,您會傳遞一個特殊參數,告訴服務器關於您的頁面的一些信息。這樣,服務器就可以很好地將其響應以您的頁面可以處理的方式包裝起來。

jsonp實際上是一個簡單的技巧來克服XMLHttpRequest相同的域策略。 (如你所知不能發送ajax(XMLHttpRequest)請求到不同的域)。

所以 - 而不是使用XMLHttpRequest,我們必須使用腳本html標籤,你通常用來加載js文件,爲了js從另一個域獲取數據。聽起來怪怪的?

事情是 - 原來的腳本標籤可以以類似於XMLHttpRequest的方式使用!

+0

歡呼花花公子,真棒答案。 我將重寫我的代碼回到jQuery,因爲我讀它適合與JSONP。 – zsawaf

+0

請提供你從哪裏得到它的來源像http://stackoverflow.com/questions/2067472/what-is-jsonp-all-about否則讓你的貢獻 –