Scribd
Upload
6 views30 pages

Web08 Ajax

Uploaded by

Anh Phi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views30 pages

Web08 Ajax

Uploaded by

Anh Phi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

WEB DESIGN

HienLTH – KhietLTN Web Design 1


PHP & Ajax

MSc. Luong Tran Ngoc Khiet

HienLTH – KhietLTN Web Design 2


Content

• Introduce
• AJAX's work
• XMLHttpRequest object
• PHP & jQuery Ajax
• The illustrative examples

HienLTH – KhietLTN Web Design 3


Ajax – questioned

HienLTH – KhietLTN Web Design 4


Ajax – questioned

Server

Trang web
New
Submit page
Reload

How to change the content without


having to reload the full page?

HienLTH – KhietLTN Web Design 5


If using Ajax

Server

javascript
Update
Response
Trang web

HienLTH – KhietLTN Web Design 6


AJAX

• AJAX: Asynchronous JavaScript And XML


• AJAX is not a new language but a new way of
using existing languages.
• AJAX helps us to create faster, more
convenient, and more user-friendly web pages.
• Ajax brings together many technologies with its
own strengths to create a new power.

HienLTH – KhietLTN Web Design 7


AJAX
• It is the technology of web browser. Independent of web
server.
• Use JavaScript to send and receive data between client and
server.
• AJAX is based on components:
– XHTML + CSS for presentation
– DOM for dynamic and interactive rendering
– XML + XSLT for data transformation and manipulation
– XMLHttpRequest for accessing and receiving data
– JavaScript serves as the binder for the above components
• AJAX sử dụng XML và HttpRequest

HienLTH – KhietLTN Web Design 8


AJAX – Features

• Advantages:
– Content updates do not need to reload the entire
page.
– Reduce server processing work.
– Easy to learn and use.
• Disadvantages:
– Functions Back and Bookmark (Favorites) browser is
disabled.
– Force to use JavaScript → There are security related
issues.

HienLTH – KhietLTN Web Design 9


The traditional model
Browser client
• The traditional Web model User interface
works in a way
– Most user actions on the UI will HTTP request
be bound by an HTTP request
HTML + CSS
and sent back to the server
– Server executes operations:
Web Server
queries DB, executes
processing ... Datastore, backend
processing…
– Return results to the client in
Server-side system
HTML + CSS format
HienLTH – KhietLTN Web Design 10
The traditional model

• This approach has many drawbacks, especially the


interaction between the user and the web application
– Each step performed, the user has to wait
– User sees the application "trip back" server
Client
User User User
activity activity activity

Time

System processing System processing

HienLTH – KhietLTN Web Design 11


AJAX – Operation model

• AJAX performs interaction with the


server using the XMLHttpRequest
object, receives the result as XML (or
text, JSON, ...) and parses the result
with the DOM model.

• Interaction between AJAX and the UI is


done through JavaScript and HTML +
CSS code

HienLTH – KhietLTN Web Design 12


Ajax model
• Each user action usually makes an HTTP request which is
the form of a JavaScript call to the Ajax engine
Client
User activity Browser UI

Client -side Ajax


processing
engine

Time

System processing System processing System processing


Server

HienLTH – KhietLTN Web Design 13


AJAX - Compare with
traditional web application

Traditional Web Web uses AJAX


HienLTH – KhietLTN Web Design 14
jQuery Ajax

• $(selector).load(URL,data,callback);
• $.get(URL,callback);
• $.post(URL,data,callback);
• $.ajax(args);
Trong đó:
– url: trang xử lý
– type: một trong hai phương thức POST/GET
– dataType: kiểu dữ liệu trả về: json, xml, script hoặc text
– async: true/false
– success : là hàm xử lý kết quả trả về
– error: hàm xử lý lỗi
HienLTH – KhietLTN Web Design 15
EG1: Get the hour

HienLTH – KhietLTN Web Design 16


EG1: Get the hour

HienLTH – KhietLTN Web Design 17


EG2 - AJAX Database

Table: hoa

HienLTH – KhietLTN Web Design 18


EG 2 - AJAX Database (tt)
<html>
<head>
<script source = “ChonHoa.js”></script>
</head>
<body>
Loại hoa:
<select name="cboLoaiHoa" id="cboLoaiHoa" >
<?php
include ("DataProvider.php");
$kq = DataProvider::ExecuteQuery("SELECT * FROM loaihoa");
while($r = mysqli_fetch_array($kq))
{
echo "<option value={$r['MaLoai']}>
{$r['TenLoai']}
</option>";
}
?>
</select>
<div id="txtDSHoa"></div>
</body>
</html>
HienLTH – KhietLTN Web Design 19
EG 2 - AJAX Database

$(document).ready(function(e) {
$("#cboLoaiHoa").change(function(e) {
$.ajax({
url: "LayHoa.php?MaLoai=" + $(this).val(),
type:"GET",
success: function(data){
$("#txtDSHoa").html(data);
}
});
});
});

HienLTH – KhietLTN Web Design 20


EG 2 - AJAX Database

<?php
include("DataProvider.php");
$ma = $_REQUEST['MaLoai'];
$kq = DataProvider::ExecuteQuery("SELECT * FROM hoa WHERE MaLoai = '{$ma}'");
echo "<table border='1'>
<tr>
<td>Tên hoa</td><td>Đơn giá</td>
</tr>";
while($r = mysqli_fetch_array($kq))
{
echo "<tr>
<td>{$r['TenHoa']}</td><td>{$r['GiaBan']}</td>
</tr>";
}
echo "</table>";
?>

HienLTH – KhietLTN Web Design 21


EG3 – jQuery Ajax

Nhập tên: <input name="txtSearch" id="txtSearch"


type="text" placeholder="Input keyword here..." />
<input name="btnTim" id="btnTim" type="button"
value="Search" />
<div id="divKetQua">
</div>

HienLTH – KhietLTN Web Design 22


EG 3 – jQuery Ajax

HienLTH – KhietLTN Web Design 23


EG3 – jQuery Ajax
<?php
include_once("DataProvider.php");
if(isset($_REQUEST['Keyword']))
{
$data = "%".$_REQUEST['Keyword']."%";
$sql = "SELECT * FROM hoa WHERE TenHoa LIKE '$data'";
$rows = DataProvider::ExecuteQuery($sql);
}
if(mysqli_num_rows($rows) == 0)
echo "Không có hoa nào!!!";
else
{
foreach($rows as $row)
{
echo $row["MaHoa"]." - ".$row["TenHoa"]." - ".$row["GiaBan"]."<br>";
}
}
?>
HienLTH – KhietLTN Web Design 24
EG3 – jQuery Ajax (tt)
• Result

HienLTH – KhietLTN Web Design 25


JSON

HienLTH – KhietLTN Web Design 26


References

• http://www.w3schools.com/ajax
• http://api.jquery.com/jquery.ajax
• http://labs.jonsuh.com/jquery-ajax-php-
json/

HienLTH – KhietLTN Web Design 27


Q&A

HIENLTH - FIT of HCMUP


HienLTH – KhietLTN Web Design 28
THE END

HIENLTH - FIT of HCMUP


HienLTH – KhietLTN Web Design 29
Thank you!!!

HienLTH – KhietLTN Web Design 30

You might also like