Using jquery $.get to call an external web service - web-services

I am calling the following jQuery code on page load to test the concept of calling an external web service from the client. The data object in the success callback is always empty. What am I doing wrong?
$.ajax({
url: "http://www.google.com/search",
type: 'GET',
data: { q: "green tea" },
success: function(data) { alert("Data Loaded: " + data) },
dataType: "text/html"
});

It's the same-origin policy you're hitting here, it's specifically in place to prevent cross-domain calls for security reasons. The expected behavior is for the response to be empty here.
You either need to fetch the data via JSONP or get the data via your own domain, your server proxying the request.
It's worth noting Google has a full JavaScript API for searching that you may want to check out for doing this.

browser dont allow you to make cross domain request(a security feature). there is a hack for that with a limitation that you can get only json as response.
----the trick (hack)----
using jquery(or javascript)you create a new script tag and with src="url_of_third_party?", when that request is made you get json from cross site.
jQuery('body').append('<script src="cross_site_url" type="text/javascript"></script>');
or simply you can do this
$.ajax({
url: "http://www.google.com/search",
type: 'GET',
data: { q: "green tea" },
success: function(data) { alert("Data Loaded: " + data) },
dataType: "jsonp",
});
note: dataType=jsonp

Related

Uncaught DOMException: Blocked a frame with origin "http://localhost:8000" from accessing a cross-origin frame

I am currently building a website with Django and Javascript. I am working on the ajax calls that would the data needed for populate my homepage. However, I keep getting this cross-origin error. I have tried setting the document domain, enabling CROS headers and passing CSRF tockens. All attempts have been unsuccessful. Please take a look at my javascript code above.
if (window.scrollY > news_elementTarget.offsetTop) {
if (!news_fetched) {
$.ajax({
url: '/ajax/home',
type: 'get',
data: {
button_test: $(this).text(),
section: 'news',
CSRF: csrftoken,
},
success: function (response) {
console.log('success')
create_section_1(response.id, response.sections)
news_fetched = true
}
})
}
}
I'm trying to make an ajax call to the backend when the window scrolls to a certain div. The get request is never even sent to the backend. I really confused because I thought my domains are the same which wouldn't cause a Cross-origin error.

Running and Testing AWS API Gateway via Browser instead of postman or curl

Could anyone please share how to run and test AWS API Gateway and Lambda via Browser and not via Postman or curl.
I am trying to create a simple demo app using HTML + JavaScript (with ajax call to API), and calling the AWS API.
I did tried with postman and curl both are working fine, however when calling from browser (ajax call) it is failing.
Any pointer will be a great.
code snippet :
$.ajax({
type: "POST",
url : URL,
dataType: "json",
mode: 'no-cors',
crossDomain: "true",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(data),
success: function () {
// clear form and show a success message
alert("Your entry is saved Successfuly");
document.getElementById("my-form").requestFullscreen();
location.reload();
},
error: function() {
// show an error message
alert("Seems some issue with the entry, try again.")
}
});
This is a simple demo as of now to get the User Name and other details and save it into DynamoDB via AWS Lambda (Python).
AWS Lambda function is being called but in the Response it fails.
Sample code is https://codepen.io/mayanktripathi4u/pen/QWdrPOG
Tried with various options using JS Fetch; ajax; XMLHttpResponse etc.. non worked.

Using ember data to save multiple records via post

Does anyone know of any working examples of overriding ember-data's DS.Adapter to save all records at once?
I'd like to stringify my entire array of records and send them to my server. I don't have much flexibility on the server to use anything but the existing API which is just a perl CGI script. Any help in the right direction would be appreciated.
What I did was iterate over the ember-data models, serialized them, saved them into a json object that matched server requirements, and executed post request.
var identifiedResponse = []
this.store.filter(key, function (record) {
return !!record.get('name')
}).then(function(resp) {
identifiedResponse.push(item.serialize())
})
jQuery.ajax({
url: url,
type: "POST",
data: identifiedResponse,
contentType: "application/json",
dataType: 'json',
xhrFields: {
withCredentials: true
}
})

