AngularJS XMLHttpRequest

gaura...@infinxinc.com

unread,

Mar 20, 2015, 5:03:08 AM3/20/15

to ang...@googlegroups.com

Hello,

I am a big fan of angular js and i studying this technology from www.w3school.com.

In my practice application i am calling a [webmethod] created in .net technology and i want to display the data which is return by webmethod through [AngularJS XMLHttpRequest ] action.

when i given url "http://www.w3schools.com/website/Customers_JSON.php" then it work fine but it gives error when getting a data from my webmethod.

http://www.w3schools.com/website/Customers_JSON.php page contain data in following format data

[{ "Name" : "Alfreds Futterkiste", "City" : "Berlin", "Country" : "Germany" },

{ "Name" : "Berglunds snabbköp", "City" : "Luleå", "Country" : "Sweden" }]

and my webmethod return data in following format

[{"name":"Cipla Ltd."},

{"name":"Aurobindo Pharma Ltd"}]

I tried lot of time to resolve this issue but I can not solve this issue.

Please give me a proper solution regarding to this issue

Thanks.

Sander Elias

unread,

Mar 20, 2015, 10:27:22 AM3/20/15

to ang...@googlegroups.com

Hi,

Well, probably there is some coding error somewhere. $http is one of the most used services in Angular, and bugs like those would probably be detected by now ;)

Regards

Sander

PS, if you want a more helpful answer, it helps if you post a plunk, or at least the code that is giving you the problem!

Gaurav Raut

unread,

Mar 23, 2015, 6:56:48 AM3/23/15

to ang...@googlegroups.com

Hi sander,

First I want to say thanks for given me your valuable time and suggestion.

I send you a my webservice code and Angularjs code. Please find it .

My webservice gives me output as i expect. I test it in other .Net project it work fine .

webservice code --

[WebMethod]

public string Employees()

{

SqlDataReader ds = dl.getemployees();

List<Company> l1 = new List<Company>();

while(ds.Read())

{

Company c1 = new Company();

c1.cardname = ds["cardname"].ToString();

l1.Add(c1);

}

string json = new System.Web.Script.Serialization.JavaScriptSerializer().Serialize(l1);

return json;

}

public SqlDataReader getemployees()

{

SqlConnection conn = new SqlConnection("Data Source=INFXIT-02124;Initial Catalog=AcupackAug;User ID=sa;Password=tispl");

conn.Open();

SqlCommand cmd = new SqlCommand("TISEMP", conn);

cmd.CommandType = CommandType.StoredProcedure;

SqlDataReader ds1;

ds1 =cmd.ExecuteReader();

return ds1;

}

Web service Output is like

[{"name":"Cipla Ltd."},

{"name":"Aurobindo Pharma Ltd"}]

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------

Angular js code

<table>

<td>{{x.cardname}}</td>

</tr>

</table>

</div>

var app = angular.module('myApp', []);

app.controller('ctrl1', function ($scope, $http) {

$http.get("http://localhost:2383/WebService1.asmx")

.success(function (response) { $scope.names = response; });

});

</script>

</html>

Regards,

Gaurav

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/AFuudQjvji4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Regards,

Gaurav Raut

Sander Elias

unread,

Mar 23, 2015, 9:34:52 AM3/23/15

to ang...@googlegroups.com

Hi Gaurav,

Are you serving up your html from the same server as the web-service is housed? If not, you probably have an CORS issue (seek in this group for solutions about that)
If it is not CORS, you have ate least give us the error you are experiencing. have a look at the developers console.

Regards

Sander

Gaurav Raut

unread,

Mar 24, 2015, 6:40:48 AM3/24/15

to ang...@googlegroups.com

Hi Sander,

As per your suggestion i track my application and get the error regarding to CORS and

error is .

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:2383/WebService1.asmx. This can be fixed by moving the resource to the same domain or enabling CORS.

To solve this i insert a following code in my application.

var app = angular.module('myApp', [])

app.config(function ($httpProvider) {

$httpProvider.defaults.withCredentials = true;

$httpProvider.defaults.useXDomain = true;

delete $httpProvider.defaults.headers.common['X-Requested-With'];

});

app.controller('ctrl1', ['$scope', '$http', 'dataService', function ($scope, $http, dataService) {

$scope.testVar = "hello";

dataService.dataSearch().then(function (dataResponse) {

$scope.data = dataResponse;

console.log('hello');

});

}]);

app.service('dataService', function ($http) {

delete $http.defaults.headers.common['X-Requested-With'];

this.dataSearch = function () {

return $http({

method: 'GET',

url: 'http://localhost:2383/WebService1.asmx',

headers: {

'Authorization': '31BF3856AD364E35'

}

});

}

});

still i get following message as warning and do not get a output as i expect

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:2383/WebService1.asmx. This can be fixed by moving the resource to the same domain or enabling CORS.

Regards,

Gaurav

--

You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/AFuudQjvji4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Regards,

Gaurav Raut

Sander Elias

unread,

Mar 24, 2015, 6:59:30 AM3/24/15

to ang...@googlegroups.com

Hi Gaurav,

You need to adapt the server side too, the angular parts looks ok to me now, but this is mostly an server-side issue.

I can't help you with that part. You might need to google your server software with ad added keyword CORS, you probably get everything you need.