I'm currently trying to make a cross-browser AJAX request to return a stream from a networked video camera, however it always asks for a username and password even when they have been supplied. I have also tried applying network credentials to a Uri in the backend code and sending the resulting Uri back to the page however that again asks for login. The javascript is as follows:
$.ajax({
type: "GET",
crossDomain: true,
//dataType: 'JSONP',
url: "#Url.Content("~/GetImage")",
data: {username: 'xxx', password: 'xxx' },
//username: 'xxx',
//password: 'xxx',
beforeSend: function (xhr) {
xhr.setRequestHeader ("Authorization", "Basic");
},
success: function(data){
alert(data);
$('#CameraImage').attr('src', data);
},
error: function(error, status, thrownerror) {
alert(thrownerror);
}
});
I have tried various combinations of the above but to no avail (commented code). I need to point the URL to the source of an image to display the stream. Has anyone tried this sort of thing, and if so could point me in the right direction?
Many thanks for looking!!
The below link will help you for sure if you use Java,
http://mytechbites.blogspot.in/2009/07/cross-domain-xmlhttprequest-calls.html
Related
I am sending username and password as request parameter to the server in AJAX and trying to show the response message. But not able to showing the response message.In fiddler it is showing the response message. But while on the browser screen it is not showing.PLEASE somebody help me out where i am wrong or need to change anything..
I have written like this-
$(document).ready(function () {
$("#btnCity").click(function () {
$.ajax({
type: "POST",
url: "http://test.xyz.com/login",
crossDomain: true,
contentType: "application/json; charset=utf-8",
data: { username: "abc", password: "1234" },
dataType: "JSONP",
jsonpCallback: 'jsonCallback',
async: false,
success: function (resdata) {
alert(resdata);
},
error: function (result, status, err) {
alert(result.responseText);
alert(status.responseText);
alert(err.Message);
}
});
});
});
TL;DR: I guess the problem is on the server side of your code (that we don't know yet).
At first: I don't know why it fails for you. I've taken your code and ran it against a public available JSONP API, that returns the current IP of your system and it worked.
Please try yourself using the URL: http://ip.jsontest.com/.
So most probably, the server doesn't return the right response to the JSONP request. Have a look at the network tab in developer tools. With your current code, the answer of the server should be something like:
jsonCallback({'someResponseKeys': 'someResponseValue'});
Note: The header should contain Content-Type:application/javascript!
BTW, even if this doesn't for now solve your problem - here are some tweaks, I'd like to advice to you:
Don't set async to false, at the documentation of jQuery.ajax() says:
Cross-domain requests and dataType: "jsonp" requests do not support synchronous
operation.
You don't need to set a jsonpCallback, because jQuery will generate and handle (using the success function a random one for you. Quote from the docs:
This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling.
So here comes my code:
$(document).ready(function () {
$("#btnCity").click(function () {
$.ajax({
type: "POST",
url: "http://ip.jsontest.com/",
crossDomain: true,
data: { username: "abc", password: "1234" },
dataType: "JSONP",
success: function (resdata) {
console.log("success", resdata);
},
error: function (result, status, err) {
console.log("error", result.responseText);
console.log("error", status.responseText);
console.log("error", err.Message);
}
});
});
});
A working example can be found here.
Another solution, like Yonatan Ayalon suggested, can be done with a predefined function and then setting the jsonpCallback explicitly to the function that should be called.
if you see the response in Fiddler, it seems that the issue is in the callback function.
you are doing a jsonP call - which means that you need a callback function to "read" the response data.
Do you have a local function that calls "jsonCallback"?
this is a simple jsonP request, which initiates the function "gotBack()" with the response data:
function gotBack(data) {
console.log(data);
}
$.ajax({
url: 'http://test.xyz.com/login' + '?callback=?',
type: "POST",
data: formData,
dataType: "jsonp",
jsonpCallback: "gotBack"
});
You can try with the following methods and close every instance of chrome browser in task manager, then open browser in web security disable mode by the command "chrome.exe --disable-web-security"
success: function (resdata) {
alert(resdata);
alert(JSON.stringify(resdata));
},
And the better option to debug the code using "debugger;"
success: function (resdata) {
debugger;
alert(resdata);
alert(JSON.stringify(resdata));
},
I wanted to retrieve data using ajax, when open the url in browser it showing data but when i execute this url in ajax code error msg function is running however data is showing in browser.
url: "http://live.nayatel.com/?json=1"
$(document).ready(function() {
$.ajax({
type: "GET",
url: "http://live.nayatel.com/?json=1",
cache: false,
success: onSuccess,
error: onError
});
});
its a wordpress site and i used a plugin to retrive its data working in browser but not giving response text.
I have two suggestions, since I am not that sure about your problem.
a) Try changing
success: onSuccess,
to
success: function(data, status) {
onSuccess(data, status);
},
b) If that fails, try adding
crossDomain: true,
cross domain request issue
my ajax call code actually when i am running given url directly in browser it shows me json data but using ajax call it always shows me ajax error believe me i tried n follow many things no fruitful result from 18 days.
$.ajax({
crossDomain:true,
type: "GET",
url: 'http://taxihub.azurewebsites.net/Mobile/api/json.php?method=getCompanyList',
contentType: "application/json; charset=utf-8",
dataType: "json",
processData: false,
success: function (data) {
console.log(data);
return;
},
error: function (err) {
console.log("AJAX ERROR");
console.log(err.responseText);
}
});
you can also check this link directly u will see json data coming but i found error i dont know why
"http://taxihub.azurewebsites.net/Mobile/api/json.php?method=getCompanyList"
error: OPTIONS http://taxihub.azurewebsites.net/Mobile/api/json.php?method=getCompanyList Origin lhost:809 is not allowed by Access-Control-Allow-Origin.
please help me i am stuck here from 18 days on this issue
Remove the cross-domain and content-type part and it'll work but you'll have to do a little extra string manipulation work to put it in JSON object:
$.ajax({
type: "GET",
url: 'http://taxihub.azurewebsites.net/Mobile/api/json.php?method=getCompanyList',
dataType: "json",
success: function (data) {
console.log(data.result.getCompanyList[0].CompanyID);
return;
},
error: function (err) {
console.log("AJAX ERROR");
console.log(err);
}
});
}
Actually it seems cross-domain doesn't have any effect with or without it. I guess the server you're targeting doesn't have strict cross-domain prevention but doesn't like the JSON content-type. I'd be glad to get a more specific explanation.
EDIT I used JQuery 1.10.2 if it matters
Ι need to use a combination of the following 2 scripts but despite all the combinations I've done so far, I fail to get it to work 100%.
I use a colorbox to display products detail pages in which there is a form with various fields for adding the items to the cart. Upon submitting the form, I want to show an alert and then close the colorbox so that the underlying page (that opened the colorbox in the forst place) stays as is.
With this script
$("#productadd").submit(function(){ // WORKS FINE EXCEPT THE ENCODING
$.post(
$(this).attr('action'),
$(this).serialize(),
function(data){
alert('Product was added to your order');
$().colorbox.close();
});
everything works fine except for the encoding which in my case is iso-8859-7 (greek).
If I use this script then encoding is ok but the post is being made with the default behaviour, redirection to the url defined in the form's action.
$("#productadd").submit(function(){ //ENCODING OK, COLORBOX.CLOSE() AND ALERT FAIL
$.ajax({
data: data,
type: "POST",
url: $(this).attr('action'),
dataType: 'json',
beforeSend : function(xhr) {
xhr.setRequestHeader('Accept', "text/html; charset=iso-8859-7");
},
success: function(json) {
alert('Product added to cart!'),
$().colorbox.close(),
itemAddCallback(json);
},
error: function (xhr, textStatus, errorThrown) {
$("#error").html(xhr.responseText);
}
});
If there's a jQuery equivalent for xhr.setRequestHeader('Accept', "text/html; charset=iso-8859-7") I'd be more than happy to use it. Also, what do I declare as data: so I dont get a 'data is not defined' error? (despite the error, date submits fine).
UPDATE: After various suggestions from those who answered so far, this is what my code looks like:
$("#productadd").submit(function(){
$.ajax({
data: $(this).serialize(),
type: "POST",
url: $(this).attr('action'),
dataType: 'text',
mimeType: "text/html; iso-8859-7",
success: function() {
alert('Item added to your order'),
$().colorbox.close();
},
error: function (xhr, textStatus, errorThrown) {
$("#error").html(xhr.responseText);
}
});
My only problem is that although it submits and displays the alert etc, the submitted data is encoded in utf-8 instead of iso-8859-7, any ideas?
Please check the documentation:
http://api.jquery.com/jQuery.ajax/
Find mimeType property.
mimeType(added 1.5.1)String
A mime type to override the XHR mime type.
Therefore you need to add following:
$.ajax({
data: data,
type: "POST",
mimeType: "text/html; charset=iso-8859-7"...
In the shorthand POST request you send $(this).serialize() as data, so I suppose you want to send the same form data in the other request.
To debug the requests, use your browsers net panel and find out if the requests actually fire and what the responses are (F12 then Net > XHR).
Hope this helps!
I am trying to perform an AJAX request from a Chrome Extension to Basecamp to authenticate in so I can pull tasks. I have added https://site.basecamphq.com to the permissions in manifest.json. However, when this function is executed, I get this in my console:
XMLHttpRequest cannot load https://site.basecamphq.com. Origin chrome-extension://0123456789 is not allowed by Access-Control-Allow-Origin
$("#login").click(function()
{
$.ajax({
type: "GET",
dataType: 'html',
url: "https://site.basecamphq.com",
username: "username",
password: "X",
success: function(data){
$("#example").append(data);
}
});
});
I have added https://*/ to my manifest.json permissions as well, but no luck.
You need to use background page for doing AJAX requests from a content script.
Background page code:
chrome.extension.onRequest.addListener(function(request, sender, callback) {
$.ajax({
type: "GET",
dataType: 'html',
url: request.url,
username: "username",
password: "X",
success: callback
});
});
Content script code:
chrome.extension.sendRequest({'url': 'https://site.basecamphq.com'}, function(data) {
$("#example").append(data);
});