AJAX (Asynchronous Javascript And XML)

Presentasi berjudul: "AJAX (Asynchronous Javascript And XML)"— Transcript presentasi:

1 AJAX (Asynchronous Javascript And XML)
Teguh S

2 XMLHttpRequest XMLHttpRequest is heart of AJAX
XMLHttpRequest is an API available in web browser scripting languages such as JavaScript. It is used to send HTTP or HTTPS requests directly to a web server and load the server response data directly back into the script The data might be received from the server as JSON, XML, HTML, or as plain text. Examples of these web applications include Gmail, Google Maps, Facebook and many others.

3 Sejarah XMLHttpRequest
Developers of Outlook Web Access (by Microsoft) for Microsoft Exchange Server 2000 menciptakan sebuah interface yg disebut IXMLHTTPRequest, The Mozilla project mengembangkan sebuah antarmuka yg disebut nsIXMLHttpRequest ke dalam the Gecko layout engine. Interface ini dimodelkan untuk bisa bekerja lebih dekat dengan IXMLHTTPRequest. Mozilla menciptakan sebuah wrapper untuk menggunakan antarmuka ini dengan obyek JavaScript, yg mereka sebut sebagai XMLHttpRequest. Obyek XMLHttpRequest telah dapat dibunakan pada Gecko version 0.6 released on December 6 of 2000, dan disempurnakan pada Gecko versi 1.0 yg di-release pada 5 Juni 2002. Obyek XMLHttpRequest telah menjadi standar de facto pada sebagai besar aplikasi web clients. Diimplementasikan pada Safari 1.2 yg direlease padaFebruary 2004, Konqueror, Opera 8.0 direlease pada April 2005, dan iCab 3.0b352 direlease pada September 2005.

4 Obyek XMLHttpRequest Untuk web browser (IE7+, Firefox, Chrome, Safari, and Opera) telah dilengkapi obyek XMLHttpRequest. Sintaks untuk menciptakan obyek XMLHttpRequest: xmlhttp=new XMLHttpRequest(); Untuk web browser Internet Explorer (IE5 and IE6) menggunakan ActiveXObject: xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

5 Prinsip Kerja Ajax

6 Beberapa Metode XMLHttpRequest
open() setRequestHeader() send() onreadystatechange() responseText responseXML

7 Metode open() Metode ini digunakan untuk merumuskan sebuah request
Metode ini memiliki 5 parameter open( Method, URL, Asynchronous, UserName, Password ) Parameter pertama method yg digunakan untuk menentukan metode request: GET, POST, PUT, DELETE, dll Parameter URL, untuk menentukan lokasi aplikasi server yg dituju (di-request) Parameter ketiga, menentukan Asynchronuous/Synchronuous : true atau false Parameter User & Password, untuk menentukan spesifikasi user & password untuk mengakses server tersebut.

8 The setRequestHeader method
Metode ini digunakan untuk menentukan spesifikasi request tambahan yg akan dikirimkan Bentuk umum metodenya: setRequestHeader( Name, Value )

9 The send method Metode ini digunakan untuk mengirimkan request ke server yg dituju. Bentuk umumnya: send( Data ) Jika metode request : GET => send (null)

10 The onreadystatechange event listener
If the open method of the XMLHttpRequest object was invoked with the third parameter set to true for an asynchronous request, the onreadystatechange event listener will be automatically invoked for each of the following actions that change the readyState property of the XMLHttpRequest object. State changes work like this: After the open method has been invoked successfully, the readyState property of the XMLHttpRequest object should be assigned a value of 1. After the send method has been invoked and the HTTP response headers have been received, the readyState property of the XMLHttpRequest object should be assigned a value of 2. Once the HTTP response content begins to load, the readyState property of the XMLHttpRequest object should be assigned a value of 3. Once the HTTP response content has finished loading, the readyState property of the XMLHttpRequest object should be assigned a value of 4.

11 The HTTP response After a successful and completed call to the send method of the XMLHttpRequest, if the server response was valid XML and the Content-Type header sent by the server is understood by the user agent as an Internet media type for XML, the responseXML property of the XMLHttpRequest object will contain a DOM document object. Another property, responseText will contain the response of the server in plain text by a conforming user agent, regardless of whether or not it was understood as XML.