Ajax Course

All Ajax scripts use the XMLHttpRequest object, so it's useful to know the main elements of this object.
The purpose of the XMLHTTPRequest object is to allow JavaScript to formulate HTTP requests and submit them to the server. You can have your page make such calls asynchronously in the background, allowing you to continue using the page without a browser refresh or the loading of a new page.
Before you can use the XMLHttpRequest, you have to create an instance of this object, with the syntax:

var xmlHttp = new XMLHttpRequest();
    - xmlHttp can be any variable name.
XMLHTTPRequest is supported by all modern browsers, and by the main operating systems: Windows, UNIX / Linux and Mac OS, however, its implementation differs from some browsers. Microsoft introduced the XMLHTTPRequest object, implementing it in Internet Explorer 5 (till 7) as an ActiveX object.
Because you don’t know which browser, version, or operating system your users will have, your code must adapt its behavior to ensure that the instance of the object will be created successfully.
- To create the XMLHttpRequest object for all browsers, you can use the following syntax:
var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // XMLHttpRequest object
- The "request" variable contains an instance of the XMLHttpRequest object.

Properties of the XMLHttpRequest object

Methods of the XMLHttpRequest object


• To understand better what you can do with the XMLHttpRequest object, let's see an example.
  1) Create a txt file with a simple text. For example, "test.txt" with the text "Response from the test.txt".
  2) Add the code below into an HTML file, created in the same directory where the file "test.txt" is.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>Test XMLHttpRequest</title>
<script>
// sends data to an external file and return the received response
function makerequest(serverPage, tagID) {
 var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // XMLHttpRequest object

 request.open("GET", serverPage); // define the request
 request.send(null); // sends data

 // Check request status
 // If the response is received completely, will be transfered to the HTML tag with tagID
 request.onreadystatechange = function() {
 if (request.readyState == 4) {
 document.getElementById(tagID).innerHTML = request.responseText;
 }
 }
}
</script>
</head>
<body>

<h5 style="cursor:pointer;" onclick="makerequest('test.txt', 'res')"><u><u>Click</u></u></h5>
<div id="res">Ajax course - coursesweb.net</div>

</body>
</html>
- This code is an HTML document with a JavaScript script that uses the XMLHttpRequest object. It has a <h5> tag in the BODY, used to call the JS script, and a DIV with some text in it.
- When you click on the Click word, the onclick="makerequest('test.txt', 'res')" instruction calls the makerequest() function that will send a request to the "test.txt".
- "onreadystatechange", checks the request status. When the complete response is received (readyState == 4) will be transferred by the property "responseText", with the "getElementById()" in the HTML tag that has the id of "tagID ('res').
- This example will show the following result (click on the word "click" below):
Click
Ajax course - coursesweb.net

The request may be made to files on the server that can process data received and return a response according to that data. This technology is known as AJAX. In the following lessons you can learn more about these things.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which type of <input> creates a date input control, such as a pop-up calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Which CSS property adds shadow effects to the text of an element?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Click on the function that adds new elements to the end of an array.
pop() shift() push()
var pags = ["lessons", "courses"];
pags.push("download", "tutorials");
alert(pags[2]);            // download
Which function sorts an array by key, in ascending order, maintaining key to data correlations?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
XMLHttpRequest object

Last accessed pages

  1. Area and Perimeter Calculator for 2D shapes (8290)
  2. PHP PDO - prepare and execute (8104)
  3. SHA512 Encrypt hash in JavaScript (17277)
  4. innerHTML and outerHTML to Get and Replace HTML content (25925)
  5. JavaScript base64 encode decode (4675)

Popular pages this month

  1. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (232)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (157)
  3. Read Excel file data in PHP - PhpExcelReader (146)
  4. querySelector and querySelectorAll (102)
  5. Wake Up! (101)