Scribd
Upload
49 views25 pages

CSE2045Y - Lecture 9 - AJAX and XML DOM

Here are the key changes required: 1. checkModule.php - Format response in XML - Add exists attribute to indicate status 2. ajaxGET() - Parse XML response - Check exists attribute - Construct response string accordingly - Display This allows differentiated styling based on XML data. Let me know if any other assumptions need to be stated.

Uploaded by

splokbov
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
49 views25 pages

CSE2045Y - Lecture 9 - AJAX and XML DOM

Here are the key changes required: 1. checkModule.php - Format response in XML - Add exists attribute to indicate status 2. ajaxGET() - Parse XML response - Check exists attribute - Construct response string accordingly - Display This allows differentiated styling based on XML data. Let me know if any other assumptions need to be stated.

Uploaded by

splokbov
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

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
Recap: AJAX Example using GET (2)
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()
Recap: AJAX Example using GET (3)
formGET.php
<?php
$name=$_GET['name'];
$age=$_GET['age'];

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


<b>$name</b>... So you're <b>$age</b>
years old?</span>";
?>
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()
http_request.onreadystatechange=function(){
if (http_request.readyState==4){
if (http_request.status==200) {

//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 = "<span style='color:red'>Welcome <b>"+name+"</b>...So you are <b>"+age+"</b> years
old?</span>";
document.getElementById("result").innerHTML=response;
}
else{
alert("An error has occured making the request");
}
}
}
http_request.send(null);
}//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 "<b><font color='green'>Exists</font></b>";
}
else{
echo "<b><font color='red'>Not exists</font></b>";
}
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);

http_request.onreadystatechange=function(){
if (http_request.readyState==4){
if (http_request.status==200) {
document.getElementById("mydiv").innerHTML=http_request.responseText;
}
else{
alert("An error has occured making the request");
}
}
}

http_request.send(null);
}//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.
XML response formatting (2)
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>
XML response formatting (3)
(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 = "<b><font color='green'>" + status + "</font></b>";
else
response = "<b><font color='red'>" + status + "</font></b>";

document.getElementById("mydiv").innerHTML=response;
….
XML response formatting (4)

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy