Question

我很想成为JavaScript专家，我必须维护一个调用SOAP服务的JS代码。调用是通过cxf-utils.js脚本执行的。它在Safari中运行良好，但在Firefox或Chrome中却没有。接下来，我给出了应用程序的直觉，涉及的脚本和代码细节的草图。

应用直觉

该应用程序允许通过URL访问肥皂服务检索合成朋友位置，从而连续跟踪地图中“朋友”的位置：

http://127.0.0.1:9884/hqoutput?

此类服务以JSON格式提供朋友位置的集合。

实施草图

该应用程序由三个JS组成：

map.js ：处理地图视图，在地图中绘制朋友的标记，并控制对模型的请求（即 HQOutputImplService.js）。
HQOutputImplService.js ：准备服务调用并处理来自服务的响应（即（de）序列化，onsuccess和onerror函数）。
cxf-utils.js ：提供一些浏览器兼容性和XML管理（ cf。 http://cxf.apache.org/docs/javascript-client-code.html）

代码详情

的index.html

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>My first map</title>
    <link type="text/css" href="css/style.css" rel="stylesheet" media="all" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">    </script>
    <script type="text/javascript" src="js/map.js"></script> 
    <script type="text/javascript" src="js/cxf-utils.js"></script>
    <script type="text/javascript" src="js/HQOutputImplService.js"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

map.js

(function() {
    window.onload = function() {

            var outputServ = new hybridqp_hadas_lig_org__HQOutput();
            outputServ.url = "http://127.0.0.1:9884/hqoutput?";

            // Creating a reference to the mapDiv
            var mapDiv = document.getElementById('map');

            var myPosLat = 48.85889;
            var myPosLon = 2.29583;

        // Creating a latLng for the center of the map
            var latlng = new google.maps.LatLng(myPosLat, myPosLon);

        // Creating an object literal containing the properties 
            // we want to pass to the map  
        var options = {
              center: latlng,
          zoom: 15,
              mapTypeId: google.maps.MapTypeId.ROADMAP
        };

            // Creating the map
        var map = new google.maps.Map(mapDiv, options);

        // Adding a marker to the map
            var marker = new google.maps.Marker({
            position: new google.maps.LatLng(myPosLat, myPosLon),
                    map: map,
                    title: 'My Position',
                    icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png'
            });

            var circleOptions = {
                    center: latlng,
                radius: 2000,
                map: map
            };
            // Creating the map
            var circle = new google.maps.Circle(circleOptions);
            // Colors used to display friends' markers
            var colors = new Array('green', 'orange', 'pink', 'red');
            // Color to assign to the next friend, rotates modulo the length of the array
            var icolor = 0;
            // Associates a tuple_id with its marker, used to remove them when negative tuples arrive: tuple_id -> marker
            var markers = new Array();
            // Counts the number of markers on screen for a particular user: nickname -> n_markers
            var markerCounter = new Array();
            // Color assigned to a friend currently on screen: nickname -> color
            var friendColor = new Array();

            //This is the function called upon success.
            function processResponse(response) {
                    var jsonStr = response.getReturn();
                    var jsonArray = eval('(' + jsonStr + ')');
                    if( jsonArray != null ) {
                            for(var i = 0; i < jsonArray.length; i++) {
                                    addOrRemoveFriendMarker(jsonArray[i]);
                            }
                    }
            }

            //This is the function called for an error. -->
            function reportError(error) {
                    alert('error ' + error);
            }

            function invokeHQOutput() {
                    outputServ.data(processResponse, reportError);
            }

            // Adds a marker to the screen and has side effects on additional variables
            function addOrRemoveFriendMarker(friend) {
                    // Check whether the tuple is positive or negative
                    if( friend.tuple_sign == 1 ) {
                            //Determine the color to use, depends whether the user has currently an assigned color
                            if( friendColor[friend.nickname] == undefined ) {
                                    friendColor[friend.nickname] = colors[icolor];
                                    icolor = (icolor + 1) % colors.length;
                            }
                            var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(friend.lat, friend.lon),
                            map: map,
                            title: friend.nickname,
                            icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/' + friendColor[friend.nickname] + '/blank.png'});
                            // Add the marker to the array using the tuple_id
                            markers[friend.tuple_id] = marker;
                            // Increment the marker count for the user, check if the value is undefined first
                            if( markerCounter[friend.nickname] == undefined )
                                    markerCounter[friend.nickname] = 1;
                            else
                                    markerCounter[friend.nickname]++;
                    }
                    else if( friend.tuple_sign == -1 ){
                            // Remove the marker from the screen and from the markers array
                            //map.removeOverlay(markers[friend.tuple_id]);
                            markers[friend.tuple_id].setMap(null);
                            delete markers[friend.tuple_id];
                            // Decrement the counter for this friend's markers, if it has reached 0, delte the friend from the corresponding arrays
                            markerCounter[friend.nickname]--;
                            if( markerCounter[friend.nickname] == 0 ) {
                                    delete markerCounter[friend.nickname];
                                    delete friendColor[friend.nickname];
                            }
                    }

            }

            window.setInterval(invokeHQOutput, 5000);

    }

})();

