background preloader

AJAX

Facebook Twitter

Using XMLHttpRequest. In this guide, we'll take a look at how to use XMLHttpRequest to issue HTTP requests in order to exchange data between the web site and a server.

Using XMLHttpRequest

Examples of both common and more obscure use cases for XMLHttpRequest are included. To send an HTTP request, create an XMLHttpRequest object, open a URL, and send the request. After the transaction completes, the object will contain useful information such as the response body and the HTTP status of the result. function reqListener () { console.log(this.responseText);} var oReq = new XMLHttpRequest(); oReq.addEventListener("load", reqListener); oReq.open("GET", " oReq.send(); Types of requests A request made via XMLHttpRequest can fetch the data in one of two ways, asynchronously or synchronously. Note: Starting with Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.

Handling responses. XMLHttpRequest. Use XMLHttpRequest (XHR) objects to interact with servers.

XMLHttpRequest

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. XMLHttpRequest is used heavily in Ajax programming. Despite its name, XMLHttpRequest can be used to retrieve any type of data, not just XML, and it supports protocols other than HTTP (including file and ftp). If your communication needs involve receiving event or message data from the server, consider using server-sent events through the EventSource interface. XMLHttpRequest. Abstract The XMLHttpRequest specification defines an API that provides scripted client functionality for transferring data between a client and a server.

XMLHttpRequest

Status of this Document This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at. Ajax Quick Start FAQ. Introduction.

Ajax Quick Start FAQ

Instant AJAX Tutorial. Learn AJAX in 20 minutes. Here is a quick overview and example of AJAX in action.

Learn AJAX in 20 minutes

Before you begin, this example will only work in FireFox work in FireFox and IE7. You’ll have to change few things in the JavaScript for it to work in IE6. To download the files used below click here. If you don’t have PHP/Apache installed, follow the tutorial I made to install it. The example below assumes you know the basics of PHP, you can learn as you go along if you don’t. Rasmus' 30 second AJAX Tutorial. Shoutbox als AJAX-Anwendung. Using the XML HTTP Request object. This article was originally written in April 2002, I've decided to fix and update it as the objects finally seem to be getting some popularity.

Using the XML HTTP Request object

The 2002 version is still available, as are the September 2004 and August 2005 versions. This version January 2006. Internet Explorer on Windows, Safari on Mac OS-X, Mozilla on all platforms, Konqueror in KDE, IceBrowser on Java, and Opera on all platforms including Symbian provide a method for client side javascript to make HTTP requests. From the humble begins as an oddly named object with few admirers, it's blossomed to be the core technology in something called AJAX [ 1 ]. The Object makes many things easier and neater than they other would be, and introduces some things that were otherwise impossible such as HEAD requests to see when a resource was last modified, or to see if it even exists.

Why HTTP Request object? Creating the object. Ajax Lessons. Take Command with Ajax [JavaScript & Ajax Tutorials] Do you want to build more dynamic, responsive, desktop-like web applications like Gmail and Google Maps?

Take Command with Ajax [JavaScript & Ajax Tutorials]

Then this article is for you! It guides you through the Ajax basics and through the process of building a simple Ajax application. That application is named WebConsole, a browser interface for executing system commands for which you’d usually need shell access. There are also short examples of using the Ajax functionality of two popular JavaScript libraries – jQuery and YUI. In this article, first published in 2005 and recently updated, I’ll explain the creation of one simple, reusable JavaScript function for making HTTP requests.

Although there are some YUI and jQuery examples, the article is not a tutorial on a specific Ajax library. A Simple HTTP Request Example. AJAX: Usable Interactivity with Remote Scripting [JavaScript & A. OnreadystatechangeForm() triggers sentForm() to re-write the Web page and inform the user that the ecard was either successfully or unsuccessfully sent, depending upon the data returned from the server: function sentForm() { var body = document.getElementsByTagName("body")[0]; body.innerHTML = "<h1>Send someone an e-card from ExampleCo!

AJAX: Usable Interactivity with Remote Scripting [JavaScript & A

</h1>"; if (formRequester.responseText == "success") { body.innerHTML += "<h1>Send someone an e-card from ExampleCo! </h1><p>Your ExampleCo e-card has been sent! </p>"; } else { body.innerHTML += "<p>There was an error while sending your ExampleCo e-card. </p>"; } return true; } This removes the initial form presented to the user, and inserts a final status message: While this application re-writes almost the whole page, it's easy to see how specific parts of the DOM could be changed using remote scripting, which would enable separate parts of an application interface to update independently of the Web page itself.

AJAX Tutorial.