NCCUCS 軟體工程概論 Lecture 5: Ajax, Mashups April 29, 2014

NCCU/CS/WebProg Agenda Asynchronous JavaScript and XML – 不必換頁更流暢 Web 2.0 混搭風（ Mashup ） 概念為主、技術細節為輔

A J A X Asynchronous JavaScript And XML Based on the XML HTTP Request (XHR) object created by Microsoft Corp. in 1997 AJAX – term coined by James Garrett in February 2005

A J A X Asynchronous JavaScript And XML Why use AJAX? –To provide a desktop-like user interface for Web Applications –Increased user satisfaction: Improved response time No plug-ins or other special installations on the Browser –Reduces redundant content on the Web

What does Asynchronous Mean? 簡單說 : 不必換頁 就可顯示 新內容

EXAMPLES OF AJAX Gmail ( 傳送中 …) Google search suggest Google Map …

Google Search (Traditional)

Google Suggest (AJAX)

Google Map 放大與縮小 上下左右移動

AJAX Client/Server Interaction

How Ajax Works

Ajax 技術細節請見其他文件 NCCU/CS/WebProg

Web 2.0 and Mashup NCCU/CS/WebProg

Web 1.0 vs. Web 2.0 NCCU/CS/WebProg

Web API Web Services (program-to-program) vs. Web Applications (program-to-user) NCCU/CS/WebProg

Simplest Web API: URL Query Strings

Mashup Originated from pop music. A Mashup is a web application or site that combines data from more than one source into a single integrated tool. Content used in Mashup is typically sourced from a third party via a public interface or so called API Web Mashup = API [1] + API [2] + API [N]

Web Mashup genres  Mapping mashups Google Maps, Yahoo Maps, Microsoft Virtual Earth  Video and photo mashups Flickr, Youtube  Search and Shopping mashups eBay, Amazon  News mashups Diggdot.us= Digg.com + Slashdot.org + Del.icio.us Example:

Mashup (Web 2.0)

Putting everything together Your Mashup = API calls + Data Manipulation + UI User Mashup website User Request Website 1 Website 2 API CallDataAPI Call Data Data presentation Data Manipulation

Writing JavaScript Code to use AJAX Extra slides

Using Ajax Browser support –The XMLHttpRequest object Use it to send request to the server program –Let js call php A JavaScript event-handler (function) to process data from the server –onreadystatechange A server-side program to fulfill the client request var requestObj = new XMLHttpRequest();

Browser Support (for IE) By way of the XMLHttpRequest –W3C standard: –Available in IE 7, but not earlier version of IE function getXMLHttpObject(){ if (window.XMLHttpRequest) return new XMLHttpRequest(); if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP"); alert("Your browser does not support AJAX."); return null; } var requestObj = getXMLHttpObject();

Usage of XMLHttpRequest

Setting Up a Request using XMLHttpRequest GET vs. POST requestObj.open('GET', ' true); requestObj.send(null); Warning: The URL requested must be on the same webserver as the webpage making the request. Accessing a “3rd party domain” using the XMLHttpRequest object is illegal (unless you modify the browser security settings). requestObj.open("POST", "/query.cgi") requestObj.send( ); requestObj.open('GET', “query.cgi?name=Bob”, true); requestObj.send(null); Asynchronous

Set up the Event Handler for Server Data We need to set up an event handler to be called when the server responded. Suppose, for example, we have a function named handleResponse that we want to execute when the web server sends our data. We would assign the handler function to our XMLHttpRequest object as follows: requestObj.onreadystatechange = handleResponse; function handleResponse() { … } // call back function

Responding to the Server Data The event handler will be invoked when the ready state of the XMLHttp request object changes. function handleResponse() { if (requestObj.readyState == 4) if (requestObject.status==200) // process the server data... } // call back function State code

Responding to the Server Data How to know if the server data is available? W3C standard: 0. Unintialized. This is the initial status of your request. 1. Open. This is the status of your request after you call the open method. 2. Sent. Your request has been sent, but no information from the web server has been received. 3. Receiving. Your computer is receiving data, the header information is available for processing but additional data (e.g., the actual file) is still being transferred. 4. Loaded. The transfer has been completed.

Responding to the Server Data, MSIE the readyState for MSIE: –0. Unintialized. This is the initial status of your request. –1. Loading. This is the status of your request after you call the send method. –2. Loaded. Your request has been sent and is awaiting processing on the webserver. –3. Interactive. The webserver is processing your request. –4. Completed. The transfer has been completed.

The Server Data (Result) The result is also stored in the XMLHttpRequest object –A text string or an XML file Parse and display data –requestObj.responseXML DOM-structured object –requestObj.responseText One complete string

An Example: Check whether the user name is already in use. For more examples: Please enter a user name, and we’ll check if it is in use. user name :

<input type="text" id="username" name="username" size="15" onkeyup="check_user_exists(this.value);“ /> Example Code function check_user_exists(str) { if (str.length<4) { document.getElementById(“ajax_msg").innerHTML=""; return; } xmlHttp = getXmlHttpObject(); xmlHttp.onreadystatechange=ajax_handler; xmlHttp.open('GET', 'check_user_exists.php?username='+str); xmlHttp.send(null); } New XMLHttpRequestObject();

More Code function ajax_handler() { if (this.readyState == 4) { if (this.responseText == 'username ok!') document.getElementById(‘ajax_msg’).innerHTML = ‘username ok'; else document.getElementById(‘ajax_msg’).innerHTML = this.responseText; } } <?php // check_user_exists.php require 'user_lib.php'; require 'validate.php'; require 'util.php'; if (check_user_exists($username)) echo ' The username you entered is already in use, please try another '; else echo 'username ok!'; ?>

JSON vs. XML XML is quite heavy weight JSON as an alternative –JavaScript Object Notation Please refer to reference web page on moodle, or another set of slides –Json-slides.pdf