CSE2045Y

CSE2045Y
Web Application Development

Lecture 9
AJAX with XML
Document Object Model (DOM)
1
Agenda
• Recap: The AJAX Model
• AJAX using GET and XML
• XML Document Object Model (DOM)

– XML DOM Properties
– XML DOM Methods
• AJAX with XML DOM: How it works?

Recap: The AJAX Model
• In the the AJAX model, we retrieved data using plain text.
Now, we will use XML format to get updated data !
http://blog.arvixe.com/wp-content/uploads/2013/08/ajax-diagram.png
3
Recap: AJAX Example using GET (1)
Response was
received in
plain text
function ajaxGET()
function ajaxGET(){
var http_request= new XMLHttpRequest();
var namevalue=document.getElementById("name").value;
var agevalue=document.getElementById("age").value;
http_request.open("GET", "formGET.php?name="+namevalue+"&age="+agevalue, true);
http_request.onreadystatechange=function(){
if (http_request.readyState==4){
if (http_request.status==200) {
document.getElementById("result").innerHTML=http_request.responseText;
}
else{
alert("An error has occured making the request");
}
}
}
http_request.send(null);
}//end function ajaxGET()
formGET.php
<?php
$name=$_GET['name'];
$age=$_GET['age'];
echo "Welcome

$name... So you're $age
years old?";
?>
AJAX Example using GET and XML
The objective
is to receive
the response
in XML format
Document Object Model (DOM)
• The DOM defines a standard for accessing and
manipulating documents.
– The HTML DOM defines a standard way for accessing
and manipulating HTML documents. It presents an
HTML document as a tree-structure.
– The XML DOM defines a standard way for accessing
and manipulating XML documents. It presents an XML
document as a tree-structure.
• Understanding the DOM is a must for anyone

working with HTML or XML.
8
The HTML DOM
• All HTML elements can be accessed through the HTML
DOM.
• Note how we assigned the response of the AJAX request
using innerHTML.
document.getElementById("result").innerHTML=http_
request.responseText;
• In the same way, we can access XML nodes using XML

DOM.
9
The XML DOM
• All XML elements can be accessed through the XML
DOM.
• The XML DOM is:

– A standard object model for XML
– A standard programming interface for XML
– Platform- and language-independent
– A W3C standard
• The XML DOM is a standard for how to get, change,

add, or delete XML elements.
10
XML DOM Properties
• These are some typical DOM properties:
– x.nodeName - the name of x
– x.nodeValue - the value of x
– x.parentNode - the parent node of x
– x.childNodes - the child nodes of x
– x.attributes - the attributes nodes of x
• Where x is a node object.
11
XML DOM Methods
• x.getElementsByTagName(name)
– get all elements with a specified tag name
• x.appendChild(node)
– insert a child node to x
• x.removeChild(node)
– remove a child node from x
• Where x is a node object

12
AJAX with XML DOM (1)
How it works?
function ajaxGET()
XML
get.html
Response
formGET.php
AJAX with XML DOM (2)
How it works?
• The changes:
– formGET.php: This page should format the
response using XML.
– function ajaxGET(): The XML response received

from formGET.php should be processed using XML
DOM properties and methods.
formGET.php
<?php
// Explicitly set the content type to XML
header('Content-Type: application/xml');
$name=$_GET['name'];
$age=$_GET['age'];
// Format the response in XML format

echo "<?xml version='1.0' encoding='UTF-8'?>";
echo "<message><name>$name</name><age>$age</age></message>";
?>
function ajaxGET()
//get XML element content

var xmlResponse = http_request.responseXML;
var name = xmlResponse.getElementsByTagName("name")[0].firstChild.nodeValue;

var age = xmlResponse.getElementsByTagName("age")[0].firstChild.nodeValue;
//Construct & Display response from XML content

response = "Welcome "+name+"...So you are "+age+" years
old?";
document.getElementById("result").innerHTML=response;
}
else{
}
}
}
}//end function ajaxget
AJAX Example using POST and XML
• The AJAX POST example can also use XML
data.
• Homework: Implement the AJAX Example

using POST and XML.
Activity 1
(Ref: Lecture 2, Activity 1)
• Requirements:
– Each time the user types the module code, a request is sent to
check if this module already exists.
– Assume that a page, checkModule.php, takes the module code

and checks the code in the database. If the code exists, it
returns “Exists”, else it returns “Not exists”.
– The objective is to return the message and handle the message
in XML format !
Activity 1
(Ref: Lecture 2, Activity 1)
• Highlight the changes that should be made to the
following codes:
– formGET.php: This page should check if the module
exists in the database and format the response using
XML.
– function ajaxGET(): The XML response received from

formGET.php should be processed using XML DOM
properties and methods to display whether the
module code exists or not.
• State any assumptions made !

checkModule.php
<?php
$modulecode=$_GET["code"];
require("db_connect.php");
$sql="SELECT * FROM modules WHERE modulecode = '".$modulecode."'";
$result = mysqli_query($con,$sql);
if (mysqli_num_rows($result)>0){
echo "Exists";
}
else{
echo "Not exists";
}
mysqli_close($con);
?>
ajaxGET() function
function ajaxGET(){
var http_request= new XMLHttpRequest();
var modulecode=document.getElementById('txt_modulecode').value;
http_request.open("GET", "checkModule.php?code="+modulecode, true);
document.getElementById("mydiv").innerHTML=http_request.responseText;
}
else{
}
}
}
}//end function ajaxget
XML response formatting (1)
• In this example, we cannot differentiate if the
module exists or not in terms of the response
formatting.
– i.e. the same color is applied to all XML responses.
– We can cater for this by adding an attribute in the

XML response.
Without Attribute:
<?xml version='1.0' encoding='UTF-8'?>
<message>
<status>Exists</status>
</message>
With Attribute:
<?xml version='1.0' encoding='UTF-8'?>
<message exists=“yes”>
<status>Exists</status>
</message>
(Extract from ajaxGET() function)
…..
var xmlResponse = http_request.responseXML;
var status = xmlResponse.getElementsByTagName("status")[0].firstChild.nodeValue;

var exists = xmlResponse.getElementsByTagName("status")[0].getAttribute('exists');
//Construct & Display response from XML content

if (exists == "yes")
response = "" + status + "";
else
response = "" + status + "";
document.getElementById("mydiv").innerHTML=response;
….

CSE2045Y - Lecture 9 - AJAX and XML DOM

Uploaded by

Copyright:

Available Formats

CSE2045Y - Lecture 9 - AJAX and XML DOM

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSE2045Y - Lecture 9 - AJAX and XML DOM

Uploaded by

Copyright:

Available Formats

Web Application Development

• AJAX using GET and XML

• XML Document Object Model (DOM)

• AJAX with XML DOM: How it works?

echo "<span style='color:red'>Welcome

• Understanding the DOM is a must for anyone

• In the same way, we can access XML nodes using XML

• The XML DOM is:

• The XML DOM is a standard for how to get, change,

• Where x is a node object.

• Where x is a node object

– function ajaxGET(): The XML response received

// Format the response in XML format

//get XML element content

var name = xmlResponse.getElementsByTagName("name")[0].firstChild.nodeValue;

//Construct & Display response from XML content

• Homework: Implement the AJAX Example

– Assume that a page, checkModule.php, takes the module code

– function ajaxGET(): The XML response received from

• State any assumptions made !

– We can cater for this by adding an attribute in the

var status = xmlResponse.getElementsByTagName("status")[0].firstChild.nodeValue;

//Construct & Display response from XML content

You might also like