Question

I have created a web service which takes a username and password as parameters and returns a list of children in JSON (the user is a Social Worker). The web service is hosted locally with IIS7. I am attempting to access the web service using javascript/jquery because it will eventually need to run as a mobile app.

I’m not really experienced with web services, or javascript for that matter, but the following two links seemed to point me in the right direction:

http://williamsportwebdeveloper.com/cgi/wp/?p=494

http://encosia.com/using-jquery-to-consume-aspnet-json-web-services/

This is my html page:

   <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="TestWebService.aspx.cs" Inherits="Sponsor_A_Child.TestWebService" %>
<asp:Content ID="Content1" ContentPlaceHolderID="stylesPlaceHolder" runat="server">

<script type="text/javascript" src="Scripts/jquery-1.7.1.js">
$(document).ready(function () { });

function LoginClientClick() {
    $("#query_results").empty();
    $("#query_results").append('<table id="ResultsTable" class="ChildrenTable"><tr><th>Child_ID</th><th>Child_Name</th><th>Child_Surname</th></tr>');
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "http://localhost/PhoneWebServices/GetChildren.asmx?op=GetMyChildren",
        data: '{ "email" : "' + $("#EmailBox").val() + '", "password": "' + $("#PasswordBox").val() + '" }',
        dataType: "json",
        success: function (msg) {
            var c = eval(msg.d);
            alert("" + c);
            for (var i in c) {
                $("#ResultsTable tr:last").after("<tr><td>" + c[i][0] + "</td><td>" + c[i][1] + "</td><td>" + c[i][2] + "</td></tr>");
            }
        }
    });
}

</script>

</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="contentPlaceHolder" runat="server">

    <div id="LoginDiv">
        Email: <input id="EmailBox" type="text" /><br />
        Password: <input id="PasswordBox" type="password" /><br />

        <input id="LoginButton" type="button" value="Submit" onclick="LoginClientClick()" />
    </div>

    <div id="query_results">
    </div>

</asp:Content>

And this is my web service code:

[WebMethod (Description="Returns the list of children for whom the social worker is responsible.")]
        public String GetMyChildren(String email,String password)
        {
            DataSet MyChildren=new DataSet();

            int ID=SocialWorkerLogin(email, password);
            if (ID > 0)
            {
                MyChildren = FillChildrenTable(ID);
            }
            MyChildren.DataSetName = "My Children"; //To prevent 'DataTable name not set' error

            string[][] JaggedArray = new string[MyChildren.Tables[0].Rows.Count][];
           int i = 0;
           foreach (DataRow rs in MyChildren.Tables[0].Rows)
           {
               JaggedArray[i] = new string[] { rs["Child_ID"].ToString(), rs["Child_Name"].ToString(), rs["Child_Surname"].ToString() };
               i = i + 1;
           }

           // Return JSON data
           JavaScriptSerializer js = new JavaScriptSerializer();
           string strJSON = js.Serialize(JaggedArray);
           return strJSON;
        }

I followed the examples in the provided links, but when I press submit, only the table headers appear but not the list of children. When I test the web service on it’s own though, it does return a JSON string so that part seems to be working. Any help is greatly appreciated 🙂

EDIT: Thanks to slash197 I discovered the problem. I get the error:

"XMLHttpRequest cannot load http://localhost/PhoneWebServices/GetChildren.asmx?op=GetMyChildren. Origin http://localhost:56018 is not allowed by Access-Control-Allow-Origin."

In Chrome’s console. I’m guessing this has something to do with the URL, but when I try that URL in my browser it works fine.

Answer 1

the problem with

"XMLHttpRequest cannot load http://localhost/PhoneWebServices/GetChildren.asmx?op=GetMyChildren. Origin http://localhost:56018 is not allowed by Access-Control-Allow-Origin."

is, localhost and localhost:56018 are per definition two different domains, and Ajax Requests are per default only possible through the same domain.

A best approach for that would be, to run both services on the same port or by using a proxy, which delivers the content from port 56018 to the default localhost port 80. Could be realized through a Rewrite Rule or via an own service which is running, besides your webservice “client”.