Chapter 9 Ajax Asynchronous Java Script and XML

รปแบบการสงขอมลบนอนเทอร เนต Asynchronous Synchronous Client User Action Server HTT Client User Action P Re

สถาปตยกรรมเวบทไมใช และใช Ajax Client-side User Interface Java. Script: send() text, HTML, JSON Ajax Engine

<html><head><meta charset="utf-8"> <script> var http. Request; function send() { http. Request = new XMLHttp.

ฟอรม HTML เมอผใชกรอก username เสรจ และไปยงชอง ถดไป ฟงกชน check. Username จะถกทำงาน <form> <h 1>Please

ฟงกชนสงและรบขอมล <script> var xml. Http; function check. Username() { document. get. Element. By. Id("username").

CSS สำหรบแสดงสถานะ. thinking { background: white url("img/checking. gif") no-repeat; background-position: 150 px 1 px;

Slides: 18

Download presentation

Chapter 9 Ajax Asynchronous Java. Script and XML Theerayut Thongkrau

รปแบบการสงขอมลบนอนเทอร เนต Asynchronous Synchronous Client User Action Server HTT Client User Action P Re ques t Server HTT P Re ques t wait Screen Reload d Data Update d espon R HTTP Data Update 3

สถาปตยกรรมเวบทไมใช และใช Ajax Client-side User Interface Java. Script: send() text, HTML, JSON Ajax Engine (Java. Script) HTTP request HTTP respond text, HTML, JSON Web Server Backend Processing: database, business process Server-side เวบทไมใช Ajax เวบ ทใช Ajax 6

<html><head><meta charset="utf-8"> <script> var http. Request; function send() { http. Request = new XMLHttp. Request(); http. Request. onreadystatechange = show. Result; Client-side var a = document. get. Element. By. Id("a"). value; var b = document. get. Element. By. Id("b"). value; var url= "add. php? a=" + a + "&b=" + b; } 10 5 ผลลพธ http. Request. open("GET", url); http. Request. send(); คอ 15 add. php? a=10&b=5 ดงผลลพธจาก Server function show. Result() { if (http. Request. ready. State == 4 && http. Request. status == 200) { document. get. Element. By. Id("result"). inner. HTML = http. Request. response. Text; } เมอมการกรอกตวเลข } ทชองนจะเรยกฟ </script></head> งกชน send() <body> a = <input type="text" id="a"> b = <input type="text" id="b" onkeyup="send()"> <span id="result"></span> </body></html> กำหนดจดทจ ะใหแสดงผลลพธ ready. State 1 2 4 3 0 <? php $a = $_GET["a"]; $b = $_GET["b"]; echo "<b>ผลลพธ ; " echo $a + $b; ? > sho Ajax Engine <b>ผลลพธ คอ 15 add. php </b> คอ w. R es Web Server-side ult() </b>

ฟอรม HTML เมอผใชกรอก username เสรจ และไปยงชอง ถดไป ฟงกชน check. Username จะถกทำงาน <form> <h 1>Please register: </h 1> Username: <input id="username" type="text" onblur="check. Username()"> First Name: <input type="text" name="firstname"> Last. Name: <input type="text" name="lastname"> Email: <input type="text" name="email"> <input type="submit" value="Register"> </form> 15

ฟงกชนสงและรบขอมล <script> var xml. Http; function check. Username() { document. get. Element. By. Id("username"). class. Name = "thinking"; แสดงภาพตรงชอง username วากำลงตรวจสอบ กำหนดฟงกชนทตองการใหทำงาน xml. Http = new XMLHttp. Request(); xml. Http. onreadystatechange = show. Username. Status; เมอมการเปลยนแปลงสถานะ ดงคา username จากฟอรม { var username = document. get. Element. By. Id("username"). value; var url = "check. Name. php? username=" + username; กำหนดตำแหนงสครป xml. Http. open("GET", url); ทจะใหรบขอมล xml. Http. send(); php พรอมกบแนบชอผใชไปดวย function show. Username. Status() { if (xml. Http. ready. State == 4 && xml. Http. status == 200) { if (xml. Http. response. Text == "okay") { document. get. Element. By. Id("username"). class. Name = "approved"; } else { document. get. Element. By. Id("username"). class. Name = "denied"; document. get. Element. By. Id("username"). focus(); document. get. Element. By. Id("username"). select(); { { { </script> ถาคาทตอบกลบเปนคำวา okay จะกำหนดคลาสให textfield ชอ approved 16

CSS สำหรบแสดงสถานะ. thinking { background: white url("img/checking. gif") no-repeat; background-position: 150 px 1 px; {. approved { background: white url("img/true. gif") no-repeat; background-position: 150 px 1 px; {. denied { background: #FF 8282 url("img/false. gif") no-repeat; background-position: 150 px 1 px; { 17