JQuery的阿賈克斯POST請求遠程Web服務

Question

我有點想不通出來，情況如下：

我打電話上的Web服務的方法是不一樣的機器上使用在我的腳本JS代碼片段後面：

$.ajax({ 
      type: "POST", 
      url: "http://" + gServer + "/xawebservice/xawebservice.asmx/" + webMethod, 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 
      cache: false, 
      async: false, 
      data: WSParameters, 
      success: function callFunction(result) { processResults(result, pType, pParam1); }, 
      error: function (xhr, status, error) { 
       alert(error.toString()); 
       //alert(xhr.toString());      
     } 
     }); 

參數是罰款和測試，網絡方法也是正確的。

爲錯誤消息我得到這個：

• 火狐：[異常... 「失敗」 nsresult： 「0x80004005的（NS_ERROR_FAILURE）」 的位置：「JS框架:: HTTP：// localhost：7515 /jquery-1.8.3.js :: ::行8434" 數據顯示：無]
• 鉻：錯誤：NETWORK_ERR：XMLHttpRequest的異常101
• IE8：沒有運輸

如果我使用的相同的片段上的Web服務是運行在同一臺機器上，沒有問題。如果我通過Web界面使用遠程Web服務，它也可以正常工作。

PS：我搜索了一下，有些頁面推薦了一些跨域參數，但這些參數都無效。不幸的是，使用相對路徑是行不通的。

感謝您的任何努力提前。

溴 vm370

UPDATE： 好吧，我更新了我的代碼得到執行，根據我現有一個CORS請求，但我得到一個錯誤500，在服務器上執行請求直接操作正常，CORS是在服務器上激活。

function xenappRequest(pType, pParam1) { 

// CORS request  
var url = "http://" + gServer + "/webservice/webservice.asmx/webMethod"; 
var params = { "appName": pParam1 }; 
var xhr = createCORSRequest("POST", url); 
if (!xhr) { 
    alert('CORS not supported'); 
} else { 
    // Do the request 
    // Response handlers. 
    xhr.onload = function() { 
     //var text = xhr.responseText; 
     alert('Response from CORS request to ' + url + ': ' + xhr.response); 
    }; 
    xhr.onerror = function() { 
     alert('Woops, there was an error making the request.'); 
    }; 
    xhr.send(JSON.stringify(params)); 
} 

}

function createCORSRequest(method, url) { 
var xhr = new XMLHttpRequest(); 
if ("withCredentials" in xhr) { 
    // Check if the XMLHttpRequest object has a "withCredentials" property. 
    // "withCredentials" only exists on XMLHTTPRequest2 objects. 
    xhr.open(method, url, true); 
} else if (typeof XDomainRequest != "undefined") { 
    // Otherwise, check if XDomainRequest. 
    // XDomainRequest only exists in IE, and is IE's way of making CORS requests. 
    xhr = new XDomainRequest(); 
    xhr.open(method, url); 
} else { 
    // Otherwise, CORS is not supported by the browser. 
    xhr = null; 
} 
return xhr; 

}

從FF我得到的500錯誤，在IE8請求土地的xhr.onerror子句中...... 任何想法？

Answer 1

Same Origin Policy在這裏玩。您無法與其他域進行通信。這是爲了保護您的隱私，使一些網頁無法與您的電子郵件，銀行賬戶等通信。

如果其他域支持CORS，只要瀏覽器支持，就可以進行此類請求。如果沒有CORS的支持，你將不得不使用本地代理或JSONP請求[服務器也必須支持JSONP。]

Answer 2

我做了一點點的頭髮拉過來，這裏是適合我的東西...

// js/jquery ///////// 

// post method call 
function myajaxcall_post(){  
    $.ajax({ 
      url: 'http://' + url_path_on_remote_server, 
      cache: false, 
      type : "POST",    
      data: {request_param1: 'something1', request_param2: 'something2' }, 
      dataType: 'json', 
      success: function(response) 
      { 
       console.log(response); 
      }    
     }); 
} 

// get method call 
function myajaxcall_get(){  
$.ajax({ 
     url: 'http://' + url_path_on_remote_server + '?callback=?', 
     cache: false,    
     type : "GET",    
     data: {request_param1: 'something1', request_param2: 'something2'}, 
     dataType: 'json', 
     success: function(response) 
     { 
      console.log(response);  
     } 
    }); 
} 

注意額外的'？callback =？' get方法調用的url中的查詢字符串參數。

現在在服務器端腳本中，有一些權限設置可用於遠程ajax調用。我不確定這些設置有多安全。

get方法調用的響應準備有點不同。它需要將你的json響應封裝在傳遞給服務器的回調函數名稱中。 Jquery會自動在查詢字符串'？callback = somethingfromjquery'中給出一個值。所以我們使用$ _GET ['callback']來獲取該回調函數的名稱。

<?php 
// server side php script //////////////// 

// Allow from any origin 
if (isset($_SERVER['HTTP_ORIGIN'])) { 
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}"); 
} 

// Access-Control headers are received during OPTIONS requests 
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { 

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])){ 
     header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); 
    }   

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])){ 
     header("Access-Control-Allow-Headers:  {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}"); 
    } 
} 

// Send some response ////////////// 
//print_r($_POST); 
//print_r($_GET); 

$response = array(); 
$response['message'] = 'Response from '.$_SERVER['HTTP_HOST']; 

if(isset($_POST)){ 
    echo json_encode($response); 
} 
elseif(isset($_GET)){ 
    echo $_GET['callback'].'('.json_encode($response).')'; 
}  

?> 

如果你需要上傳的文件形式，你不能用Ajax get方法做​​到這一點，因爲調用形式連載不包括文件。你可以使用FormData（）提供的ajax post方法調用。

// js/jquery - for forms with file uploading 

function myajaxcall_submitform(){ 

    // put your form id 
    fdata = new FormData(document.getElementById('form1')); 

    // add additional fields to form if any to post with 
    fdata.append('upload_file_flag', 1);  

    $.ajax({ 
     url: 'http://' + url_path_on_remote_server, 
     cache: false, 
     type: "POST",    
     data: fdata, 
     processData: false, // need this for FormData 
     contentType: false, // need this for FormData 
     dataType: 'json', 
     success: function(response) 
     { 
       console.log(response); 
     }    
    });  
    }