[Tutorial] Communicating with web pages

This tutorial is meant to help script developers to create scripts that can interact and trade data with web pages. The majority of the code samples here utilize the XMLHTTP ActiveX object, very similar to how web pages create dynamic page content using AJAX. When time permits, I also plan on creating a class that will be able to process these functions.

Opening a web page in the default browser

I’ll start off with the simple things, and show how to open a web browser.

code:
new ActiveXObject("WScript.Shell").run("http://www.example.com");

The code should be pretty self-explanatory, simply change the URL to whatever value you want, or substitute in a variable with string data.

What it’s used for
Well, for opening a web page, of course. Maybe a link to a personal site on an about window, or opening a page after alerting a user of script updates that are available.

Retrieving content of a web page

Alright, so the next step is getting data from a web page so that it can interact with your script. As mentioned before, the XMLHTTP object will be used.

code:
var url = "http://www.example.com";

Interop.Call("wininet.dll", "DeleteUrlCacheEntryW", url);
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4)
if (xmlhttp.responseCode == 200) {
// Data from URL was retrieved successfully
// Data is saved in the variable xmlhttp.responseText
} else {
// The server returned an HTTP code other than 200
}
}
xmlhttp.send();

Let’s examine this line by line. Firstly, specify the URL in the first line.
The second line containing Interop.Call will delete any cached version of the page that is being requested, to make sure a fresh copy of the page is being retrieved.
Next, the object is created so that it can be used for the rest of the snipped here.

The open method here is shown with 3 parameters, but there are 5 possible parameters that are accepted. Only the first two are required. The first parameter is the HTTP method to use. In this example, only the GET method is needed. There are other possible values, including POST which I’ll explain later in this tutorial. Second parameter as seen is the URL. The third parameter, although optional, will almost always want to be included and set to true. This states that the request will be processes asynchronously and allow the rest of the script (and the rest of WLM!) to operate as normal. Setting this value to false will stop everything within WLM until the page has completed downloading, making it appear to have locked up. The final 2 parameters are username and password, for if the page being requested requires HTTP authentication.

The next line here creates a function from onreadystatechange, which is an event handler which is triggered when the value of onreadystatechage changes. It has possible values from 0-4:

0 – not initialized, open() has not been called yet
1 – open, send not called yet
2 – sent, send is called, and the HTTP headers have been returned
3 – receiving, the page is downloading
4 – complete, page has been loaded

Just to make sure the page has been loaded properly, also check the HTTP response code. 200 represents that the page has loaded okay.

What it’s used for
Anything that requires information to be collected from a web page. Perhaps to download a text file to compare script versions as an update checker? Getting data from an RSS feed can be used to create a script to show feed information, or any other dynamic content for in your script.

Sending data to a web page using GET

So I’ve shown how to retrieve data FROM a web page, but how do you send data TO a web page? When using HTML forums there are two typical ways the data is set, either by GET or POST. The GET method simply adds the data to send onto the end of the URL. The same block of code above can be used to send data via GET, all that needs to be done is to add the data on to the end of the URL string.

code:
var url = "http://www.example.com?var1=data1&var2=data2";

Make sure to encode the data being sent using encodeURI() or encodeURIComponent()

Sending data to a web page using POST

The POST method is a lot more useful when there is larger amount of data to be sent. The data is included as part of the header request instead of as part of the URL. The code for a POST request is very similar to that of GET, with a few extra lines added.

code:
var url = "http://www.example.com";
var data = "var1=some%20data&var2=some%20more%20data";

Interop.Call("wininet.dll", "DeleteUrlCacheEntryW", url);
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", data.length);
xmlhttp.setRequestHeader("Connection", "close");

xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4)
if (xmlhttp.responseCode == 200) {
// Data from URL was retrieved successfully
// Data is saved in the variable xmlhttp.responseText
} else {
// The server returned an HTTP code other than 200
}
}
xmlhttp.send(data);

The differences that have been made are switching the HTTP method in open(), adding a few extra headers, and adding the data top be sent in the send() method.

What it’s used for
Any time that information is needed to be sent to a web page or server, using POST would be the preferred method.

Uploading files to a web page using POST

I’m not going to explain how to do this myself, because volv has already done an excellent job in doing this, and has written the accompanying files to support file uploads already. His tutorial can be found on his blog.

Shoutbox

login | register | shoutbox