JSON works Locally but not with Servers - json

Here is my little first project as practice, having real trouble figuring out how to use JSON, took me a while to get it work locally but still no luck with servers, and tried few a including one i hosted, and even tried it with other hosted json files.
http://jsfiddle.net/Atlas_/Mgyc5/1/
$.ajax({
dataType: "json",
async: false,
url: "package.json", //https://www.dropbox.com/s/fmw63i4v7dtnx6t/package.json
'success': function (json) {
theQuiz = json.quiz;
console.log(json);
console.log(theQuiz);
}
});

When you access another domain be carefully with "Crossdomain".
To use with dropbox, try changing the URL to:
https://dl.dropboxusercontent.com/s/fmw63i4v7dtnx6t/package.json
Your code will be like this:
$.ajax({
dataType: "json",
async: false,
url: "https://dl.dropboxusercontent.com/s/fmw63i4v7dtnx6t/package.json",
success: function (json) {
theQuiz = json.quiz;
console.log(json);
console.log(theQuiz);
}
});
When you request 'dl.dropboxusercontent.com', you have this:
Access-Control-Allow-Origin: *
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS?redirectlocale=en-US&redirectslug=HTTP_access_control
"In this case, the server responds with a Access-Control-Allow-Origin:
* which means that the resource can be accessed by any domain in a cross-site manner."
Another options: Some websites (twitter, for example) work with "jsonp". http://en.wikipedia.org/wiki/JSONP or ..you can create your own proxy.

Related

Partial HTML caching

I have javascript code, which calls to server to get json and then generates HTML and append it to body tag:
$.ajax({
url: '/myController/myJsonMethod',
type: 'POST',
data: JSON.stringify(requestData),
dataType: 'json',
contentType: 'application/json; charset=utf-8',
error: function (xhr) {
alert('Error: ' + xhr.statusText);
},
success: function (result) {
var myHTML='<div>'+result.text+'</div>'+.....
$( "body" ).append(myHTML);
},
async: true,
processData: false
});
This code is mostly static. The value of json result is changing couple of times in a year. Is there any way to cache this html part of the page?
Caching the generated HTML hardly makes sense, since it is trivial. What does make sense is to cache the actual ajax request, which is a normal http request.
For that you the normal points apply that control caching of request results. Actually the default behavior is that such results are cached, unless you took special precautions to prevent that. Take a look at the http headers you send first.
However there is one issue with such strategy: even if the requests result changes only rarely, still you have to consider what actually happens in that case: if you cache the request, then the client is unable to see the change until the cache is outdated.

How to call .asmx web service using plain html page

I am trying to call an asmx web service in plain html page. But not getting output. I'm not getting the exact problem. Here is my ajax code that I wrote to call that asmx web service.
function Getdet(Name)
{
alert('hellotest');
$.ajax({
type: "POST",
url: "http://192.168.1.20/myservice/service.asmx?HelloWorld", // add web service Name and web service Method Name
data: "{''}", //web Service method Parameter Name and ,user Input value which in Name Variable.
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response)
{
alert('abcd1');
$("#spnGetdet").html(response.d); //getting the Response from JSON
},
failure: function (msg)
{
alert(msg);
}
});
}
Should I have to add anything in the code..?? Please let me know where I am going wrong in this above code.
ASMX pages are plain old Web Services and the output is (almost) always in XML format, so don't except JSON out of the box.
Plus, they don't work well on different domain call by default, you will need to ensure that the cross domain is correctly handled.
After all this is done, you will then use the call as:
success: function(response) {
// http://stackoverflow.com/a/1773571/28004
var xml = parseXml(response),
json = xml2json(xml);
$("#spnGetdet").html(json.d);
}

jQuery JSON parsererror even though JSON is valid

I am trying to pull in some external JSON phone list for a test I am doing locally.
JSON = https://www.o2.co.uk/shop/homepage/scripts/phoneList.json
I have read on a seperate thread that to overcome allow origin / cross domain issues you can pass 'callback=?' to the end of the url. This seems to work fine as now in the devtools network tab I can see the file being pulled in fine.
However, I never get it to go into the success callback function. It always brings back a parsererror.
The code is 100% valid according to jsonlint.com
A snippet of the code as below:
$.ajax({
type: 'GET',
url: 'https://www.o2.co.uk/shop/homepage/scripts/phoneList.json?callback=?',
contentType: 'application/json; charset=utf-8',
cache: true,
dataType:'json',
success: function(response) {
console.log(response);
},
error: function(jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
}
});
Any ideas welcome as I am well and truly stuck.
Thanks.
JSONP only works if the server supports it. What the server needs to do, is take your callback parameter and wrap the json data in a function call with that name.
So when https://www.o2.co.uk/shop/homepage/scripts/phoneList.json responds with
[{
"handset":"Alcatel 10.30 Black",
"link":"/shop/phones/alcatel/10.30-black/"
}]
https://www.o2.co.uk/shop/homepage/scripts/phoneList.json?callback=MyCallback should respond with:
MyCallback([{
"handset":"Alcatel 10.30 Black",
"link":"/shop/phones/alcatel/10.30-black/"
}]);
If the server doesn't do that, JSONP can't work. Perhaps O2 doesn't want you using their data.

how to get json data using ajax in cross domain

I have to dynamically get data from another domain dynamically and I want to use ajax and jquery.I have done the following.
<script type="text/javascript">
$(document).ready(function(){
$('#getdata').click(function(){
var sitename = $('#sitename').val();
var listname = $('#listname').val();
getdata(sitename, listname);
})
});
function getdata(sitename, listname){
$.ajax({
url : 'http://192.168.10.34:8576/home/GetJsonData?site='+sitename+'&listname='+listname+'&viewname=',
datatype : 'JSON',
type : 'GET',
crossDomain: true,
contentType: "application/json; charset=utf-8",
success : function(data){
console.log(data)
},
error : function(){
alert('error');
}
})
}
</script>
But it's just returning error. why? Have I done anything wrong?
any help/suggestions are welcome. thanks.
You cannot request data from any domain other than the domain from where your JavaScript has originated from. For cases like this you should use JSONP(JSON with Padding). Change the dataType to JSONP in jQuery ajax function. Like this...
datatype : 'JSONP'
Also, your cross domain(http://192.168.10.34:8576/home/GetJsonData) should support jsonp or else your request will fail.
The alternative to using the JSONP hack is to allow for Cross-Origin Resource Sharing on your application.
It's painfully simple to handle this, but understand that this opens up minor to intermediate security issues at scale, so make sure to take care of them appropriately.
Simply set the Access-Control-Allow-Origin response header in your server application to *. CORS requests also issue OPTIONS preflight requests, so you can choose whether or not to handle those as well.

why does "datatype: jsonp" not work?

I have the following code, trying to get google's URL shortener to work.
$.ajax({
type: 'POST',
url: "https://www.googleapis.com/urlshortener/v1/url?key=AIzaSyDQ33gAu7thkpw_oW9VTcxR6YGhimcfik",
contentType: 'application/json',
data: '{ longUrl: "' + match +'"}',
dataType: 'jsonp',
success: function(id){
$('#menu').html(id);
}
});
The issue here is, when the datatype is just json, the request is made, but nothing is returned. when it is changed to jsonp, nothing happens at all. any ideas?
The JSON version doesn't work because it's a cross-origin call (see: Same Origin Policy). Does the Google URL shortener have a JSON-P API? It has to explicitly support it. (Also, JSON-P can't be POST; by its nature it's a GET.)
Update: Looks like they don't support it yet, but there's an open enhancement request.