1. Chapter 16 AJAX

2. Introduction AJAX stands for Asynchronous JavaScript And XML. AJAX is a type of programming made popular in 2005 by Google (with Google Suggest). AJAX is not a new programming language, but a new way to use existing standards. With AJAX you can create better, faster, and more user-friendly web applications. AJAX is based on JavaScript and HTTP requests.

3. What You Should Already Know Before you continue you should have a basic understanding of the following: HTML / XHTML JavaScript

4. Asynchronous JavaScript and XML AJAX is not a new programming language, but a technique for creating better, faster, and more interactive web applications. With AJAX, your JavaScript can communicate directly with the server, using the JavaScript XMLHttpRequest object. With this object, your JavaScript can trade data with a web server, without reloading the page. AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages. The AJAX technique makes Internet applications smaller, faster and more user-friendly.

5. AJAX is Based on Web Standards AJAX is based on the following web standards: JavaScript XML HTML CSS The web standards used in AJAX are well defined, and supported by all major browsers. AJAX applications are browser and platform independent.

6. AJAX Uses HTTP Requests In traditional JavaScript coding, if you want to get any information from a database or a file on the server, or send user information to a server, you will have to make an HTML form and GET or POST data to the server. The user will have to click the "Submit" button to send/get the information, wait for the server to respond, then a new page will load with the results. Because the server returns a new page each time the user submits input, traditional web applications can run slowly and tend to be less user-friendly. With AJAX, your JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object With an HTTP request, a web page can make a request to, and get a response from a web server - without reloading the page. The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background.

7. The XMLHttpRequest Object By using the XMLHttpRequest object, a web developer can update a page with data from the server after the page has loaded! The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7.

8. AJAX - Browser Support The keystone of AJAX is the XMLHttpRequest object. Different browsers use different methods to create the XMLHttpRequest object. Internet Explorer uses an ActiveXObject, while other browsers uses the built-in JavaScript object called XMLHttpRequest.

9. Example var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } function doSearchCity() { var queryString = createCityQueryString(); createXMLHttpRequest(); xmlHttp.onreadystatechange = handleStateChange; xmlHttp.open("GET", queryString, true); xmlHttp.send(null); }

10. XMLHttpRequest onreadystatechange ( 回呼函式指標 ) 指的是事件處理器；每個狀態改變時都會觸 發的程序，通常是呼叫一個 javascript 函式 open( “ method ”, “ url ”, boolean asynch) 建立對 server 的呼叫 method 可為 get, post, or put send(content) 向伺服器發送請求 ( 觸發 )

11. Example function createCityQueryString() { var id=document.getElementById("state").value; var queryString="xml_city.jsp?" + "sid=" + id; return queryString; } function handleStateChange() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { updateCity(); }

12. 說明 readyState 請求的狀態 0: 未初始化 1: 正在載入 2: 已載入 3: 互動中 4: 完成 status 伺服器的 HTTP 狀態碼 200: ok 404: not found

13. XML Example 1 台北 2 桃園 3 新竹...

14. JSP 產生 XML <% Connection con = ConBean.getConnection(); PreparedStatement stmt = null; ResultSet rs = null; String sid = request.getParameter("sid"); stmt = con.prepareStatement("select * from city where sid=?"); stmt.setString(1,sid); rs = stmt.executeQuery(); while (rs.next()) { %> <% } %>

15. W3C DOM DOM 是針對 HTML 及 XML 文件的 API 允許程式動態的存取和更新文件內容 Javascript 適用於存取和處理 DOM 的語言 文件中每一個元素都是 DOM 的一部份 Javascript 可以存取元素的屬性和方法

16. DOM 元素常用屬性 childNodes 傳回目前元素所有的子元素陣列 firstChild 傳回目前元素的第一個子元素 lastChild 傳回目前元素的最後一個子元素 nodeValue 元素值

17. 與 XML 有關的 DOM 元素常用方法 getElementById(id) 取得有指定為一 ID 屬性值文件中的元素 getElementByTagName(name) 傳回目前元素中有指定標籤名的子元素的陣列 hasChildNodes() 元素是否有子元素 getAttribute(name) 傳回元素屬性值

18. 動態內容建立時常用的 DOM 屬性與方法 document.createElement(tagname) document.createTextNode(text) 建立一個包含靜態文字的節點.appendChild(childnode) 增加元素的子節點.removeChild(childnode).getAttribute(name).setAttribute(name, value)

19. Example function updateCity() { clearCityList(); var c = document.getElementById("city"); var results = xmlHttp.responseXML.getElementsByTagName("city"); var option = null; var id; var city; option = document.createElement("option"); option.setAttribute("value","0"); option.appendChild(document.createTextNode(" 請選擇 ")); c.appendChild(option); for (var i=0;i<results.length;i++) { id = results[i].getElementsByTagName("id")[0].childNodes[0].nodeValue; city = results[i].getElementsByTagName( “ name")[0].childNodes[0].nodeValue; option = document.createElement("option"); option.setAttribute("value",id); option.appendChild(document.createTextNode(city)); c.appendChild(option); }