Content: Introduction to AJAX requests and responses, XMLHttpRequest, AJAX usage in JavaScript, and AJAX usage in jQuery.
AJAX Programming
AJAX stands for Asynchronous JavaScript And XML. It’s not a new programming language but a combination of existing technologies. At its core, AJAX is about making asynchronous requests to a server using HTTP.
1. Asynchronous
Asynchronous means that a program can continue running without waiting for a specific task to complete. In programming, it implies that the execution sequence of a program doesn’t depend on the order of code writing. The advantages of asynchronous programming include improved overall efficiency.
XMLHttpRequest is used to handle AJAX requests asynchronously.
2. XMLHttpRequest
XMLHttpRequest is a built-in browser object used for background communication (data exchange) with a server. It allows partial updates to a web page without refreshing the entire page.
1 | /* Built-in HTTP request object in JavaScript */ |
2.1 Request
Components of an HTTP request and their correspondence with XMLHttpRequest methods:
- Request Line
1 | xhr.open('post', '01.php'); |
- Request Header
1 | xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); |
- Request Body
1 | xhr.send("name=xjj&age=10"); |
Pay attention to the order of these steps.
2.2 Response
Components of an HTTP response and their correspondence with XMLHttpRequest methods or properties:
To handle responses, we need to check and confirm the response status from the server. It’s important to monitor the server’s response status, which may take time due to factors like slow internet speed.
onreadystatechange is an event in JavaScript used to listen to the XMLHttpRequest’s status.
1 | xhr.onreadystatechange = function () { |
readyState:
1 | 0: Request not initialized (open has not been called yet). |
- Get the status line (including status code & status message)
1 | xhr.status // Status code |
1 | xhr.statusText // Status message (e.g., OK) |
- Get the response header
1 | xhr.getResponseHeader('Content-Type'); |
- Get the response body
1 | xhr.responseText |
We need to check the MIME type in the response header to determine whether to use request.responseText
or request.responseXML
.
2.3 API Details
1 | xhr.open() // Initiates the request, can be GET or POST |
3. Compatibility
Regarding compatibility with Internet Explorer (IE), it’s important to understand but may not be necessary for modern web development. For older IE versions, ActiveXObject is required with specific identifiers.
1 | function XHR() { |
4. Encapsulation of AJAX Utility Functions
/**
* Customized AJAX function
*
* @param {Object} options - Configuration options for the AJAX request.
*/
window.$ = {};
$.ajax = function(options) {
if (!options || typeof options !== 'object') {
return false;
}
var type = options.type || 'get';
var url = options.url || location.pathname;
var async = (options.async === false) ? false : true;
var contentType = options.contentType || "text/html";
var data = options.data || {};
var dataStr = '';
for (var key in data) {
dataStr += key + '=' + data[key] + '&';
}
dataStr = dataStr && dataStr.slice(0, -1);
var xhr = new XMLHttpRequest();
xhr.open(type, (type == 'get') ? (url + '?' + dataStr) : url, async);
if (type == 'post') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
xhr.send((type == 'get') ? null : dataStr);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status