Chapter 16 AJAX

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.

What You Should Already Know

Before you continue you should have a basic understanding of the following: HTML / XHTML JavaScript

Asynchronous JavaScript and XML AJAX is not a new programming language, but a technique fo

r 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.

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.

AJAX Uses HTTP Requests In traditional JavaScript coding, if you want to get any information f

rom 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.

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.

AJAX - Browser Support The keystone of AJAX is the XMLHttpReques

t object. Different browsers use different methods to

create the XMLHttpRequest object. Internet Explorer uses an ActiveXObject, w

hile other browsers uses the built-in JavaScript object called XMLHttpRequest.

Examplevar 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);}

XMLHttpRequest onreadystatechange ( 回呼函式指標 )

指的是事件處理器；每個狀態改變時都會觸發的程序，通常是呼叫一個 javascript 函式

open(“method”, “url”, boolean asynch) 建立對 server 的呼叫 method 可為 get, post, or put

send(content) 向伺服器發送請求 ( 觸發 )

Examplefunction 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(); }

} }

說明 readyState

請求的狀態 0: 未初始化 1: 正在載入 2: 已載入 3: 互動中 4: 完成

status 伺服器的 HTTP 狀態碼

200: ok 404: not found

XML Example<?xml version="1.0" encoding="big5"?><mycities> <city> <id>1</id>

<name> 台北 </name> </city> <city> <id>2</id>

<name> 桃園 </name> </city> <city> <id>3</id>

<name> 新竹 </name> </city>...</mycities>

JSP 產生 XML<?xml version="1.0" encoding="big5"?><%@ page contentType="text/xml; charset=big5" language="java" import="java.sql.*" errorPage="" %><jsp:useBean id="ConBean" scope="session" class="com.db.DBCon" /><mycities><% 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()) {%> <city> <id><%=rs.getInt("id")%></id>

<name><%=rs.getString("name")%></name> </city><% } %></mycities>

W3C DOM

DOM 是針對 HTML 及 XML 文件的 API 允許程式動態的存取和更新文件內容 Javascript 適用於存取和處理 DOM 的

語言 文件中每一個元素都是 DOM 的一部份 Javascript 可以存取元素的屬性和方法

DOM 元素常用屬性 childNodes

傳回目前元素所有的子元素陣列 firstChild

傳回目前元素的第一個子元素 lastChild

傳回目前元素的最後一個子元素 nodeValue

元素值

與 XML 有關的 DOM 元素常用方法 getElementById(id)

取得有指定為一 ID 屬性值文件中的元素 getElementByTagName(name)

傳回目前元素中有指定標籤名的子元素的陣列 hasChildNodes()

元素是否有子元素 getAttribute(name)

傳回元素屬性值

動態內容建立時常用的 DOM 屬性與方法

document.createElement(tagname) document.createTextNode(text)

建立一個包含靜態文字的節點 <element>.appendChild(childnode)

增加元素的子節點 <element>.removeChild(childnode) <element>.getAttribute(name) <element>.setAttribute(name, value)

Examplefunction 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); }}