›
›

Bài giảng Phát triển ứng dụng web - Bài 4: PHP Ajax - Nguyễn Hữu Thể

Download
PHÁT TRIỂN ỨNG DỤNG WEB  
Bài 4:  
PHP Ajax  
Nguyễn Hữu Thể  
1
AJAX  
➢ AJAX is about updating parts of a web page, without  
reloading the whole page.  
− AJAX = Asynchronous JavaScript and XML.  
2
AJAX  
− Web page can communicate with a web server while a user  
type characters in an input field  
3
<html>  
<head>  
<script>  
function showHint(str) {  
if (str.length == 0) {  
AJAX - Example  
document.getElementById("txtHint").innerHTML = "";  
return;  
} else {  
var xmlhttp = new XMLHttpRequest();  
xmlhttp.onreadystatechange = function() {  
if (this.readyState == 4 && this.status == 200) {  
document.getElementById("txtHint").innerHTML = this.responseText;  
}
};  
xmlhttp.open("GET", "gethint.php?q=" + str, true);  
xmlhttp.send();  
}
}
</script>  
</head>  
<body>  
<p><b>Start typing a name in the input field below:</b></p>  
<form>  
First name: <input type="text" onkeyup="showHint(this.value)">  
</form>  
<p>Suggestions: <span id="txtHint"></span></p>  
</body>  
</html>  
// get the q parameter from URL  
$q = $_REQUEST["q"];  
gethint.php  
$hint = "";  
// lookup all hints from array if $q is  
different from ""  
if ($q !== "") {  
<?php  
$a[] = "Petunia";  
// Array with names $a[] = "Amanda";  
$a[] = "Anna";  
$a[] = "Brittany";  
$a[] = "Cinderella"; $a[] = "Doris";  
$q = strtolower($q);  
$len=strlen($q);  
foreach($a as $name) {  
$a[] = "Raquel";  
$a[] = "Cindy";  
if (stristr($q, substr($name, 0, $len))) {  
$a[] = "Diana";  
$a[] = "Eva";  
$a[] = "Eve";  
if ($hint === "") {  
$hint = $name;  
} else {  
$a[] = "Evita";  
$a[] = "Sunniva";  
$a[] = "Tove";  
$a[] = "Unni";  
$a[] = "Violet";  
$a[] = "Liza";  
$a[] = "Elizabeth";  
$a[] = "Ellen";  
$a[] = "Wenche";  
$a[] = "Vicky";  
$a[] = "Fiona";  
$a[] = "Gunda";  
$a[] = "Hege";  
$a[] = "Inga";  
$a[] = "Johanna";  
$a[] = "Kitty";  
$a[] = "Linda";  
$a[] = "Nina";  
$a[] = "Ophelia";  
$hint .= ", $name";  
}
}
}
}
// Output "no suggestion" if no hint was  
found or output correct values  
echo $hint === "" ? "no suggestion" : $hint;  
?>  
AJAX Database  
− AJAX can be used for interactive communication with a database.  
✓ The database table we use in the example above looks like this:  
id FirstName LastName Age Hometown Job  
1 Peter  
2 Lois  
Griffin  
Griffin  
41 Quahog  
40 Newport  
Brewery  
Piano Teacher  
Police Officer  
Pilot  
3 Joseph  
4 Glenn  
Swanson 39 Quahog  
Quagmire 41 Quahog  
✓ Fetch information from a database with AJAX  
6
<html>  
<head>  
<script>  
ajax_database.php  
function showUser(str) {  
if (str == "") {  
document.getElementById("txtHint").innerHTML = "";  
return;  
} else {  
if (window.XMLHttpRequest) {  
// code for IE7+, Firefox, Chrome, Opera, Safari  
xmlhttp = new XMLHttpRequest();  
} else {  
// code for IE6, IE5  
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  
}
xmlhttp.onreadystatechange = function() {  
if (this.readyState == 4 && this.status == 200) {  
document.getElementById("txtHint").innerHTML = this.responseText;  
}
};  
xmlhttp.open("GET","getuser.php?q="+str,true);  
xmlhttp.send();  
}
}
</script>  
</head>  
…
<body>  
<form>  
<select name="users" onchange="showUser(this.value)">  
<option value="">Select a person:</option>  
<option value="1">Peter Griffin</option>  
<option value="2">Lois Griffin</option>  
<option value="3">Joseph Swanson</option>  
<option value="4">Glenn Quagmire</option>  
</select>  
</form>  
<br>  
<div id="txtHint"><b>Person info will be listed here...</b></div>  
</body>  
</html>  
8
Note: When a user selects a person in the dropdown list above, a function called "showUser()" is executed  
getuser.php  
<!DOCTYPE html>  
<html>  
<head>  
<style>  
table {  
width: 100%;  
border-collapse: collapse;  
}
table, td, th {  
border: 1px solid black;  
padding: 5px;  
}
th {text-align: left;}  
</style>  
</head>  
<body>  
…
…
<?php  
$q = intval($_GET['q']);  
$con = mysqli_connect('localhost’,root','abc123','my_db');  
if (!$con) { die('Could not connect: ' . mysqli_error($con)); }  
mysqli_select_db($con,"ajax_demo");  
$sql="SELECT * FROM user WHERE id = '".$q."'";  
$result = mysqli_query($con,$sql);  
echo "<table>  
<tr>  
<th>Firstname</th><th>Lastname</th><th>Age</th> <th>Hometown</th> <th>Job</th>  
</tr>";  
while($row = mysqli_fetch_array($result)) {  
echo "<tr>";  
echo "<td>" . $row['FirstName'] . "</td>";  
echo "<td>" . $row['LastName'] . "</td>";  
echo "<td>" . $row['Age'] . "</td>";  
echo "<td>" . $row['Hometown'] . "</td>";  
echo "<td>" . $row['Job'] . "</td>";  
echo "</tr>";  
}
echo "</table>";  
mysqli_close($con);  
?>  
</body>  
</
html
>  
pdf 10 trang baolam 10/05/2022 5620
Download
Bạn đang xem tài liệu "Bài giảng Phát triển ứng dụng web - Bài 4: PHP Ajax - Nguyễn Hữu Thể", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

File đính kèm:

  • pdfbai_giang_phat_trien_ung_dung_web_bai_4_php_ajax_nguyen_huu.pdf