AJAX allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. It enables web pages to update just part of a page without disrupting what the user is doing. JSON is commonly used as a data format for AJAX requests, as it allows JavaScript objects to be converted to and from text that can be sent over the network. The XMLHttpRequest object is used to send and receive data from a web server asynchronously.

1. Mohammad Imam Hossain, Lecturer, dept. of CSE, UIU. Email: imambuet11@gmail.com
AJAX (Asynchronous Javascript And XML)
 AJAX is the use of the XMLHttpRequest object to communicate with servers.
 It can send and receive information in various formats, including JSON, XML, HTML and text files.
 The two major features of AJAX allow you to do the following:
o make requests to the server without reloading the page
o receive and work with data from the server
 It enables a Web page to update just part of a page without disrupting what the user is doing.
XMLHttpRequest class:
Properties Methods
readyState
-- returns the state of the request
0 -> UNSENT [open() not called yet]
1 -> OPENED [open() has been called]
2 -> HEADERS_RECEIVED [send() has been called]
3 -> LOADING [responseText holds partial data]
4 -> DONE [the Operation is complete]
setRequestHeader(header, value)
--sets the value of an HTTP request header, must
call it after open() but before send() methods
getResponseHeader(header)
--returns the string containing the text of a
particular header’s value
onreadystatechange
-- an eventhandler that is called whenever the readyState
attribute changes
open(method, url)
--initializes a request
status
--returns the numerical HTTP status code of the
XMLHttpRequest’s response
send(req_body) – req_body is optional
--sends the request to the server
responseType
--the type of the data contained in the response
“” -> text (default)
json -> json object
document -> HTML document
blob -> blob object containing the binary data
abort()
--aborts the request if it has already been sent
responseText
--contains response to the request as text or null if the
request was unsuccessful
Events:
abort, error, load,
loadend, loadstart, progress, timeout
response
--returns the reponse’s body content as a document, text,
JSON, blob depending on the value of the request’s
reponseType property.
Sending GET Request:
<button id="ajaxButton" type="button">Make a request</button>
<script>
(function() {
var httpRequest;
document.getElementById("ajaxButton").addEventListener('click', makeRequest);
function makeRequest() {
httpRequest = new XMLHttpRequest();
if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');

2. Mohammad Imam Hossain, Lecturer, dept. of CSE, UIU. Email: imambuet11@gmail.com
return false;
}
httpRequest.onreadystatechange = alertContents;
httpRequest.open('GET', 'test.html');
httpRequest.send();
}
function alertContents() {
try {
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('There was a problem with the request.');
}
}
}
catch( e ) {
alert('Caught Exception: ' + e.description);
}
}
})();
</script>
Sending POST request:
<script>
function makeRequest(url, userName) {
… … …
httpRequest.onreadystatechange = alertContents;
httpRequest.open('POST', url);
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send('userName=' + encodeURIComponent(userName));
}
</script>

3. Mohammad Imam Hossain, Lecturer, dept. of CSE, UIU. Email: imambuet11@gmail.com
JSON (Javascript Object Notation)
When exchanging data between a browser and a server, the data can only be text. JSON is text that is used to transmit
structured data over network connection.
Format:
1. JSON objects are surrounded by curly braces {}
2. JSON objects are written in key/value pairs
3. Keys must be double quoted strings
4. Values can be null, true, false, JSONNumber, JSONString, JSONObject, JOSNArray
5. Keys and values are separated by a colon
6. Each key/value pair is separated by a comma
For example,
var myobj = {
“name” : ”John”,
“age” : “30”,
“cars” : [
{
“name” : ”Ford”,
“models”: [“fiesta”,”focus”,”mustang”]
},
{
“name”:”BMW”,
“models”:[“320”,”x3”,”x5”]
},
{
“name”:”Fiat”,
“models”:[“500”,”Panda”]
}
]
};
JSON Methods:
Javascript PHP
JSON.stringify()  converts a JavaScript object or value to a
JSON string.
console.log(JSON.stringify({ x: 5, y: 6 }));
// expected output: ‘{"x":5,"y":6}’
json_encode() — Returns the JSON representation of a
value
<?php
$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,
'e'=>5);
echo json_encode($arr);
?>
JSON.parse()  parses a JSON string, constructs the
JavaScript value or object described by the string.
var json = '{"result":true, "count":42}';
obj = JSON.parse(json);
console.log(obj.count);
// expected output: 42
json_decode() -- takes a JSON encoded string and
converts it into a PHP variable.
<?php
$json = '{"a":1,"b":2,"c":3,"d":4,"e":5
}';

4. Mohammad Imam Hossain, Lecturer, dept. of CSE, UIU. Email: imambuet11@gmail.com
var_dump(json_decode($json, true));
//assoc array
?>
encodeURIComponent(str) -- encodes a Uniform Resource
Identifier (URI) component.
<script>
var set1 = ";,/?:@&=+$#"; // Reserved
Characters
var set2 = "-_.!~*'()"; // Unreserved
Marks
var set3 = "ABC abc 123"; // Alphanumeric
Characters + Space
console.log(encodeURIComponent(set1)); //
%3B%2C%2F%3F%3A%40%26%3D%2B%24%23
console.log(encodeURIComponent(set2)); // -
_.!~*'()
console.log(encodeURIComponent(set3)); //
ABC%20abc%20123 (the space gets encoded as
%20)
</script>
decodeURIComponent(encodedString) – decodes the
encoded URI.
PHP Network Functions:
Method Sample Code
header ($headerstring) – send a raw HTTP header
The header() must be called before any actual output is
sent either by normal HTML tags, blank lines in a file or
from PHP.
header_remove($name) – removes a previously set
header.
<html>
<?php
/* This will give an error. Note the output
* above, which is before the header() call
*/
header('Location: http://www.example.com/');
/* Make sure that code below does not get
* executed when we redirect
*/
exit;
?>
http_response_code()
http_response_code(codenumber)
— Gets or Sets the HTTP response code
<?php
// Get the current default response code
var_dump(http_response_code());
// Set a response code
var_dump(http_response_code(201));
// Get the new response code
var_dump(http_response_code());
?>