JQuery Ajax对远程Web服务的POST请求

Question

I somehow can't figure it out, the situation is as follows:

I'm calling a method on a web service that is not on the same machine and use the following JS snippet in my script:

$.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());                    
        }
        });

Parameters are fine and tested, the web method is also correct.

As an error message I get this:

• Firefox: [Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http:// localhost :7515/jquery-1.8.3.js :: :: line 8434" data: no]
• Chrome: Error: NETWORK_ERR: XMLHttpRequest Exception 101
• IE8: No Transport

If I'm using the same snippet on a web service that is running on the same machine, there is no problem. And if I use the remote web service over the web interface, it's also working fine.

PS: I googled around a bit and some pages were recommending some cross domain parameters, which didn't work either. Unfortunately using a relative path will not work I guess.

Thanks for any efforts in advance.

Br vm370

UPDATE: Alright I updated my code to execute a CORS request based on my existing one, but I get an error 500, executing the request on the server directly is working fine and CORS is activated on the server.

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;

}

From FF i get the error 500, in IE8 the request lands in the xhr.onerror clause... Any ideas?

Answer 1

Same Origin Policy is in play here. You can not communicate with another domain. It is to protect your privacy so some web page can not communicate with your email, bank accounts, etc.

If the other domain supports CORS , you can make that type of request as long as the browser supports it. If there is no support for CORS, you would have to use a local proxy or a JSONP request [server has to support JSONP also.]

Answer 2

I did my bit of hair pulling over this and here is something that works for me..

// 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);    
        }
  });
}

Note the additional '?callback=?' query string argument in the url for the get method call.

Now on the server side script there are some permission settings to do for remote ajax calls. I am not sure how secure these settings are.

The response for get method calls are prepared a little differently. It needs your json response wrapped in the callback function name that is passed to the server. Jquery automatically puts a value there in the query string '?callback=somethingfromjquery' . So we use $_GET['callback'] to get the name of that callback function.

<?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).')';
}    

?>

If you need to upload files from forms you cannot do it with ajax get method calls because form serialize doesn't include files. You could use a ajax post method call with what the FormData() provides.

// 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);  
        }             
     });    
  }