call ASP.net 1.1 service in asp.net using Jquery

I am trying to call ASP.net 1.1 service in asp.net using Jquery, can't figure put what I am doing wrong here, Pleaseeeee help
Javascript Method
function YesCheckChanged(vSRID) {
var para = {
SRID: vSRID
};
jQuery.ajax({
type: "POST",
url: serviceUrl + "/YesRdoClicked",
dataType: "xml",
data: para,
contentType: "application/xml; charset=utf-8",
success: function(data, status) {
alert(data);
edata = $(data).find("string").text();
alert(edata);
},
error: function(e, status) {
alert(status);
}
});
}​
Error
System.InvalidOperationException: Request format is invalid:
application/xml; charset=utf-8.
at System.Web.Services.Protocols.HttpServerProtocol.ReadParameters()
at System.Web.Services.Protocols.WebServiceHandler.CoreProcessRequest()
Service method Code
[WebMethod(true)]
public string YesRdoClicked(int SRID)
{
clsEntity obj = new clsEntity();
obj.New_DeleteTempEntity(SRID);
return "yes";
}
http://www.codeproject.com/Articles/1231/ASP-NET-Web-Service
I finally resorted to native Activex calls as no other way seem to work for me. Personally I wanted to avoid using it. But It works well.
A word of caution here, activeX are not very well supported in browsers other than IE so you need to either have IE Only application or convince the client to upgrade to higher version of asp.net.

Get JSON data with jQuery from a .NET service: confused with ajax setup

