CSE2045Y - Lecture 9 - AJAX and XML DOM
CSE2045Y - Lecture 9 - AJAX and XML DOM
CSE2045Y - Lecture 9 - AJAX and XML DOM
1
Agenda
• Recap: The AJAX Model
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'];
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.
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;
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
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
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.
$name=$_GET['name'];
$age=$_GET['age'];
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.
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;
document.getElementById("mydiv").innerHTML=response;
….
XML response formatting (4)