I have a button in my webpage which calls an ajax method a s below
$.ajax({
cache: false,
type:'POST',
data: 'type='+userType +'&user='+user ,
url:' ".\yii\helpers\Url::to([$program.'/'.$url.'/setcustomer/'])." ',
success: function(data) {
console.log('Hii');
$('#phoneErr').html(data);
}
});
This works in all browsers except IE11
I get the following error when i click on the button:
SCRIPT7002: XMLHttpRequest: Network Error 0x800c0008, The download of the specified resource has failed.
Has anyone faced this issue and what is the solution to this?
There is a redirection in my PHP code in the setcustomer action. Can this issue be related to it?
My ajax response body says Key Value
Response HTTP/1.1 302 Found
and not actually redirecting to the required page
is the problem related to IE ajax cannot handle 302 redirect within an ajax response as success.
I make the next solution:
in js:
$(document).ajaxComplete(function (event, xhr, settings) {
var url = xhr && xhr.getResponseHeader('X-Redirect');
if (url) {
window.location = url;
}
});
in php (yii2) (ie not understand 302 via ajax, we send 200) :
$this->redirect(['index', 'id' => $model->id], 200);
Related
This question is based on an issue I had before but never managed to resolve.
I'm running an userscript via FireMonkey which regulary sends requests to my backend server, those using CORS since they are cross-domain. For testing purposes my response headers are currently set very loosely backend-side:
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Method: POST");
header("Access-Control-Allow-Headers: *");
Frontend-side my requests are sent via jQuery AJAX, looking roughly like this:
$.ajax({
method: "POST",
url: this.queryURL,
timeout: this.timeout,
data: this.formData,
processData: false,
contentType: false,
success: onSuccess,
error: onError
});
Nothing special here, requests have been working fine ever since.
I want to get rid of jQuery now and use native XmlHttpRequest instead. The implementation looks like this:
const xhr = new XMLHttpRequest();
xhr.open("POST", this.queryURL);
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.timeout = this.timeout;
xhr.ontimeout = onTimeout;
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4 || xhr.status === 0)
return;
if (xhr.status !== 200)
onError(xhr);
else
onSuccess(xhr.responseText);
};
xhr.send(this.formData);
For some reason the requests seem not to be sent anymore on Firefox, at least the network tab doesn't show any. Testing it on Chrome it still works, but I figured that the issue might have something to do with preflight requests, since I noticed something strange:
With jQuery AJAX:
With native XHR:
Using native XHR, Chrome seems to always have a first preflight request failing, with a second one being successful. This doesn't happen with AJAX. Not sure if this is helpful in any way, but could this explain why requests keep failing at all in Firefox, and how to resolve it?
After some more research I finally found out that this is actually a firefox-related issue with userscripts: https://bugzilla.mozilla.org/show_bug.cgi?id=1715249
I'm trying to make a simple Ajax call in my app on Openshift. This is my ajax call which is triggered by pressing a button:
$.ajax({
url: 'http://my-site-name.rhcloud.com/asciimo',
method: 'POST',
data: {attr:"value"}
});
And this is node in my server.js file:
self.createRoutes = function() {
self.routes['/asciimo'] = function(req, res) {
res.send('done');
};
};
Everything works when I go to my-site-name.rhcloud.com/asciimo, but if I click a button (to get there) I get:
POST http://my-site-name.rhcloud.com/asciimo 404 (Not Found)
even though the link clearly works on it's own.
Change your method to GET
method: 'GET',
When you go to the URL directly in your browser, you are issuing a GET request, not a POST.
I know what the problem was now. In ajax there is a POST request and self.routes['/asciimo'] (given as a template by Openshift) deals with GET requests only. What solved the problem was simply rewriting my function as a separate POST function:
self.addpost = function() {
self.app.post('/asciimo', function(req, res){
res.send('done');
});
};
I'v been struggling with POST on the Picasa API.
Here's code:
$.ajax({
type: "POST",
url: 'https://picasaweb.google.com/data/feed/api/user/' + uid + '/albumid/' + album_id + '/photoid/' + photo_id,
crossDomain: true,
data: { content: content },
success: function() { alert("Success"); },
error: function() { alert('Failed!'); }
});
I've already retrieved some information via GET without problems.
Now comes the fun part, when I try to test the service with Google this error occurs:
XMLHttpRequest cannot load
https://picasaweb.google.com/data/feed/api/user/userid/albumid/albumid/photoid/photoid?content=foo%bar.
Origin http://localhost:3000 is not allowed by
Access-Control-Allow-Origin
.
And when I try in Firefox the request header method is changed to OPTIONS and status is 204: no content.
Also, I've tried to change datatype to jsonp but then HTTP method changes to GET and it retrieves information about the picture.
Access-Control-Allow-Origin is coming because your are making a ajax call to a server which is not same as your current domain.
Read more here
jsonp will not help for POST request because you can only make GET request with jsonp.
IMHO you should try to make the POST request from server side instead of client side script.
I'm trying to do a simple ajax GET that returns the html from google.com but with the following I keep hitting my onFailure. And when I hit status i get a 0, yet when I attempt to output the responseText I get nothing.
Anyone done a simple request like this in mootools 1.2.1?
function addSomeAction() {
el.onclick = function() {
var uri = "http://www.google.com";
var myRequest = new Request({
url: uri,
method: 'get',
onRequest: function(){
alert("loading...");
},
onSuccess: function(responseText){
alert("hi");
},
onFailure: function(responseFail){
alert("fail: " + responseFail.responseText);
}
});
myRequest.send();
}
}
Regardless of the framework used, you cannot do cross-domain AJAX requests. This is to prevent Cross-Site Request Forgery (CSRF) attacks and is a limitation imposed by the web browser.
Therefore, you can only fetch the HTML source of a page which on the same domain as the originating request.
There are specifications allowing for the asynchronous transfer of JSON data residing on another domain (JSONP), but they will not help you in this case.
I'm using jQuery 1.4.2 and am trying to perform a simple AJAX request. The target URL returns a JSON string (I validated it with jslint). The request works in Firefox and Chrome, but doesn't want to work in IE8, and I can't determine why. Here is the call:
jQuery.ajax({
url: 'http://' + domain + '/' + 'helper/echo/',
dataType: 'json',
success: function(data) {
alert(data);
},
beforeSend: function(request, settings) {
alert('Beginning ' + settings.dataType + ' request: ' + settings.url);
},
complete: function(request, status) {
alert('Request complete: ' + status);
},
error: function(request, status, error) {
alert(error);
}
});
IE will execute the beforeSend callback and the error callback. The error callback alerts with the message:
Error: This method cannot be called until the open method has been called.
My response header returns with Content-Type: text/javascript; charset=UTF-8.
What is going on with IE? I'm running the server on localhost, making a request from http://localhost:8080/psx to http://localhost:8080/helper. Maybe IE is blocking this request? I have tried installing Fiddler to analyze request traffic but it won't run on my machine because it's rather locked down. Firebug lets me, but everything seems good there.
Thanks for the help!!!
Alright, here's the fix! The request was using window.XMLHttpRequest(), which isn't working properly in IE8 for some reason. jQuery is not failing back to window.ActiveXObject("Microsoft.XMLHTTP") as it should.
Add this to your script somewhere before your AJAX call (only verified in IE8, not other IE's):
jQuery.ajaxSetup({
xhr: function() {
//return new window.XMLHttpRequest();
try{
if(window.ActiveXObject)
return new window.ActiveXObject("Microsoft.XMLHTTP");
} catch(e) { }
return new window.XMLHttpRequest();
}
});
Here's how I came to the solution:
Updated to jQuery 1.4.4 in case the issue was a bug that had been fixed.
Stepped through Firebug debugger and DevTools debugger until the results seemed to be drastically different.
On line 5899, the ajax() function creates the XmlHttpRequest object with the xhr() function. In Firefox, it was returning good data. In IE, this was returning with all fields being Error: This method cannot be called until the open method has been called.
I analyzed this function on line 5749, return new window.XMLHttpRequest();
I googled and came across this page that has the same problem and suggested the solution that works for me.
Official jQuery ticket: