how to get http request without using XHR object in javascript - javascript

Is it possible to get information from URL without using the XmlHttpRequest .
I am trying to get document from my noSqlDatabase from URL
by the XHR object and It did not work . but If I type the URL in the browser I get the data.

If by 'get information' you mean load data from a 3rd party url without using XHR requests, the answer is yes, but with caveats.
One commonly used method to load json data cross-domain is called jsonp. Essentially, you define a function on your page:
var x = function(data){ //do something with data }
Then you create a script tag and append it to you page where the src attribute points to some other url that returns a js file like this:
x({ param: 'some data' });
The x function then executes on your page and has access to the 'param' data in the object. You can also pass a string or number using this method.
There is another method involving iframes and the window.name property of the iframe. This technique is a bit older but still works, but I won't go into a lot of detail about it here. You can read more about it here, http://skysanders.net/subtext/archive/2010/10/11/leveraging-window.name-transport-for-secure-and-efficient-cross-domain-communications.aspx, and other places.

Related

Alternative to using eval with jsonp response

I have the following response:
someFunc({"attr":"val"});
How do I retrieve a JSON fron it? I could remove the function name from the string and fetch only JSON, but I think it's not the best solution to JSONP. I could use eval to call the someFunc function, but then again, eval is bad. How should I do this?
Usually those kind of inputs are coming from a remote endpoints that your javascript application would call. The way that this remote call is usually done is by declaring a function with the expected name and then dynamically injecting a script tag into your DOM pointing its src property to the remote resource. When the resource is loaded it will call your function passing it as parameter the desired object.
Let's have an example. Suppose that you have a remote endpoint that returns this the data shown in your question.
Start by defining a function:
window.someFunc = function(result) {
// result will represent the {"attr":"val"} object
alert(JSON.stringify(result));
};
and then just create a script element that would be appended to your DOM and initiate the JSONP retrieval from the remote endpoint:
var s = document.createElement('script');
s.setAttribute('src', 'http://example.com/some_endpoint');
document.body.appendChild(s);
After the script successfully loads the remote resource it will invoke someFunc that you have defined and pass it the result object.
Remark: most JSONP enabled endpoints allow you to specify the name of the callback through some query string parameter: http://example.com/some_endpoint?callback=someFunc so that you know in advance how to name your function.

Load data with AJAX only if it has not already been loaded?

I need to load data for my JavaScript app to use. I would like to load the following:
userlist JSON
milestones JSON
Tags JSON
user ACL permissions JSON
These 4 items of data from the server as JSON should be loaded using AJAX but only loaded once.
So I need code that will check to see if the data is loaded already and if it is, use it. If it is not loaded yet, it would make an AJAX request and load the data, and then use it.
I have multiple JavaScript files which need access to this data so I want to make sure that any of them can access it, and whichever once calls for it first will load it using AJAX and make it available for the other scripts to call it without making multiple repeat AJAX requests.
How could I go about this using JavaScript and jQuery?
A basic example would be super appreciated and useful. Thank you
If any of these are not set, load them using AJAX. After loading with AJAX, set these vars for the next caller to access them without a new AJAX request being made...
var userList = userJsonData;
var milestoneList = milestoneJsonData;
var tagList = tagJsonData;
var useAclPermissions = useAclPermissionsJsonData;
Just store the data in a global javascript variable, which is set to null, when your page loads. The first script which loads the data, stores it in the variable, all the other scripts try to access the content of the variable, and if not set, load it:
var milestoneData = null;
function getMilestoneData() {
if (milestoneData === null) {
//make the ajax request, and populate milestoneData variable
} else return milestoneData;
}
According to can i use you can check out localstorage aka webstorage. If you can use it, it might solve your issues. There is a jQuery plugin available. jstorage is an alternative, and has a really simple example at the bottom of the page. Hope this helps.

How to pass value to another static page via javascript?

I am trying to pass value to another page and read the value in the another page. I use only JavaScript and jQuery. Not use others language as PHP. I don't want to be as like (http://www.example.com/?value=test). I am trying to use POST or GET method.
On first page:
$.post("second_page.html",{q:"test"});
window.location.replace("second_page.html");
On second page:
var location_query = window.location.search.substring(1);
var vars = location_query.split("&");
for (var i in vars) {
var param = vars[i].split("=");
params[param[0].toString()] = param[1];
}
If I pass value as like http://www.example.com/?q=test , the second page script is read the value, but I use this line: $.post("second.html",{q:"test"}); not read.
How to pass value from first page to another static page via JavaScript or jQuery or ajax?
See this post says:
POST data is data that is handled server side. And Javascript is on client side. So there is no way you can read a post data using JavaScript.
but you can use cookies to read and store values:
<script src="/path/to/jquery.cookie.js"></script>
you can get it from here
Try with reading the documentation and see if this works for you.
Without using GET or POST you can transfer the content using HTML5 Local Storage or
Web SQL
$.post and $.get send AJAX request and waiting response on current page, you cant send params for next window.location.replace by this.
Use url get-params window.location.replace("404.html?q=404"); and look this for get params on second page.

Different JSON pages

i have 2 web pages containing same JSON string. one work fine with java-script function.but other one is completely not working.the only different between these two is url.
here is the page that is working fine with the js function.
(http://jsfiddle.net/echo/jsonp/?test=some+html+content&callback=?)
here is the one that is not working with the js function.
(http://sanjeewa88.byethost31.com/EMPStore/test_json.html)
here is my java-script function
function doJSON() {
$.getJSON('http://jsfiddle.net/echo/jsonp/?test=some+html+content&callback=?', function (data) {
$('#allemployees').append("<li>" + data.test+ "</li>");
});
}
what's wrong with second page and how i fix it to access that page through js function.
PS-
i want to display these data in a listview. first one is displaying that remote data on the listview.but second one which having same json string is not displaying anything.
On the page you provide the json you have to accept a para callback and use this parameter to generate the function name.
look what's happen when you call jsfiddle callback with an other name:
http://jsfiddle.net/echo/jsonp/?test=some+html+content&callback=poney
give:
poney({"test": "some html content"});
You have more information here: jQueryDoc
If the URL includes the string "callback=?" (or similar, as defined by the server-side API), the request is treated as JSONP instead. See the discussion of the jsonp data type in $.ajax() for more details.

Extracting part of current page's URL in javascript

In ASP.NET MVC 3 site, I open the following uri
http://myserver/incidents/supercompany/register
That page needs to make use of ajax JSON retrieval mechanism with the help of jQuery:
$.getJSON('/Incidents/[[COMPANY NAME GOES HERE]]/SearchPeople/' + request.term, function (data)
I am new to javascript. How can I obtain supercompany part of my current url to build the
/Incidents/supercompany/SearchPeople/ string?
Assuming your URLs follow a logical structure, you can do this
var URLparts = window.location.toString().substr(7).split('/');
And you can now access URLparts[1] to get the company name. Obviously, you need to be able to know that that will ALWAYS be there, but it's a solution if you can guarantee that (eg. with htaccess).

Categories

Resources