AJAX

Question 1

AJAX stands for _______ _________ and _______. AJAX makes our applications feel more _________ as data is being communicated between the server and client with ____ _______ ________.

Answer 1

AJAX stands for Asynchronous JavaScript and XML. AJAX makes our applications feel more responsive as data is being communicated between the server and client with no page refresh.

Question 2

AJAX requires:
1)
2)
3)

Answer 2

AJAX requires:

1) An HTML page
2) Javascript to send and receive server data
3) a PHP script to process data on the server

Question 3

Use XMLHttpRequest (XHR) objects to _________.

Answer 3

Use XMLHttpRequest (XHR) objects to interact with servers. The XMLHttpRequest API is the core of Ajax. You can retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just part of a page without disrupting what the user is doing.

Question 4

XMLHttpRequest: The core of AJAX (syntax)

Answer 4

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(e){
console.log(xhr.readyState);
if(xhr.readyState === 4){
console.log(xhr.responseText);// modify or populate html elements based on response.
}
};

xhr. open(“GET”, “path-to-php.php”, true); //true means it is asynchronous // Send variables through the url
xhr. send();

Question 5

Using POST (syntax)

Answer 5

xhr. open(“POST”,”path-to-php.php”,true);
xhr. setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
xhr. send(“fname=Henry&lname=Ford”);

Question 6

responseText treats the returned data as _____ _____ whereas responseXML treats it like an ______ _______.

Answer 6

responseText treats the returned data as raw text whereas responseXML treats it like an XML Document.

Question 7

responseText (syntax)

Answer 7

xmlDoc = xhr.responseXML;

x=xmlDoc.getElementsByTagName(“tag-name”);

Question 8

Developers may use DOM ______ methods on the XML document object to traverse and retrieve values contained in the XML structure.

Name three:

Answer 8

Developers may use DOM traversal methods on the XML document object to traverse and retrieve values contained in the XML structure.

.childNodes property (nodeList)
.nodeValue property
.getAttribute method

Question 9

Using JSON to quickly 0utput a JSON object from PHP, use the following code:

Answer 9

$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($results);

Question 10

If the data returned by the server is in JSON format, Javascript can easily turn this into a native Javascript object using Javascript’s built in function JSON.parse()

Answer 10

var response = JSON.parse(httpRequest.responseText); 
//the variable response is now an object representation of the responseText JSON-formatted string