Computer Programming || Gaming || Technology || ai

ajax


AJAX = Asynchronous JavaScript And XML.

AJAX is not a programming language.

AJAX just uses a combination of:

  • A browser built-in XMLHttpRequest object (to request data from a web server)
  • JavaScript and HTML DOM (to display or use the data)

AJAX is a misleading name. AJAX applications might use XML to transport data, but it is equally common to transport data as plain text or JSON text.

AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

<!DOCTYPE html>
<html>
<body>

The XMLHttpRequest Object

Change Content

function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“demo”).innerHTML =
this.responseText;
}
};
xhttp.open(“GET”, “ajax_info.txt”, true);
xhttp.send();
}

</body>
</html>

HTML Page

<!DOCTYPE html>
<html>
<body>

Let AJAX change this text

Change Content

</body>
</html>

The HTML page contains a <div> section and a <button>.

The <div> section is used to display information from a server.

The <button> calls a function (if it is clicked).

The function requests data from a web server and displays it:

Function loadDoc()

function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“demo”).innerHTML = this.responseText;
}
};
xhttp.open(“GET”, “ajax_info.txt”, true);
xhttp.send();
}

XMLHttpRequest Object

var xhttp = new XMLHttpRequest();

Send a Request To a Server

xhttp.open(“GET”, “ajax_info.txt”, true);
xhttp.send();

GET or POST?

GET is simpler and faster than POST, and can be used in most cases.

However, always use POST requests when:

  • A cached file is not an option (update a file or database on the server).
  • Sending a large amount of data to the server (POST has no size limitations).
  • Sending user input (which can contain unknown characters), POST is more robust and secure than GET.

GET Requests

A simple GET request:

Example

xhttp.open(“GET”, “demo_get.asp”, true);
xhttp.send();

POST Requests

A simple POST request:

Example

xhttp.open(“POST”, “demo_post.asp”, true);
xhttp.send();

Try it Yourself »

To POST data like an HTML form, add an HTTP header with setRequestHeader(). Specify the data you want to send in the send() method:

Example

xhttp.open(“POST”, “demo_post2.asp”, true);
xhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xhttp.send(“fname=Henry&lname=Ford”);

The url – A File On a Server

xhttp.open(“GET”, “ajax_test.asp”, true);

The onreadystatechange Property

xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“demo”).innerHTML = this.responseText;
}
};
xhttp.open(“GET”, “ajax_info.txt”, true);
xhttp.send();

Synchronous Request

To execute a synchronous request, change the third parameter in the open() method to false:

xhttp.open(“GET”, “ajax_info.txt”, false);
Property Description
onreadystatechange Defines a function to be called when the readyState property changes
readyState Holds the status of the XMLHttpRequest.
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
status 200: “OK”
403: “Forbidden”
404: “Page not found”
For a complete list go to the Http Messages Reference
statusText Returns the status-text (e.g. “OK” or “Not Found”)

The onreadystatechange function is called every time the readyState changes.

When readyState is 4 and status is 200, the response is ready:

Example

function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“demo”).innerHTML =
this.responseText;
}
};
xhttp.open(“GET”, “ajax_info.txt”, true);
xhttp.send();
}

Example

Start typing a name in the input field below:

First name:    Suggestions:

 

Example Explained

In the example above, when a user types a character in the input field, a function called “showHint()” is executed.

The function is triggered by the onkeyup event.

Here is the HTML code:

Example

<html>
<head>

function showHint(str) {
if (str.length == 0) {
document.getElementById(“txtHint”).innerHTML = “”;
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“txtHint”).innerHTML = this.responseText;
}
};
xmlhttp.open(“GET”, “gethint.php?q=” + str, true);
xmlhttp.send();
}
}

</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type=”text” onkeyup=”showHint(this.value)”>
</form>
<p>Suggestions: <span id=”txtHint”></span></p>
</body>
</html>


The PHP File – “gethint.php”

The PHP file checks an array of names, and returns the corresponding name(s) to the browser:

<?php
// Array with names
$a[] = “Anna”;
$a[] = “Brittany”;
$a[] = “Cinderella”;
$a[] = “Diana”;
$a[] = “Eva”;
$a[] = “Fiona”;
$a[] = “Gunda”;
$a[] = “Hege”;
$a[] = “Inga”;
$a[] = “Johanna”;
$a[] = “Kitty”;
$a[] = “Linda”;
$a[] = “Nina”;
$a[] = “Ophelia”;
$a[] = “Petunia”;
$a[] = “Amanda”;
$a[] = “Raquel”;
$a[] = “Cindy”;
$a[] = “Doris”;
$a[] = “Eve”;
$a[] = “Evita”;
$a[] = “Sunniva”;
$a[] = “Tove”;
$a[] = “Unni”;
$a[] = “Violet”;
$a[] = “Liza”;
$a[] = “Elizabeth”;
$a[] = “Ellen”;
$a[] = “Wenche”;
$a[] = “Vicky”;

// get the q parameter from URL
$q = $_REQUEST[“q”];

$hint = “”;

// lookup all hints from array if $q is different from “”
if ($q !== “”) {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === “”) {
$hint = $name;
} else {
$hint .= “, $name”;
}
}
}
}

// Output “no suggestion” if no hint was found or output correct values
echo $hint === “” ? “no suggestion” : $hint;
?>

AJAX Database Example

The following example will demonstrate how a web page can fetch information from a database with AJAX:

Example

Select a customer:
Alfreds Futterkiste
North/South
Wolski Zajazd

Customer info will be listed here…

Try it Yourself »


Example Explained – The showCustomer() Function

When a user selects a customer in the dropdown list above, a function called “showCustomer()” is executed. The function is triggered by the “onchange” event:

showCustomer

function showCustomer(str) {
var xhttp;
if (str == “”) {
document.getElementById(“txtHint”).innerHTML = “”;
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“txtHint”).innerHTML = this.responseText;
}
};
xhttp.open(“GET”, “getcustomer.asp?q=”+str, true);
xhttp.send();
}

The showCustomer() function does the following:

  • Check if a customer is selected
  • Create an XMLHttpRequest object
  • Create the function to be executed when the server response is ready
  • Send the request off to a file on the server
  • Notice that a parameter (q) is added to the URL (with the content of the dropdown list)


The AJAX Server Page

The page on the server called by the JavaScript above is an ASP file called “getcustomer.asp”.

The server file could easily be rewritten in PHP, or some other server languages.

Look at a corresponding example in PHP.

The source code in “getcustomer.asp” runs a query against a database, and returns the result in an HTML table:

<%
response.expires=-1
sql=”SELECT * FROM CUSTOMERS WHERE CUSTOMERID=”
sql=sql & “‘” & request.querystring(“q”) & “‘”

set conn=Server.CreateObject(“ADODB.Connection”)
conn.Provider=”Microsoft.Jet.OLEDB.4.0″
conn.Open(Server.Mappath(“/datafolder/northwind.mdb”))
set rs=Server.CreateObject(“ADODB.recordset”)
rs.Open sql,conn

response.write(“<table>”)
do until rs.EOF
for each x in rs.Fields
response.write(“<tr><td><b>” & x.name & “</b></td>”)
response.write(“<td>” & x.value & “</td></tr>”)
next
rs.MoveNext
loop
response.write(“</table>”)
%>

Have any Question or Comment?

Leave a Reply

Your email address will not be published. Required fields are marked *




Calender

October 2020
M T W T F S S
 1234
567891011
12131415161718
19202122232425
262728293031