What Is Ajax?

Summary

In this video, the concept of Ajax (Asynchronous JavaScript and XML) is explained as a technique used to send and retrieve data in the background without refreshing the entire web page. The tutorial showcases how Ajax enables real-time updates, using Twitter's timeline as an example. It then walks through a practical implementation using jQuery to fetch Instagram images and automatically refresh the feed every 5 seconds. The video also covers common issues like the Same-Origin Policy and how to bypass it using JSONP, providing a comprehensive introduction to Ajax and its use in web development.

Takeaways

• 😀 Ajax stands for Asynchronous JavaScript and XML, and it's a technique, not a library or a server-side tool.
• 😀 Ajax allows web pages to update data without refreshing the entire page, providing a smoother user experience.
• 😀 A real-world example of Ajax in use is Twitter, where new tweets are loaded without refreshing the whole page.
• 😀 Twitter uses Ajax requests to check for new tweets every 10 seconds without reloading the page.
• 😀 The underlying technology for Ajax requests is the XML HTTP request object in JavaScript, which sends requests in the background.
• 😀 In the provided example, an XML HTTP request is instantiated and has methods like open, send, and set headers.
• 😀 When Twitter checks for new tweets, it sends a request to the server with parameters, including the minimum tweet ID to fetch new data.
• 😀 The response from the server comes back as JSON data, which is parsed to update the page content dynamically.
• 😀 Ajax can be implemented in practical web apps like GeoGR, where images are fetched and updated automatically without a page refresh.
• 😀 To handle cross-origin issues, the solution involves using JSONP (JSON with padding), which avoids the same-origin policy restrictions for external data requests.
• 😀 By using jQuery’s getJSON method, Ajax requests can be simplified, and data from APIs like Instagram’s can be pulled into the app asynchronously.

Q & A

What does Ajax stand for, and what does it mean?

Ajax stands for Asynchronous JavaScript and XML. It is a web development technique used to send and retrieve data in the background without refreshing the entire web page.

Is Ajax a library, and how does it work with PHP?

No, Ajax is not a library. It is a technique for making asynchronous HTTP requests via JavaScript, often using the XMLHttpRequest object. It is not specifically tied to PHP, though it can be used with PHP to handle server-side operations.

What is a real-world example of Ajax in action?

An example of Ajax is Twitter's timeline update. When new tweets are available, Twitter requests updated data in the background without refreshing the entire page. The new content (e.g., the 'new tweets' bar) is dynamically updated using Ajax.

How does the XMLHttpRequest object function in Ajax?

The XMLHttpRequest object allows JavaScript to make HTTP requests in the background. It has methods like open, send, and set headers, which facilitate communication with the server, enabling dynamic updates on a web page without reloading it.

What does the 'new tweets bar HTML' key in the response data contain?

The 'new tweets bar HTML' key contains the HTML code for the 'new tweets' bar, which is then dynamically inserted into the page, updating the displayed content without a full page reload.

How does Twitter use Ajax to keep the timeline updated?

Twitter uses Ajax to periodically send HTTP requests (every 10 seconds) to check for new tweets. The data is returned as JSON, and the page content is dynamically updated with new tweet information without refreshing the page.

How can Ajax be applied in a practical web application, such as the 'geogr' example?

In the 'geogr' example, Ajax can be used to refresh the Instagram feed automatically without requiring a page reload. By making periodic requests to Instagram's API and updating the feed with new images every 5 seconds, Ajax enables dynamic content updating.

What issue arises when making Ajax requests to a different domain, like Instagram's API from localhost?

The issue is caused by the same-origin policy, which prevents Ajax requests from different domains. This restriction can be bypassed by using JSONP, which returns the data wrapped in a callback function, allowing it to bypass the same-origin policy.

What is JSONP, and how does it help solve the same-origin policy issue?

JSONP (JSON with Padding) is a technique that allows the browser to load data from a different domain by wrapping the response in a callback function. This approach does not use XMLHttpRequest, so the same-origin policy does not apply.

How does jQuery simplify making Ajax requests in the example?

jQuery simplifies Ajax requests by providing methods like 'getJson,' which abstract away the complexity of using the XMLHttpRequest object directly. It also handles cross-domain requests like JSONP more easily and provides methods for manipulating DOM elements to update the page dynamically.