- [Instructor] In the early days of the World Wide Web, requesting data from a server and displaying it on the open web page required reloading the page in the browser. This happened even if part or most of the page was staying the same. To optimize this experience, the XMLHttpRequest object was created. This object is often referred to as the XHR object for short. You create an XHR object to open a request to a remote URL using an HTTP method, such as Get.
When the XHR object was first created, XML was the standard format for exchanging data on the Web. Fortunately, XML is tied to the XHR object in name only, and XHR works with any data format, including JSON. The XHR object includes quite a few properties and methods, but a few particular features are used in most requests. You use the open() method to specify an HTTP verb and a URL to hit. While this method attempts to open a connection with the specified end point, it doesn't actually send the HTTP request.
To do that, you use the send() method. Once a request has been sent, the value of the readyState property indicates the current state of the request, using a number from 0 to 4. A state of 0 indicates that the request has not yet been initialized. 1 indicates that the request has been set up, 2 that it's been sent, 3 that it's in process, and 4 that it's complete. The XHR object also specifies a readystatechange Event.
XHR code commonly listens for this event to fire and then uses a conditional to check if this state is 4, indicating that the request is complete. In this case, code to work with the response is called. XHR requests are an important part of the modern Web. Even if you've never written one, you've likely used one, because the AJAX code in frameworks like Angular and libraries like jQuery is built on top of XHR. These libraries and frameworks include convenience methods that allow you to make XHR calls with a minimum of code and without needing to understand how the requests and responses happen under the hood.
Although almost all browsers in use today support the XHR object, some very old browsers do not, or they use different syntax. Older versions of Internet Explorer, in particular, performed AJAX requests using an ActiveXObject with different versions supporting different ActiveXObject types. We can ensure that our apps are usable to the greatest possible number of users by supporting even ancient browsers, and to do so, it's smart to include fall-back code to create ActiveXObjects for browsers that don't support XHR.
As you might guess, the convenience methods offered by frameworks and libraries include this fall-back code, making these methods extra useful by saving us from needing to write even more code.
- Setting up your environment
- Obtaining API keys
- Working with XMLHttpRequest
- Working with the Fetch API
- Creating an Ajax request in jQuery
- Working with data returned from a jQuery Ajax request
- Creating an Ajax request in AngularJS
- Using an Ajax request with React
- Structuring Ajax requests