Extjs to call a RESTful webservice - ajax

I am trying to make a RESTful webservice call using Extjs. Below is the code i am using:
Ext.Ajax.request({ url: incomingURL ,
method: 'POST',
params: {param1:p1, param2:p2},
success: function(responseObject){
var obj = Ext.decode(responseObject.responseText);
alert(obj);
},
failure: function(responseObject){
var obj = Ext.decode(responseObject.responseText);
alert(obj);
}
});
but it does not work, the request is sent using OPTIONS method instead of POST.
I also tried to do the same thing using below code but result is the same:
var conn = new Ext.data.Connection();
conn.request({
url: incomingURL,
method: 'POST',
params: {param1:p1, param2:p2},
success: function(responseObject)
{
Ext.Msg.alert('Status', 'success');
},
failure: function(responseObject)
{
Ext.Msg.alert('Status', 'Failure');
}
});
But when i tried to do the same thing using basic ajax call ( using the browser objects directly i.e. XMLHttpRequest() or ActiveXObject("Microsoft.XMLHTTP")) it works fine and i get the response as expected.
Can anyone please help me, as i am not able to understand what i am doing wrong with extjs ajax call?

You can't make a standard AJAX call between domains. The URL for Ext.Ajax.request should be a relative one (relative to the script's origin).
If you want to do cross-domain calls, use a ScriptTagProxy or such.

The problem is exactly because of the reason ob1 and Chuck Hinson described.
I have an RESTful service, wich is running on Tomcat.
And i made a static client(no deployed to Tomcat) using ExtJs with Json reader.
I just made an html page with ExtJs integrated consuming REST service like url: http://localhost:8080/service/invoices/
And all the time ExtJs was making OPTIONS request, not GET or POST even if i was setting them as being used methods. The problem is this security feature, because Client is not the part of same application and i am doing AJAX call between domains.
As soon as i put my client to my Web application and deployed to Tomcat and started using relative calls it started working.

if you don't want cross-domain request, please remove the website prefix 'http://website' from propery url of ajax proxy.

Related

Ajax not working in the portlet configuration jsp page (liferay 6.2)

Working on a MVCPortlet (Liferay 6.2).
Is there any reason why this ajax call works on a regular jsp of my portlet, but does not work on the config page of the portlet (the jsp that opens when you click top right corner and then configuration and option).
In this case, the portletURL is correctly displayed (alert), the JS returns success but the controller never received the client request.
Here's the ajax call:
$.ajax({
url: portletURL,
type: 'POST',
dataType: 'text',
cache: false,
data: {
test: test
},
success: function(data) {
alert('success ajax');
},
error: function(http, message, exc) {
alert('error ajax');
}
});
Again, this code works perfectly an another jsp.
Does this ring a bell to anybody?
Thanks in advance.
I had the very same problem. Tried both liferay-portlet:resourceURL portletConfiguration="true" and portlet:resourceURL, also with manual parsing and modifying the url before sending. The resource serving method (whether implementation of the serveResource, or completely new method using either Spring MVC or Liferay MVC (implementation class of MVCPortlet)), none worked in configuration mode.
The solution for me was to avoid resource serving at all and instead choose action phase (p_p_lifecycle=1). It is completely doable in AJAX, just had to override processAction method in my DefaultConfigurationAction implementation class.
Hope this saves someone the countless hours I spent with it.
I have the same problem in Liferay 7.0.x and I found a working solution which could be applied to 6.2 but I have not an instance for test.
You have to generate the resource url with java code. As an example:
LiferayPortletURL resourceURL = (LiferayPortletURL) renderResponse.createResourceURL();
resourceURL.setPortletId(ParamUtil.getString(request, "portletResource"));
resourceURL.setResourceID("yourId");
Then use the resourceURL.toString() to generate the URL. The serverResource has to be implemented in the portlet class.

Best practice making an AjaxRequest from domain A to domain B in ExtJs4

So I'm currently implementing a mobile app (Sencha Touch 2.3.1 + PhoneGap 3) that uses JSONP proxies to connect to a Java Jersey REST application so far so good (or kinda...) with that I can load my stores...
But what if let's say I don't want to load anything into a store I just want to call to myBusinessMethodFoo(param1, param2) what are my options in that case?
If it were a web application one option would be to make an Ajax request to my own back-end and then consume a service in another domain and then send data back to my front-end, but since I'm talking about a mobile app that's not an option ...
So, what is the best practice in this case?
JSONP technique http://es.wikipedia.org/wiki/JSONP
There is also a JSONP request in Ext (this worked)
Ext.data.JsonP.request({
url: "http://10.1.50.66:7001/Simulador/webresources/hello",
callbackKey: 'callback1',
params: {
},
success : function(response) {
console.log("Spiffing, everything worked");
// success property
console.log(response.success);
// result property
console.log(response.result);
console.log(response.msj);
},
failure: function(response) {
console.log(response);
Ext.Msg.alert('Error', 'Please try again.', Ext.emptyFn);
}
});
I'll have to compare thi approach to CORS.
best regards #code4jhon

Absolute/relative address in ajax call in jquerymobile

The following code works fine in iPads and iPhone (4,5) in Safari and Chrome. In contrast, the ajax call won't work (runs straight to the onError function) in Android devices and desktop browsers.
When I exchange the absolute URL for a relative one, the success/failure outcomes are reversed in these two groups.
How do I get around this problem (I'm running jquerymobile 1.3.0 beta)? Thanks/Bruce
$(document).ready(function() {
$("#submit").click(function(){
var formData = $("#loginf").serialize();
$.ajax({
type: "POST",
url: "http://mydomain.org/m2/scripts/site/bpg_process.asp?id=lg",
cache: false,
data: formData,
dataType: 'json',
success: onSuccess,
error: onError
});
return false;
});
});
Do you know that cross-domain Ajax calls are not allowed ?
Your problem may be linked to the URL from which you're making the request, and not to the browser you're testing in.
Read this for more details : http://en.wikipedia.org/wiki/Same_origin_policy
The important thing here for you is that the policy excludes different subdomains.
Ex. if you're sending a request from http://www.mydomain.org to http://mydomain.org it will fail, and vice versa.
What i do in your case usually is use the complete URL "/m2/scripts/site/bpg_process.asp?id=lg" without the protocol and host but with the starting "/" so it can be referenced from anywhere in the URL tree.
What is the "relative URL" that you're using and that "doesn't work"?
Like darma has mentioned. "cross-domain Ajax calls are not allowed".
Use absolute "local" pathing instead.
a slash '/' at the beginning of a link referees to the document root.
if you need to refer to an external domain, use ajax to call a local .asp document that calls the external page for you and returns the data you want in json.
Im not sure what this is in asp but in php, curl works.

Ajax requests ignore virtual application sub-folder name in URL for ASP.NET MVC application

My application is located on the server under a separate virtual directory. To access my ASP.NET MVC application users have to go to:
http://server-dev/superApp
I have a problem with Ajax/Json server requests ignoring the "superApp" directory part. Whenever an Ajax request is made Fiddler shows 404 because instead of http://server-dev/superApp/User/GetUsersJson for example, http://server-dev/User/GetUsersJson is called (note the missing superApp name).
Example of an Ajax request:
function GetUsers(id) {
$.ajax({
url: "/User/GetUsersJson/",
data:{ id: id},
datatype: 'json',
type:'post',
success: function (result) {
////Do stuff with returned result
}
});
}
Registered route:
r.Match("User/GetUsersJson", "User", "GetUsersJson");
Where should I look and what can I change to make sure that my application virtual folder is ALWAYS included in all URL requests ?
p.s. Please note that all Javascript/Ajax logic is kept in separate .js files so no RAZOR syntax is available.
Did you try using the HTML helper method ?
url: "#Url.ACtion("GetUsersJson","User)"
EDIT : As per the comment
You may get the Path name using the HTML Helper method and Keep that in a Global variable and access that in the external javascript file
In the view
<script type="text/javascript>
var globalGetJSONPath='#Url.ACtion("GetUsersJson","User)';
</script>
And now you can use it in the external file like this
$.ajax({
url: globalGetJSONPath,
data:{ id: id},
//remaining items....
});
I solved this stuff by passing variable to js that contains hostname+vdir. Because of heavy js url generation.
In other cases Shyju's answer is best way to solve this.
No way to do it without some server-side code generation. Easiest thing would be defining global variable (sorry) holding you application root and initializing it somewhere in master page.
Javascript generation of route urls always was one of the messiest parts of asp.net mvc.

GData API and cross-domain ajax calls

I want to get xml data from google server using it's API. so, i can't make any changes to response. So, How do I make this call that work for me:
$.ajax({
type: 'POST',
url: 'https://www.google.com/accounts/ClientLogin',
contentType: 'application/x-www-form-urlencoded',
data: { accountType : "HOSTED", Email : ""+Adminemail+"", Passwd : ""+adminpass+"", service : "cp"}, // cp for contact service..
success: function (response) {
alert(response); });
I want make some GET, PUT, DELETE call as well so, I don't want to use any function like $.getJSON();I want to make it possible through $.ajax() only.
I think only way to do this is use of server side scripting language.
Most browsers won't allow cross site scripting. (An ajax call that is not in your own domain).
So if you want to call such an url (https://www.google.com/accounts/ClientLogin), do it server side.
Cross domain posting is blocked by the browser. You could write your own browser. Since this is probably not an option, you could post to your own server and from there post to the other server. I think you can post data to another server using cUrl if you're using PHP.
There's a nice example here.
The third party must provide a jsonp api.

Resources