Chapter 11
This presentation is the property of its rightful owner.
Sponsored Links
1 / 22

Ajax PowerPoint PPT Presentation


  • 91 Views
  • Uploaded on
  • Presentation posted in: General

Chapter 11. Ajax. รูปแบบการส่งข้อมูลของเว็บ. แบบ Synchronous คือ การ ส่งข้อมูล จาก Browser ไป ประมวลผลที่เว็บ Server โดยที่ ต้องรอให้ เว็บ Server ทำการประมวลผลจน เสร็จก่อน ค่อยส่ง ข้อมูล กลับไปให้ Browser

Download Presentation

Ajax

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Chapter 11

Chapter 11

Ajax


Ajax

รูปแบบการส่งข้อมูลของเว็บ

  • แบบ Synchronousคือ การส่งข้อมูลจาก Browser ไปประมวลผลที่เว็บ Server โดยที่ ต้องรอให้ เว็บ Server ทำการประมวลผลจนเสร็จก่อน ค่อยส่งข้อมูลกลับไปให้ Browser

  • แบบ Asynchronousคือ การส่งข้อมูลที่ตรงกันข้ามกับ synchronous กล่าวคือ Browser ส่งข้อมูลไปประมวลผลยัง เว็บ Server แล้วเว็บ Server ทำการประมวลผลแล้วส่งกับมาที่เว็บ Client โดยไม่ต้องรอให้ประมวลผลจนเสร็จ


Synchronous

ปัญหาการส่งข้อมูลแบบ Synchronous

  • เมื่อมีการเปลี่ยนแปลงข้อมูลเพียงบางส่วนบนเว็บเพ็จ จะต้องรีโหลดเว็บเพ็จใหม่ทั้งหน้า

  • การรอหน้าเว็บเพ็จตอบกลับจาก Server ไม่สามารถทำงานอย่างอื่นขนานกันไปได้


Ajax

รูปแบบการส่งข้อมูลของเว็บ

Asynchronous

Synchronous

Client

Server

Client

Server

User Action

User Action

HTTP Request

HTTP Request

wait

Screen Reload

HTTP Respond

HTTP Respond

Data Update

Data Update


Ajax

Ajax คืออะไร

  • Ajax ย่อมาจากAsynchronous JavaScript and XML

  • Ajax คือ ชุดคำสั่งเพื่อใช้ในการรับและส่งข้อมูลกับ Server แบบ Asynchronous

  • Ajax ถูกคิดค้นโดย Jesse James Garrett ในปี 2548


Ajax

สถาปัตยกรรมเว็บที่ไม่ใช้ และใช้ Ajax

Client-side

Client-side

User Interface

User Interface

JavaScript: send()

text, HTML, JSON

Ajax Engine

  • HTTP Respond

    text, HTML, JSON

HTTP Respond

text, HTML

HTTP request

HTTP request

Server-side

Server-side

Web Server

Web Server

Backend Processing:

database, business process

Backend Processing:

database, business process

เว็บที่ใช้ Ajax

เว็บที่ไม่ใช้ Ajax


Ajax

ขั้นตอนการสร้างเว็บที่มีการใช้ Ajax

  • สร้างส่วนที่เป็นโค้ด html

    • กำหนด eventให้กับแท็กที่จะกระตุ้นให้เริ่มส่งข้อมูลแบบ asynchronous

    • กำหนดจุดแสดงผลเมื่อได้รับการตอบกลับ

  • สร้างส่วนที่เป็นโค้ด JavaScipt

    • เขียนฟังก์ชั่นสำหรับใช้ในการส่งข้อมูล

    • เขียนฟังก์ชั่นสำหรับใช้ในการรับข้อมูล

  • สร้างส่วนที่เป็นโค้ด PHP ซึ่งทำหน้าที่คอยรับและส่งข้อมูลที่ฝั่ง server


Ajax

<html><head><meta charset="utf-8">

<script>

