AJAX Asynchronous Javascript And XML Teguh S XMLHttp

  • Slides: 11
Download presentation
AJAX (Asynchronous Javascript And XML) Teguh S

AJAX (Asynchronous Javascript And XML) Teguh S

XMLHttp. Request • XMLHttp. Request is heart of AJAX • XMLHttp. Request is an

XMLHttp. Request • XMLHttp. Request is heart of AJAX • XMLHttp. Request is an API available in web browser scripting languages such as Java. Script. 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.

Sejarah XMLHttp. Request • Developers of Outlook Web Access (by Microsoft) for Microsoft Exchange

Sejarah XMLHttp. Request • 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 ns. IXMLHttp. Request 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 Java. Script, yg mereka sebut sebagai XMLHttp. Request. • Obyek XMLHttp. Request 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 XMLHttp. Request telah menjadi standar de facto pada sebagai besar aplikasi web clients. • Diimplementasikan pada Safari 1. 2 yg direlease pada. February 2004, Konqueror, Opera 8. 0 direlease pada April 2005, dan i. Cab 3. 0 b 352 direlease pada September 2005.

Obyek XMLHttp. Request • Untuk web browser (IE 7+, Firefox, Chrome, Safari, and Opera)

Obyek XMLHttp. Request • Untuk web browser (IE 7+, Firefox, Chrome, Safari, and Opera) telah dilengkapi obyek XMLHttp. Request. • Sintaks untuk menciptakan obyek XMLHttp. Request: xmlhttp=new XMLHttp. Request(); • Untuk web browser Internet Explorer (IE 5 and IE 6) menggunakan Active. XObject: xmlhttp=new Active. XObject("Microsoft. XMLHTTP");

Prinsip Kerja Ajax

Prinsip Kerja Ajax

Beberapa Metode XMLHttp. Request • • • open() set. Request. Header() send() onreadystatechange() response.

Beberapa Metode XMLHttp. Request • • • open() set. Request. Header() send() onreadystatechange() response. Text response. XML

Metode open() • Metode ini digunakan untuk merumuskan sebuah request • Metode ini memiliki

Metode open() • Metode ini digunakan untuk merumuskan sebuah request • Metode ini memiliki 5 parameter open( Method, URL, Asynchronous, User. Name, 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.

The set. Request. Header method • Metode ini digunakan untuk menentukan spesifikasi request tambahan

The set. Request. Header method • Metode ini digunakan untuk menentukan spesifikasi request tambahan yg akan dikirimkan • Bentuk umum metodenya: set. Request. Header( Name, Value )

The send method • Metode ini digunakan untuk mengirimkan request ke server yg dituju.

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

The onreadystatechange event listener • • • If the open method of the XMLHttp.

The onreadystatechange event listener • • • If the open method of the XMLHttp. Request 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 ready. State property of the XMLHttp. Request object. State changes work like this: After the open method has been invoked successfully, the ready. State property of the XMLHttp. Request object should be assigned a value of 1. After the send method has been invoked and the HTTP response headers have been received, the ready. State property of the XMLHttp. Request object should be assigned a value of 2. Once the HTTP response content begins to load, the ready. State property of the XMLHttp. Request object should be assigned a value of 3. Once the HTTP response content has finished loading, the ready. State property of the XMLHttp. Request object should be assigned a value of 4.

The HTTP response • After a successful and completed call to the send method

The HTTP response • After a successful and completed call to the send method of the XMLHttp. Request, 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 response. XML property of the XMLHttp. Request object will contain a DOM document object. • Another property, response. Text 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.