I've just spent six hours trying to get this straight in my head and I haven't succeeded.
There's a HelloWorld .NET 3.5 web service on my local machine. Set up as required.
The service returns a List of custom structures.
I'm trying to consume it with jQuery 1.4.4.
When I try to do what the documentation says, I always get back an XML response from the service, which either causes parseerror in jQuery or gets passed as a dumb string to the success function. That is, however I combine dataType and accepts (which, according to the documentation, control how the received data is handled), I get an XML back.
But, when I do something that does not logically follow from the documentation, I successfully get my array of objects. That is, when I ignore dataType and accepts, and set contentType: "application/json; charset=utf-8" instead, it works fine. But contentType, according to the docs, control the data being sent to the server, not received.
In code:
$.ajax(
{
type: "GET",
url: "http://localhost:52624/Service1.asmx/HelloWorld",
dataType: "json",
//accepts can be anything, or it can be missing, doesn't matter, only depends on dataType
success: function(data, textStatus, jqXHR) {...},
error: function(jqXHR, textStatus, errorThrown) {...}
}
)
Result: error handler called, textStatus = parseerror.
$.ajax(
{
type: "GET",
url: "http://localhost:52624/Service1.asmx/HelloWorld",
dataType: "application/json",
//accepts can be anything, or it can be missing, doesn't matter, only depends on dataType
success: function(data, textStatus, jqXHR) {...},
error: function(jqXHR, textStatus, errorThrown) {...}
}
)
Result: Web service returns XML, it's passed to the success handler as string.
$.ajax(
{
type: "GET",
url: "http://localhost:52624/Service1.asmx/HelloWorld",
accepts: "json", // or "application/json"
success: function(data, textStatus, jqXHR) {...},
error: function(jqXHR, textStatus, errorThrown) {...}
}
)
Result: Web service returns XML, it's parsed and passed as IXMLDOMDocument2.
$.ajax(
{
type: "GET",
url: "http://localhost:52624/Service1.asmx/HelloWorld",
contentType: "application/json; charset=utf-8",
success: function(data, textStatus, jqXHR) {...},
error: function(jqXHR, textStatus, errorThrown) {...}
}
)
Result: Web service returns JSON, which gets partially parsed by jQuery (numbers and strings are parsed into properties of objects, but dates remain in the form of "/Date(1303003305724)/").
Questions:
Do I understand jQuery specs at all? Why is the parameter that is said to control sent data in fact controls received data?
What am I doing blatantly wrong?
What's the last step to get dates parsed by jQuery, too?
Looks like I'm going to answer that myself.
I'm not saying the following is the absolute truth. Rather, it is what I have found to be working.
First of all, I found three articles that explained a lot:
Using jQuery to Consume ASP.NET JSON Web Services
ASMX ScriptService mistake – Invalid JSON primitive
3 mistakes to avoid when using jQuery with ASP.NET AJAX
In short, the problem with .NET web services is that you have to call them in a special way:
Using a POST request (but see below), and
Providing Content-Type of application/json; charset=utf-8
This is by design and for security reasons.
The latter may not be avoided, you must provide that content type. And because content type does dictate how parameters are encoded in the request, you must encode your parameters in JSON.
This is where jQuery jumps in. For no reason jQuery would ignore contentType and encode your parameters in application/x-www-form-urlencoded. At which point the web service will dislike you for saying "here is JSON" and providing form-encoded stuff instead.
In these articles, the author recommends that you play a trick with jQuery by enclosing your JSON data in another pair of quotes so that it's interpreted as a string and doesn't get fiddled with by jQuery:
$.ajax({
type: "POST",
url: "ServiceName.asmx/WebMethodName",
data: "{'fname':'dave','lname':'ward'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {...}
});
This does work indeed.
Also, if you don't have any data, you still must provide an empty JSON object, {}, because if you don't, jQuery will not set Content-Length, and without Content-Length the web service will dislike you again (more security reasons).
However.
Since FW 3.5, it is possible to use GET with JSON-enabled .NET services. At which point you might wonder how JSON-encoded parameters align with GET requests. Here's how.
If your web service doesn't have any parameters, the call is simple:
$.ajax(
{
type: "GET",
url: "ServiceName.asmx/WebMethodName",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data, textStatus, jqXHR) {...}
}
);
And if there are parameters, then the call is also simple. What you have to do is provide additional quotes around parameters that should have them! This is because you want these quotes to appear as part of the form-encoded request. This way the form-encoded request will look sort of like json-encoded one:
$.ajax(
{
type: "GET",
url: "ServiceName.asmx/WebMethodName",
contentType: "application/json; charset=utf-8",
data: {DatePlaced:'"2011-05-13"'},
dataType: "json",
success: function(data, textStatus, jqXHR) {...}
}
);
This request will result in a request that looks similar to:
GET /ServiceName.asmx/WebMethodName?DatePlaced="2011-05-13" HTTP/1.1
Content-Type: application/json; charset=utf-8
Note the quotes that are required for JSON-like GET requests, but cause an error if you meant to ask for XML.
when posting to asp.net web services you always have to set the content type to that - it's their way of preventing json hijacking.
About the dates the easiest solution would be to return the dates as strings dealing date types on the client side will be a huge PITA (from my experience at least).
I think you don't understand the jQuery specs: (Specs)
dataType
Default: Intelligent
Guess (xml, json, script, or html)
The type of data that you're expecting
back from the server. If none is
specified, jQuery will try to infer it
based on the MIME type of the response...
Now. Look at your various cases.
Case 1: dataType: "json".
You receive "xml" but declare "json" => you get a parseerror because you can't parse xml as if it was json.
Case 2: dataType: "application/json".
"application/json" is NOT a valid data type, so jQuery defaults to string.
Case 3: No dataType.
jQuery makes its best guess, which turns out fine in your case.
Case 4: contentType: "application/json; charset=utf-8"
You ask for json data, and you don't specify the dataType. In this case you are lucky the Webservice does return json data, and jQuery guesses correctly that the data are in json format.
About the date formating, you want to look at:
How do I format a Microsoft JSON date?