functionsend() {

request = newXMLHttpRequest();

request.onreadystatechange = showResult;

vara = document.getElementById("a").value;

varb = document.getElementById("b").value;

varurl= "add.php?a=" + a + "&b=" + b;

request.open("GET", url, true);

request.send(null);

}

functionshowResult() {

if (request.readyState == 4) {

if (request.status == 200)

document.getElementById("result").innerHTML = request.responseText;

}

}

</script></head>

<body>

a = <input type="text" id="a"><br>

b = <input type="text" id="b" onkeyup="send()"><br>

<span id="result"></span>

</body></html>

Client-side

10

5

ผลลัพธ์คือ 15

add.php?a=10&b=5

Ajax Engine

showResult()

เมื่อมีการกรอกตัวเลขที่ช่องนี้จะเรียกฟังก์ชัน send()

<b>ผลลัพธ์</b> คือ 15

แสดงผลลัพธ์ที่จุดนี้

Server-side

add.php

<?php

$a = $_GET["a"];

$b = $_GET["b"];

echo "<b>ผลลัพธ์</b>คือ ";

echo $a + $b;

?>

Web Server

add.php


Xmlhttprequest

XMLHttpRequest

  • XMLHttpRequestคือ Ajax Engine บน JavaScript ที่ใช้ในการติดต่อสื่อสารระหว่าง Browser กับ Server

  • สามารถแลกเปลี่ยนข้อมูลได้หลากหลายรูปแบบ ได้แก่ text, html, json, xml

  • ทำงานบนมาตรฐาน HTTP ที่มีอยู่แล้ว


Event property xmlhttprequest

Event และ Property ของ XMLHttpRequest


Xmlhttprequest1

ฟังก์ชันของ XMLHttpRequest


Property readystate

ค่าของ Property: readyState

0 – การร้องขอยังไม่ถูกกำหนดขึ้น

1 – การร้องขอได้ถูกกำหนดขึ้นแล้ว

2 – การร้องขอได้ถูกส่งไป

3 – การร้องขอกำลังทำงานอยู่

4 – การร้องขอได้เสร็จสิ้นการทำงานแล้ว


Property status

ค่าของ Property: status


Ajax

กิจกรรม

  • จงเขียนเว็บในการบันทึกการขายผลไม้ โดยแบ่งการทำงานออกเป็นสองฝั่ง ได้แก่ ฝั่งเซิร์ฟเวอร์ ทำหน้าที่คำนวณค่ายอดรวม ซึ่งเขียนด้วยภาษา PHP ส่วนฝั่งไคลเอนต์เขียนด้วยภาษา HTML และ JavaScript+Ajax ทำหน้าที่รับค่าจำนวนผลไม้แต่ละชนิดขายได้ส่งไปยังเซิร์ฟเวอร์ และนำผลลัพธ์มาแสดงผลโดยไม่มีการรีโหลดหน้าเว็บใหม่


Ajax

การตรวจสอบชื่อผู้ใช้ด้วย Ajax

  • การลงทะเบียนที่มีการกรอกชื่อผู้ใช้ จะถูกตรวจสอบว่า username ซ้ำกันเมื่อมีการคลิกปุ่มส่งข้อมูลแล้ว แต่การใช้ Ajax จะช่วยตรวจสอบหลังจากที่กรอก username เสร็จได้เลย โดยไม่ต้องรอพิมพ์ให้ครบ


Ajax

ฟอร์ม HTML

  • <form>

    • <h1>Please register:</h1>

    • Username:<input id="username" type="text" onblur="checkUsername()"><br>

    • First Name:<input type="text" name="firstname"><br>

    • LastName:<input type="text" name="lastname"><br>

    • Email:<input type="text" name="email"><br>

    • <input type="submit" value="Register">

  • </form>

เมื่อมีการกรอกชื่อผู้ใช้เสร็จแล้วไปยังช่องถัดไปจะเรียกฟังก์ชัน checkUsername


Ajax

ฟังก์ชันส่งและรับข้อมูล

<script>

functioncheckUsername() {

document.getElementById("username").className = "thinking";

request = newXMLHttpRequest();

request.onreadystatechange= showUsernameStatus;

varusername = document.getElementById("username").value;

varurl = "checkName.php?username=" + username;

request.open("GET", url, true);

request.send(null);

}