HQOutputImplService.js

// Definitions for schema: http://hybridqp.hadas.lig.org/
//  http://127.0.0.1:9884/hqoutput?xsd=1
//
//
// Constructor for XML Schema item {http://hybridqp.hadas.lig.org/}data
//
function hybridqp_hadas_lig_org__data () {
    this.typeMarker = 'hybridqp_hadas_lig_org__data';
}

//
// Serialize {http://hybridqp.hadas.lig.org/}data
//
function hybridqp_hadas_lig_org__data_serialize(cxfjsutils, elementName, extraNamespaces) {
    var xml = '';
    if (elementName != null) {
     xml = xml + '<';
     xml = xml + elementName;
     if (extraNamespaces) {
      xml = xml + ' ' + extraNamespaces;
     }
     xml = xml + '>';
    }
    if (elementName != null) {
     xml = xml + '</';
     xml = xml + elementName;
     xml = xml + '>';
    }
    return xml;
}

hybridqp_hadas_lig_org__data.prototype.serialize = hybridqp_hadas_lig_org__data_serialize;

function hybridqp_hadas_lig_org__data_deserialize (cxfjsutils, element) {
    var newobject = new hybridqp_hadas_lig_org__data();
    cxfjsutils.trace('element: ' + cxfjsutils.traceElementName(element));
    var curElement = cxfjsutils.getFirstElementChild(element);
    var item;
    return newobject;
}

//
// Constructor for XML Schema item {http://hybridqp.hadas.lig.org/}dataResponse
//
function hybridqp_hadas_lig_org__dataResponse () {
    this.typeMarker = 'hybridqp_hadas_lig_org__dataResponse';
    this._return = null;
}

//
// accessor is hybridqp_hadas_lig_org__dataResponse.prototype.getReturn
// element get for return
// - element type is {http://www.w3.org/2001/XMLSchema}string
// - optional element
//
// element set for return
// setter function is is hybridqp_hadas_lig_org__dataResponse.prototype.setReturn
//
function hybridqp_hadas_lig_org__dataResponse_getReturn() { return this._return;}

hybridqp_hadas_lig_org__dataResponse.prototype.getReturn = hybridqp_hadas_lig_org__dataResponse_getReturn;

function hybridqp_hadas_lig_org__dataResponse_setReturn(value) { this._return = value;}

hybridqp_hadas_lig_org__dataResponse.prototype.setReturn = hybridqp_hadas_lig_org__dataResponse_setReturn;
//
// Serialize {http://hybridqp.hadas.lig.org/}dataResponse
//
function hybridqp_hadas_lig_org__dataResponse_serialize(cxfjsutils, elementName, extraNamespaces) {
    var xml = '';
    if (elementName != null) {
     xml = xml + '<';
     xml = xml + elementName;
     if (extraNamespaces) {
      xml = xml + ' ' + extraNamespaces;
     }
     xml = xml + '>';
    }
    // block for local variables
    {
     if (this._return != null) {
      xml = xml + '<return>';
      xml = xml + cxfjsutils.escapeXmlEntities(this._return);
      xml = xml + '</return>';
     }
    }
    if (elementName != null) {
     xml = xml + '</';
     xml = xml + elementName;
     xml = xml + '>';
    }
    return xml;
}

hybridqp_hadas_lig_org__dataResponse.prototype.serialize = hybridqp_hadas_lig_org__dataResponse_serialize;

function hybridqp_hadas_lig_org__dataResponse_deserialize (cxfjsutils, element) {
    var newobject = new hybridqp_hadas_lig_org__dataResponse();
    cxfjsutils.trace('element: ' + cxfjsutils.traceElementName(element));
    var curElement = cxfjsutils.getFirstElementChild(element);
    var item;
    cxfjsutils.trace('curElement: ' + cxfjsutils.traceElementName(curElement));
    cxfjsutils.trace('processing return');
    if (curElement != null && cxfjsutils.isNodeNamedNS(curElement, '', 'return')) {
     var value = null;
     if (!cxfjsutils.isElementNil(curElement)) {
      value = cxfjsutils.getNodeText(curElement);
      item = value;
     }
     newobject.setReturn(item);
     var item = null;
     if (curElement != null) {
      curElement = cxfjsutils.getNextElementSibling(curElement);
     }
    }
    return newobject;
}

//
// Definitions for service: {http://hybridqp.hadas.lig.org/}HQOutputImplService
//

// Javascript for {http://hybridqp.hadas.lig.org/}HQOutput

function hybridqp_hadas_lig_org__HQOutput () {
    this.jsutils = new CxfApacheOrgUtil();
    this.jsutils.interfaceObject = this;
    this.synchronous = true;
    this.url = null;
    this.client = null;
    this.response = null;
    this.globalElementSerializers = [];
    this.globalElementDeserializers = [];
    this.globalElementSerializers['{http://hybridqp.hadas.lig.org/}data'] = hybridqp_hadas_lig_org__data_serialize;
    this.globalElementDeserializers['{http://hybridqp.hadas.lig.org/}data'] = hybridqp_hadas_lig_org__data_deserialize;
    this.globalElementSerializers['{http://hybridqp.hadas.lig.org/}dataResponse'] = hybridqp_hadas_lig_org__dataResponse_serialize;
    this.globalElementDeserializers['{http://hybridqp.hadas.lig.org/}dataResponse'] = hybridqp_hadas_lig_org__dataResponse_deserialize;
    this.globalElementSerializers['{http://hybridqp.hadas.lig.org/}data'] = hybridqp_hadas_lig_org__data_serialize;
    this.globalElementDeserializers['{http://hybridqp.hadas.lig.org/}data'] = hybridqp_hadas_lig_org__data_deserialize;
    this.globalElementSerializers['{http://hybridqp.hadas.lig.org/}dataResponse'] = hybridqp_hadas_lig_org__dataResponse_serialize;
    this.globalElementDeserializers['{http://hybridqp.hadas.lig.org/}dataResponse'] = hybridqp_hadas_lig_org__dataResponse_deserialize;
}

function hybridqp_hadas_lig_org__data_op_onsuccess(client, responseXml) {
    console.log('(hybridqp_hadas_lig_org__data_op_onsuccess)');
    if (client.user_onsuccess) {
     var responseObject = null;
     var element = responseXml.documentElement;
     this.jsutils.trace('responseXml: ' + this.jsutils.traceElementName(element));
     element = this.jsutils.getFirstElementChild(element);
     this.jsutils.trace('first element child: ' + this.jsutils.traceElementName(element));
     while (!this.jsutils.isNodeNamedNS(element, 'http://schemas.xmlsoap.org/soap/envelope/', 'Body')) {
      element = this.jsutils.getNextElementSibling(element);
      if (element == null) {
       throw 'No env:Body in message.'
      }
     }
     element = this.jsutils.getFirstElementChild(element);
     this.jsutils.trace('part element: ' + this.jsutils.traceElementName(element));
     this.jsutils.trace('calling hybridqp_hadas_lig_org__dataResponse_deserializeResponse');
     responseObject = hybridqp_hadas_lig_org__dataResponse_deserializeResponse(this.jsutils, element);
     client.user_onsuccess(responseObject);
    }
}

hybridqp_hadas_lig_org__HQOutput.prototype.data_onsuccess = hybridqp_hadas_lig_org__data_op_onsuccess;

