Load page within javascript - javascript

Is there a method in javascript to load a page without actually show that page?
I want to load a php page which will handle the database insertion tasks.

Use AJAX to get/send data to the serverside?

Yes there is, you can use the XMLHttpRequest for this.
here is a example
function done() {
console.log(this.responseText); // The response from the server
};
var XHR = new XMLHttpRequest();
XHR.onload = done; // Set the onload function
XHR.open("get", "something.php", true); // Type & File
XHR.send(); // Send the request
Here is some documentation on that MDN XMLHttpRequest

Related

XHR Post for saving document.body JS

i need to post document.body.innerHTML to my domain's proxy. There is working PM2 and before it I used GET and it looked like:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://domain.ru/pmproxy?info='+document.body.innerHTML+'&location='+document.location+1);
xhr.send();
Now, because there is a limit of letters I need to us POST. How can I turn this into POST?
First make sure the receiving server method accepts post and if you want to send data in xhr post you can do like this
xhr.send("info='+document.body.innerHTML+'&location='+document.location+1")
or if a server accepts a json object then you can use xhr.send(document.getElementById('#form).serialize());
You should convert it to this:
var xhr = new XMLHttpRequest();
xhr.open('post', 'https://domain.ru/pmproxy');
xhr.send('info='+document.body.innerHTML+'&location='+document.location+1);
Also, I suggest you clean both parameters, so you can avoid problems in the future:
xhr.send('info='+encodeURIComponent(document.body.innerHTML)+'&location='+encodeURIComponent(document.location+1));
Furthermore, I don't really know why you're using document.location+1, but you can use document.location.href and save the +1 so your code looks cleaner:
xhr.send('info='+encodeURIComponent(document.body.innerHTML)+'&location='+encodeURIComponent(document.location.href));

Getting started with calling APIs via XMLHttpRequest

I've just started to learn how to use APIs, but I'm having a little bit of trouble understanding exactly how to utilize them.
I was able to write the following code thanks to some online documentation, but I have some questions about how to add to it:
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.openweathermap.org/data/2.5/weather?q=London&mode=xml", false); xhr.send();
console.log(xhr);
Now, when I run this code in my browser and I open the console, I get a dropdown with a whole bunch of stuff under it. First of all, how can I get the code to display JUST the response? I want the console to display just the XML to show when I run my code. Second of all, how do I parse the XML? Is there any way to get a value from an XML element and assign it to a JavaScript variable?
Thanks!
What you are printing is the XMLHttpRequest object itself, while what you actually want is the response from the request you've made. To get the response, you use
xhr.responseXML;
Which is a object of the type document. (See the MDN docs).
To exhibit the code, you can just
console.log(xhr.responseXML);
But to actually work with the response, you'll probably want to do as Josh suggested, and request from the API a JSON-formatted response (instead of a XML-formatted one).
You will probably want to do that asyncronously, too (see this). The page has a more robust example. Let's adapt it to show London's temperature:
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.openweathermap.org/data/2.5/weather?q=London&mode=json", true);
xhr.onload = function (e) {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText);
var response = JSON.parse(xhr.responseText);
console.log("Temperature(K): " + response.main.temp);
} else {
console.error(xhr.statusText);
}
}
};
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
xhr.send(null);
Being async means that the xhr.onLoad function will be executed as soon as the response is received. Thus all of your code will be executed sequentially, and only when the response is received the onLoad will be executed.
You can get the response as a Document object.
Using your code above, you can reference xhr.responseXML and use the Document documentation to learn how to grab what data you need.
That dropdown is probably your browser formatting the response object in an interactive way for you.
xmlDoc=xhr.responseXML; will give you the actual resulting text
Alternatively: you could request a JSON object to make working with the data much easier.
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.openweathermap.org/data/2.5/weather?q=London&mode=json", false); xhr.send();
var data= JSON.parse(xhr.responseText); //data is now a javascript object full of the API data
Note how the url now reads mode=json now.

Ajax possible to return resource while it's being loaded?

Using XMLHttpRequest, I can retrieve a page / file dynamically:
var request = new XMLHttpRequest();
request.onload = function() {
console.log(this.responseText);
};
request.open("get", "/my_file.txt", true);
request.send();
However, the onload callback only runs when the entire page is downloaded. There are no methods to return the page bit by bit while it is being loaded. This means that XMLHttpRequest does not have access to a huge file until it is loaded entirely.
Is JavaScript able to retrieve the content of files (sent through HTTP 1.0) while they are being loaded dynamically?

Trouble loading external page

I have a problem loading an external page into my div using Javascript. I get a NS_ERROR_FAILURE in the console.
var req = new XMLHttpRequest();
req.open("GET", 'helpInfo.html', false);
req.send(null);
var page = req.responseText;
document.getElementById("helpInfo").innerHTML = page;
If you want to use javascript you can build a Node.js server and route all your calls through that. That will help the XSS problem.

Parse json from an external site with JavaScript

I am trying to parse some json on an external site but I am having trouble. It must be with JavaScript or JQuery, as it is for a chrome extension. To get to the point:
I need to get the number from an external URL with the json {"_visitor_alertsUnread":"0"} and set the number returned to a variable. How do I go about doing this?
I have tried several things such as JSON.parse but it isn't working:(
In short: How do I get the number from this json, which is on an external site, and set it to a variable?
You cannot get data from an external URL (in a different domain) in Javascript unless the site supports JSONP or Cross-Origin Resource Sharing. If it does, then use XMLHttpRequest to get the data and JSON.parse() to read it.
Script:
var xhr = new XMLHttpRequest();
xhr.open( 'GET', 'example.com/json', true );
xhr.onload = function () {
var unread = window.JSON.parse( xhr.responseText )._visitor_alertsUnread;
};
xhr.onerror = function () {
//process error
};
xhr.send();
Try this with http://api.jquery.com/jQuery.getJSON/
$.getJSON('your_url', function (jsonobj) {
var unread;
unread = jsonobj._visitor_alertsUnread;
});

Categories

Resources