chapter 11
Download
Skip this Video
Download Presentation
Ajax

Loading in 2 Seconds...

play fullscreen
1 / 22

Ajax - PowerPoint PPT Presentation


  • 130 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Ajax' - jonny


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
slide2
รูปแบบการส่งข้อมูลของเว็บ
  • แบบ Synchronousคือ การส่งข้อมูลจาก Browser ไปประมวลผลที่เว็บ Server โดยที่ ต้องรอให้ เว็บ Server ทำการประมวลผลจนเสร็จก่อน ค่อยส่งข้อมูลกลับไปให้ Browser
  • แบบ Asynchronousคือ การส่งข้อมูลที่ตรงกันข้ามกับ synchronous กล่าวคือ Browser ส่งข้อมูลไปประมวลผลยัง เว็บ Server แล้วเว็บ Server ทำการประมวลผลแล้วส่งกับมาที่เว็บ Client โดยไม่ต้องรอให้ประมวลผลจนเสร็จ
synchronous
ปัญหาการส่งข้อมูลแบบ Synchronous
  • เมื่อมีการเปลี่ยนแปลงข้อมูลเพียงบางส่วนบนเว็บเพ็จ จะต้องรีโหลดเว็บเพ็จใหม่ทั้งหน้า
  • การรอหน้าเว็บเพ็จตอบกลับจาก Server ไม่สามารถทำงานอย่างอื่นขนานกันไปได้
slide4
รูปแบบการส่งข้อมูลของเว็บ

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

slide5
Ajax คืออะไร
  • Ajax ย่อมาจากAsynchronous JavaScript and XML
  • Ajax คือ ชุดคำสั่งเพื่อใช้ในการรับและส่งข้อมูลกับ Server แบบ Asynchronous
  • Ajax ถูกคิดค้นโดย Jesse James Garrett ในปี 2548
slide6
สถาปัตยกรรมเว็บที่ไม่ใช้ และใช้ 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

slide7
ขั้นตอนการสร้างเว็บที่มีการใช้ Ajax
  • สร้างส่วนที่เป็นโค้ด html
    • กำหนด eventให้กับแท็กที่จะกระตุ้นให้เริ่มส่งข้อมูลแบบ asynchronous
    • กำหนดจุดแสดงผลเมื่อได้รับการตอบกลับ
  • สร้างส่วนที่เป็นโค้ด JavaScipt
    • เขียนฟังก์ชั่นสำหรับใช้ในการส่งข้อมูล
    • เขียนฟังก์ชั่นสำหรับใช้ในการรับข้อมูล
  • สร้างส่วนที่เป็นโค้ด PHP ซึ่งทำหน้าที่คอยรับและส่งข้อมูลที่ฝั่ง server
slide8

a =

b =

Client-side

10

5

ผลลัพธ์คือ 15

add.php?a=10&b=5

Ajax Engine

showResult()

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

ผลลัพธ์ คือ 15

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

Server-side

add.php

$a = $_GET["a"];

$b = $_GET["b"];

echo "ผลลัพธ์คือ ";

echo $a + $b;

?>

Web Server

add.php

xmlhttprequest
XMLHttpRequest
  • XMLHttpRequestคือ Ajax Engine บน JavaScript ที่ใช้ในการติดต่อสื่อสารระหว่าง Browser กับ Server
  • สามารถแลกเปลี่ยนข้อมูลได้หลากหลายรูปแบบ ได้แก่ text, html, json, xml
  • ทำงานบนมาตรฐาน HTTP ที่มีอยู่แล้ว
property readystate
ค่าของ Property: readyState

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

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

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

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

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

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

    • Username:
    • First Name:
    • LastName:
    • Email:

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

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

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

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

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

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

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

slide18
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;

}

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

checkName.php

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

sleep(2);

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

echo 'okay';

} else {

echo 'denied';

}

?>

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

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

ถ้ามี username แล้ว

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

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

slide21
การค้นหาข้อมูลจากฐานข้อมูลด้วย Ajax
  • $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);
  • ?>
  • ">.png" width="100">บาท&action=add">สั่งซื้อ
slide22
กิจกรรม
  • จงเขียนเว็บสำหรับค้นหาข้อมูลสมาชิกจากตาราง member โดยใช้ Ajax
ad