functionshowUsernameStatus() {

if(request.readyState == 4) {

if(request.status == 200) {

if(request.responseText == "okay") {

document.getElementById("username").className = "approved";

} else {

document.getElementById("username").className = "denied";

document.getElementById("username").focus();

document.getElementById("username").select();

}

}

}

}

</script>

แสดงภาพตรงช่อง username ว่ากำลังตรวจสอบ

กำหนดฟังก์ชั่นที่ต้องการให้ทำงาน เมื่อมีการเปลี่ยนแปลงสถานะ

ดึงค่า username ส่งไปยัง Server

กำหนดตำแหน่งสคริป phpที่จะให้รับข้อมูล พร้อมกับส่งข้อมูลชื่อผู้ใช้ไปด้วย

ถ้าค่าที่ตอบกลับเป็นคำว่า okay จะกำหนดคลาสให้ textfieldชื่อ approved


Ajax

CSS สำหรับแสดงสถานะ

#username {

padding: 0 20px 0 2px;

}

.thinking {

background: white url('img/checking.gif') no-repeat;

background-position: 150px 1px;

}

.approved {

background: white url('img/true.gif') no-repeat;

background-position: 150px 1px;

}

.denied {

background: #FF8282 url('img/false.gif') no-repeat;

background-position: 150px 1px;

}


Ajax

PHP ที่คอยรับและส่งข้อมูล

checkName.php

<?php

$takenUsernames = array ('bill', 'ted');

sleep(2);

if (!in_array( $_GET['username'], $takenUsernames )) {

echo 'okay';

} else {

echo 'denied';

}

?>

username ที่มีอยู่แล้ว

ให้หยุดรอ 2 วินาที เพื่อจำลองว่ามีการตรวจสอบอยู่

ถ้ามี username แล้ว

ส่งคำว่า okay กลับไป


Ajax

การค้นหาข้อมูลจากฐานข้อมูลด้วย Ajax

<html>

<head>

<meta charset="utf-8">

<script>

function send() {

request = newXMLHttpRequest();

request.onreadystatechange = showResult;

var keyword = document.getElementById("keyword").value;

varurl= "productTable.php?keyword=" + keyword;

request.open("GET", url, true);

request.send(null);

}

functionshowResult() {

if(request.readyState == 4) {

if(request.status == 200)

document.getElementById("result").innerHTML = request.responseText;

}

}

</script>

</head>

<body>

<input type="text" id="keyword" onkeyup="send()">

<div id="result"></div>

</body>

</html>


Ajax

การค้นหาข้อมูลจากฐานข้อมูลด้วย Ajax

  • <?php

  • $keyword = $_GET["keyword"];

  • $conn = mysql_connect("localhost", "root", "1234");

  • if ($conn) {

  • mysql_select_db("blueshop");

  • mysql_query("SET NAMES utf8");

  • } else {

  • echo mysql_errno();

  • }

  • $sql = "SELECT * FROM product WHERE product_name LIKE '%$keyword%'";

  • $objQuery = mysql_query($sql);

  • ?>

  • <table border="1">

    • <?phpwhile($row = mysql_fetch_array($objQuery)): ?>

    • <tr>

    • <td><a href="productDetail.php?pid=<?phpecho $row["product_id"]?>"><?phpecho $row["product_name"]?></a></td>

    • <td><?phpecho $row["product_detail"]?></td>

    • <td><imgsrc="img/<?phpecho $row["product_id"] ?>.png" width="100"></td>

    • <td><?phpecho $row["product_price"]?>บาท</td>

    • <td><a href="cart.php?productId=<?phpecho $row["product_id"]?>&action=add">สั่งซื้อ</a>

    • </tr>

    • <?phpendwhile;?>

  • </table>


Ajax

กิจกรรม

  • จงเขียนเว็บสำหรับค้นหาข้อมูลสมาชิกจากตาราง member โดยใช้ Ajax


  • Login