Scribd
Upload
56 views16 pages

Cse2045Y Web Application Development: Ajax (Asynchronous Javascript and XML)

This document discusses AJAX and provides an example of using AJAX with GET and POST requests. It begins with an introduction to AJAX, explaining that it allows for asynchronous data exchange in the background to update parts of a web page without reloading. It then demonstrates how AJAX works through diagrams and examples. It shows code for an AJAX GET request that retrieves and displays data without reloading the page. It also provides an example of an AJAX POST request. Finally, it proposes an activity to add checking for existing module codes to a form using AJAX.

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
56 views16 pages

Cse2045Y Web Application Development: Ajax (Asynchronous Javascript and XML)

This document discusses AJAX and provides an example of using AJAX with GET and POST requests. It begins with an introduction to AJAX, explaining that it allows for asynchronous data exchange in the background to update parts of a web page without reloading. It then demonstrates how AJAX works through diagrams and examples. It shows code for an AJAX GET request that retrieves and displays data without reloading the page. It also provides an example of an AJAX POST request. Finally, it proposes an activity to add checking for existing module codes to a form using AJAX.

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/ 16

CSE2045Y

Web Application Development

Lecture 2
AJAX (Asynchronous JavaScript And XML)

Agenda
• What is AJAX?
• The AJAX model
• Why use AJAX
• How AJAX works?
• AJAX example using:
– GET
– POST

2
What is AJAX?
• AJAX = Asynchronous JavaScript and XML.

• AJAX is not a new programming language, but


a new way to use existing standards.

• AJAX is the art of exchanging data with a


server, and update parts of a web page -
without reloading the whole page.

The AJAX Model

http://blog.arvixe.com/wp-content/uploads/2013/08/ajax-diagram.png
4
Why use AJAX?
• AJAX is a technique for creating fast and dynamic web
pages.

• AJAX allows web pages to be updated asynchronously by


exchanging small amounts of data with the server behind
the scenes.
– This means that it is possible to update parts of a web page,
without reloading the whole page.

• Classic web pages, (which do not use AJAX) must reload


the entire page if the content should change.

• Examples of applications using AJAX: Google Maps,


Gmail, Youtube, and Facebook tabs.

How AJAX Works (1)

https://www.w3schools.com/php/ajax.gif
How AJAX Works (2)
• AJAX is based on internet standards, and uses a
combination of:
– XMLHttpRequest object (to exchange data asynchronously
with a server)
– JavaScript/DOM (to display/interact with the information)
– CSS (to style the data)
– XML (often used as the format for transferring data)

• AJAX applications are browser and platform


independent !

How AJAX Works (3)


• Google Suggest
– AJAX was made popular in 2005 by Google, with
Google Suggest.
– Google Suggest is using AJAX to create a very
dynamic web interface: When you start typing in
Google's search box, a JavaScript sends the letters
off to a server and the server returns a list of
suggestions.
AJAX Example using GET
AJAX Example
How it works?

function ajaxGET()

get.html

formGET.php

get.html
<html>
<head>
<script type="text/javascript" src="ajax_functions.js"></script>
</head>
<body>

<h1>AJAX GET Example</h1>


<form>
Your name: <input type="text" id="name" name="name" size="25" /> <br >
<br>Your age: &nbsp;&nbsp;&nbsp;<input type="text" id="age" name="age" size="25"/>
<br><br><input type="button" value=“Display message" onClick="ajaxGET();" />
</form>

<div id="result"> </div>

</body></html>
get.html
• A Javascript function ajaxGET() is called when the
submit button is clicked.
<input type="button" value="submit"
onClick="ajaxGET();" />

• ajaxGET() constructs an http request and returns


the response.

• The response is displayed in an html <div>


element.
<div id="result"> </div>

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()
function ajaxGET()
• ajaxGET() builds an http request to
formGET.php with appropriate
parameters (name & age).

var namevalue=document.getElementById("name").value;
var agevalue=document.getElementById("age").value;

http_request.open("GET", "formGET.php?
name="+namevalue+ "&age="+agevalue, true);

function ajaxGET()
• The innerHTML property of the <div> is
used to display the response.
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");
}
}
}
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>";
?>

formGET.php
• Name & Age are retrieved using the GET
method.
$name=$_GET['name'];
$age=$_GET['age'];

• and used within the html response.


echo "<span style='color:red'>Welcome
<b>$name</b>... So you're <b>$age</b>
years old?</span>";
AJAX Example using POST
post.html
<html>
<head>
<script type="text/javascript" src="ajax_functions.js"></script>
</head>
<body>

<h1>AJAX POST Example</h1>


<form>
Your name: <input type="text" id="name" name="name" size="25" /> <br />
<br>Your age: &nbsp;&nbsp;&nbsp;<input type="text" id="age" name="age" size="25" />
<br />
<br><input type="button" value="Display message" onClick="ajaxPOST();" />
</form>

<div id="result"> </div>

</body></html>

function ajaxPOST()
function ajaxPOST(){
var http_request= new XMLHttpRequest();

var namevalue=document.getElementById("name").value;
var agevalue=document.getElementById("age").value;
var parameters="name="+namevalue+"&age="+agevalue;
http_request.open("POST", "formPOST.php", true);
http_request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

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(parameters);
}//end function ajaxpost
formPOST.html
<?php
$name=$_POST['name'];
$age=$_POST['age'];

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


<b>$name</b>...
So you are <b>$age</b> years old?</span>";
?>

Activity 1
• Consider the following form addModule.php,
used for admin section to enter modules into the
system. addModule.php is submitted to
addmodule_process.php using the GET
method.
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”.

Activity 1
• Modify the codes in addModule.php (given in next
slide) such that if the module code exists, a
message is displayed next to the module code field
to inform the user that this module already exists.

• Make sure in your code that:


1. You define the function that builds the request
to the server (using GET).
2. You call this function .
3. You add the proper code to display the status
message.
addModule.php
<form name="addmodule" method="get" action="addmodule_process.php">
<table id=table_modules>
<tr>
<td>Module Code:</td>
<td><input type="text" name="txt_modulecode" id="txt_modulecode">
</td>
<td></td></tr>
<tr>
<td>Module Description:</td>
<td><input type="text" name="txt_modulename" id="txt_modulename">
</td>
</tr>
</table>
<input type=“submit" value="Submit Query">
</form>

Database
• Assume that the following schema has
been defined for the database,
implemented in MySQL.
db_connect.php
<?php
$strHost = "localhost";
$strUser = "root";
$strPass = "";
$strDb = "feedbackdatabase";

// open connection
$con = mysqli_connect($strHost, $strUser, $strPass, $strDb);

// Check connection
if (mysqli_connect_errno()){
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>

checkModule.php
<?php
// MISSING CODES 1 - Get module code

require("db_connect.php");

$sql="SELECT * FROM modules WHERE modulecode = '".$modulecode."'";


$result = mysqli_query($con,$sql);

// MISSING CODES 2 – Display status message

mysqli_close($con);
?>

Hint: The mysqli_num_rows($result) function returns the number of rows in a


resultset.
References
• https://blog.arvixe.com/opencart-create-ajax-
function/

31

You might also like