How to Call a Web Service in a Cross-Browser way

Question

I want to call a Web Service from Mozilla, Internet Explorer and Chrome.

Bellow is my LaboratoryService.js file which calls the Web Service:

function StringBuffer() {
    this.__strings__ = new Array;
}

StringBuffer.prototype.append = function (str) {
    this.__strings__.push(str);
};

StringBuffer.prototype.toString = function () {
    return this.__strings__.join("");
};

function LaboratoryService() {
    this.url = "http://25.48.190.93:8082/labratory?wsdl";
}

LaboratoryService.prototype.buildRequest = function () {
    var oBuffer = new StringBuffer();

    oBuffer.append("<soap:Envelope xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\" ");
    oBuffer.append("xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" ");
    oBuffer.append("xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\">");
    oBuffer.append("<soap:Body>");
    oBuffer.append("<getLabratory xmlns=\"http://nano.ito.ir/\" />");
    oBuffer.append("</soap:Body>");
    oBuffer.append("</soap:Envelope>");

    return oBuffer.toString();
};

LaboratoryService.prototype.send = function () {
    var oRequest = new XMLHttpRequest;
    oRequest.open("post", this.url, false);
    oRequest.setRequestHeader("Content-Type", "text/xml");
    oRequest.setRequestHeader("SOAPAction", this.action);
    oRequest.send(this.buildRequest());
    if (oRequest.status == 200) {
        return this.handleResponse(oRequest.responseText);
    } else {
        throw new Error("Request did not complete, code " + oRequest.status);
    }
};

LaboratoryService.prototype.handleResponse = function (sResponse) {
    var start = sResponse.indexOf('div') - 4;
    var end = sResponse.lastIndexOf('div') + 7;

    return sResponse.substring(start, end);
};

Bellow is my HTML code which uses LaboratoryService.js to show data:

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Get Labratories</title>
    <script language="JavaScript" src="LaboratoryService.js"></script>
    <script language="JavaScript" src="jquery-1.8.0.min.js"></script>

    <script language="JavaScript" type="text/javascript">
        $(document).ready(function () {
            $("#btnGetLaboratories").click(function () {
                var oService = new LaboratoryService();
                var fResult = oService.send();
                var newData = $('<div/>').html(fResult).text();

                $("#divResult").html(newData);
            });
        });
    </script>
</head>

<body>
    <input id="btnGetLaboratories" type="button" value="Get Laboratories" />
    <div id="divResult">

    </div>
</body>

</html>

This approach works fine in Internet Explorer.
The problem is that this approach does not work in FireFox and Chrome.
I think that the oRequest.send(this.buildRequest()); does not work in FireFox and Chrome.

Edited Web Service Call Using JQuery

I changed LaboratoryService.prototype.send to use JQuery to call Web Service as bellow:

LaboratoryService.prototype.send = function () {
    $.ajax({
        type: "POST",
        url: this.URL,
        contentType: "text/xml",
        headers: { "SOAPAction": this.action },
        success: function (msg) {
            return this.handleResponse(msg);
        },
        error: function (e) {
            alert('error');
        }
    });
};

But it alerts error. How do I call Web Service using JQuery?

Again Edited Code

I changed my JQuery AJAX call as bellow. It works fine in Internet Explorer but returns error in Chrome and Firefox.

LaboratoryService.prototype.send = function () {
    $.ajax({
        type: "POST",
        url: this.URL,
        contentType: "text/xml; charset=\"utf-8\"",
        dataType: "xml",
        data: this.buildRequest(),
        processData: false,
        success: function processSuccess(data, status, req) {
            if (status == "success") {
                var sResponse = req.responseText;
                var start = sResponse.indexOf('div') - 4;
                var end = sResponse.lastIndexOf('div') + 7;

                var newData = $('<div/>').html(sResponse.substring(start, end)).text();

                $("#divResult").html(newData);
            }
        },
        error: function () {
            alert('error');
        }
    });
};

If you're using jQuery anyway, why would you write your own ajax code? — Pointy, Jun 21 '14 at 12:32
@Pointy, could you explain more that how to solve the problem? Thanks. — Mohsen, Jun 21 '14 at 12:55
It's just a question about your code: jQuery has complete cross-browser ajax facilities built in. If you're using jQuery anyway, it's a really good idea to use the jQuery ajax code. — Pointy, Jun 21 '14 at 13:03
@Pointy, I changed my question (code) to use JQuery to call Web Service, but my problem is not solved yet. Please check my question edited section again. Thank you. — Mohsen, Jun 21 '14 at 13:40
Well, returning a value from an asynchronous operation isn't going to work, and in your "success" handler the value of `this` won't be correct unless you set the "context" property in the ajax options. — Pointy, Jun 21 '14 at 14:23
@Pointy, I changed my ajax call. It works in IE, but returns error in FF and Chrome. Please check my question again. Thanks. — Mohsen, Jun 21 '14 at 14:35

score 0 · Answer 1 · edited May 23 '17 at 11:45

0

Just change :

LaboratoryService.prototype.send = function () {
    var oRequest = new XMLHttpRequest;
    oRequest.open("post", this.url, true);  
    oRequest.setRequestHeader('User-Agent','XMLHTTP/1.0');

    oRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    oRequest.setRequestHeader("SOAPAction", this.action);
    oRequest.send(this.buildRequest());
    if (oRequest.status == 200) {
        return this.handleResponse(oRequest.responseText);
    } else {
        throw new Error("Request did not complete, code " + oRequest.status);
    }
};

Please, refer this link.

edited May 23 '17 at 11:45

Community

1
1

answered Jun 21 '14 at 12:37

Vikram Jain

5,498
1
19
31

I did what you said, but when I click the `Get Laboratories` button nothing happens anymore. – Mohsen Jun 21 '14 at 12:54
How will making it asynchronous help, especially given that the code as written has no provisions for dealing with an asynchronous call? – Pointy Jun 21 '14 at 13:02

How to Call a Web Service in a Cross-Browser way

1 Answers1