
[javascript code] var varname = varvalue; //Declaring your variable is not mandatory, but good practice.
[javascript code]
var variable1 = 1; //Declare a variable.
if(variable1 == 1){
// Increment variable value by 1
variable1++;
/* The following brings up a message box, a handy way of checking variable values as you
go. Be careful not to use these in loops that are too long. */
alert(variable1);
}else if(variable1 == 2){ //Elseif's in javascript require a space between the else and if.
for(i=0;i<20;i++){ //For loop.
variable1++;
}
switch(variable1){ //Switch conditional
case 22:
alert("variable 1 has value of 22!");
break;
default:
alert("didn't have value of 22!");
break;
}
}else{
alert('The final else statement');
}
[javascript code]
function functioname(argument1, argument2, argument3){
/* Arguments not provided will be null */
if(argument3 == null){
return argument1 + argument2
}else{
return argument1 + argument2 + argument3
}
}
/* And call it with */
alert(functionname(1, 2)); //returns 3
/* or */
alert(functionname(1, 2, 3)); //returns 6
[HTML code]
<!--Placing your javascript in the head tag of your html document is the standard-->
<script language="javascript" type="text/javascript" src="./javascript_file.js"></script>
<script language="javascript" type="text/javascript">
/*Javscript code goes in here*/
alert("Hello World!");
</script>
[HTML code] <html> <head> <title>CompanyXYZ Software</title> <script language="javascript" type="text/javascript" src="./internal_request.js"> </script> </head> <body> <div id="product_categories"> <!--Category selection box...--> <form name="form_category_select"> <select> <option>Audio</option> <option>Games</option> <option>Internet</option> </select> </form> </div> <div id="product_cage"> <!--This is where we'll be displaying the products once they're loaded--> ^ Please select a category from above. </div> </body> </html>
[javascript code]
var request_o = new ActiveXObject("Microsoft.XMLHTTP");
[javascript code] var request_o = new XMLHttpRequest();
[javascript code]
/* The following function creates an XMLHttpRequest object... */
function createRequestObject(){
var request_o; //declare the variable to hold the object.
var browser = navigator.appName; //find the browser name
if(browser == "Microsoft Internet Explorer"){
/* Create the object using MSIE's method */
request_o = new ActiveXObject("Microsoft.XMLHTTP");
}else{
/* Create the object using other browser's method */
request_o = new XMLHttpRequest();
}
return request_o; //return the object
}
/* You can get more specific with version information by using
parseInt(navigator.appVersion)
Which will extract an integer value containing the version
of the browser being used.
*/
We now have a function that will create an XMLHttpRequest object in internal_request.js, and we have an HTML file that calls upon the code in internal_request.js. Remember how we left the product selection <div> in products.html blank? Let's write the code that utilizes our createRequestObject function to get the list of products.
[javascript code]
/* The variable http will hold our new XMLHttpRequest object. */
var http = createRequestObject();
/* Function called to get the product categories list */
function getProducts(){
/* Create the request. The first argument to the open function is the method (POST/GET),
and the second argument is the url...
document contains references to all items on the page
We can reference document.form_category_select.select_category_select and we will
be referencing the dropdown list. The selectedIndex property will give us the
index of the selected item.
*/
http.open('get', 'internal_request.php?action=get_products&id='
+ document.form_category_select.select_category_select.selectedIndex);
/* Define a function to call once a response has been received. This will be our
handleProductCategories function that we define below. */
http.onreadystatechange = handleProducts;
/* Send the data. We use something other than null when we are sending using the POST
method. */
http.send(null);
}
/* Function called to handle the list that was returned from the internal_request.php file.. */
function handleProducts(){
/* Make sure that the transaction has finished. The XMLHttpRequest object
has a property called readyState with several states:
0: Uninitialized
1: Loading
2: Loaded
3: Interactive
4: Finished */
if(http.readyState == 4){ //Finished loading the response
/* We have got the response from the server-side script,
let's see just what it was. using the responseText property of
the XMLHttpRequest object. */
var response = http.responseText;
/* And now we want to change the product_categories <div> content.
we do this using an ability to get/change the content of a page element
that we can find: innerHTML. */
document.getElementById('product_cage').innerHTML = response;
}
}
http.abort;
http.open('post', 'back_end.php');
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http.send('arg1=val1&arg2=val2&arg3=val3');
<product_list> <product id="1"> <name>EeasySMS</name> <version>2.2</version> </product> <product id="2"> <name>BabyMon</name> <version>1.2</version> </product> </product_list>
/* Reference the product_list element to the variable product_list */
product_list = XMLReponse.getElementByTagName('product_id');
/* By substituting product_list for XMLResponse, we will be searching
only the product_list element, not the entire response
We also use getElementsByTagName, not getElementByTagName,
since we are interested in all of the results, not just one. */
product_id = XMLResponse.getElementsByTagName('product');
/* getElementsByTagName produces an array, which we can access like this:
product_id[n], the same way we access an array item in PHP.
Let's get the id attribute from the product elements like this: */
for(i=0; i<product_id.length; i++){ //length is the same as count($array)
id = product_id[i].getAttribute('id') //Grabs the id attribute.
/* To get the text from within a text node, we use firstChild.data
for the corresponding element. */
name = product_id[i].getElementByTagName('name').firstChild.data;
version = product_id[i].getElementByTagName('version').firstChild.data;
}