function hybridqp_hadas_lig_org__data_op_onerror(client) {
    console.log('(hybridqp_hadas_lig_org__data_op_onerror)');
    if (client.user_onerror) {
     var httpStatus;
     var httpStatusText;
     try {
      httpStatus = client.req.status;
      httpStatusText = client.req.statusText;
     } catch(e) {
      httpStatus = -1;
      httpStatusText = 'Error opening connection to server';
     }
     client.user_onerror(httpStatus, httpStatusText);
    }
}

hybridqp_hadas_lig_org__HQOutput.prototype.data_onerror = hybridqp_hadas_lig_org__data_op_onerror;

//
// Operation {http://hybridqp.hadas.lig.org/}data
// Wrapped operation.
//
function hybridqp_hadas_lig_org__data_op(successCallback, errorCallback) {
    this.client = new CxfApacheOrgClient(this.jsutils);
    var xml = null;
    var args = new Array(0);
    xml = this.data_serializeInput(this.jsutils, args);
    this.client.user_onsuccess = successCallback;
    this.client.user_onerror = errorCallback;
    var closureThis = this;
    this.client.onsuccess = function(client, responseXml) {  closureThis.data_onsuccess(client, responseXml); };
    this.client.onerror = function(client) { closureThis.data_onerror(client); };
    var requestHeaders = [];
    requestHeaders['SOAPAction'] = '';
    this.jsutils.trace('synchronous = ' + this.synchronous);
    this.client.request(this.url, xml, null, this.synchronous, requestHeaders);
}

hybridqp_hadas_lig_org__HQOutput.prototype.data = hybridqp_hadas_lig_org__data_op;

function hybridqp_hadas_lig_org__data_serializeInput(cxfjsutils, args) {
    var wrapperObj = new hybridqp_hadas_lig_org__data();
    var xml;
    xml = cxfjsutils.beginSoap11Message("xmlns:jns0='http://hybridqp.hadas.lig.org/' ");
    // block for local variables
    {
     xml = xml + wrapperObj.serialize(cxfjsutils, 'jns0:data', null);
    }
    xml = xml + cxfjsutils.endSoap11Message();
    return xml;
}

hybridqp_hadas_lig_org__HQOutput.prototype.data_serializeInput = hybridqp_hadas_lig_org__data_serializeInput;

function hybridqp_hadas_lig_org__dataResponse_deserializeResponse(cxfjsutils, partElement) {
    var returnObject = hybridqp_hadas_lig_org__dataResponse_deserialize (cxfjsutils, partElement);

    return returnObject;
}
function hybridqp_hadas_lig_org__HQOutput_hybridqp_hadas_lig_org__HQOutputImplPort () {
  this.url = 'http://127.0.0.1:9884/hqoutput';
}
hybridqp_hadas_lig_org__HQOutput_hybridqp_hadas_lig_org__HQOutputImplPort.prototype = new hybridqp_hadas_lig_org__HQOutput;

CXF-utils.js

Here the code

问题

如上面HQOutputImplService.js所示，有一个onsuccess和一个onerror代码。当脚本在Safari中运行时，它总是到达onsuccess代码（即 hybridqp_hadas_lig_org__data_op_onsuccess），而在Firefox和Chrome中，它们总是会出现错误代码（ ie hybridqp_hadas_lig_org__data_op_onerror）。

这是每个浏览器的屏幕截图。

Safari浏览器 Safari

火狐 Firefox

铬 Chrome

问题

实际上，我不知道如何制定好的问题。所以......

请你提一些线索？

- 我应该检查什么？

- 我应该在这里提供哪些进一步的信息？

更新1

通过跟踪JS的执行情况，Chrome和Firefox都会获得http响应代码“0”。另外，Firefox的开发人员控制台报告NS_ERROR_FAILURE错误，其中一个可能的原因是尝试接收来自不同来源的数据，因此违反了Same-origine policy。显然，这是由于SOAP请求是对localhost（端口9884）完成的，而envelop，serializers，namespace是请求http://hybridqp.hadas.lig.org/。新问题可能是：

有没有办法启用多源响应？
我应该在我的etc / hosts文件中将http://hybridqp.hadas.lig.org/定义为localhost别名吗？

Answer 1

这个故事的答案是它违反了“单一来源政策”。因此，需要启用跨源资源共享（CORS）。

JavaScript上的SOAP服务调用适用于Safari，但不适用于Chrome或Firefox

1 个答案: