AJAX dan PHP
AJAX digunakan untuk mencipta aplikasi yang lebih interaktif.
Contoh PHP AJAX
Contoh berikut akan menunjukkan cara halaman web berkomunikasi dengan pelayan web apabila pengguna menaip aksara dalam kotak input :
Contoh
Cuba masukkan nama dalam kotak input, seperti: Anna:
Nama:
Nilai pulangan:
Penjelasan contoh - halaman HTML
Apabila pengguna menaip aksara dalam kotak input di atas, fungsi "showHint()" akan dilaksanakan. Fungsi ini dicetuskan oleh peristiwa "onkeyup":
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行的代码
xmlhttp=new XMLHttpRequest();
}
else
{
//IE6, IE5 浏览器执行的代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p><b>在输入框中输入一个姓名:</b></p>
<form>
姓名: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>返回值: <span id="txtHint"></span></p>
</body>
</html>Penjelasan kod sumber:
Jika kotak input kosong (str.length==0), ini fungsi akan Kosongkan kandungan pemegang tempat txtHint dan keluar dari fungsi.
Jika kotak input tidak kosong, maka showHint() akan melaksanakan langkah berikut:
1) Cipta objek XMLHttpRequest
2) Cipta fungsi untuk dilaksanakan apabila respons pelayan sedia
3) Hantar permintaan kepada fail pada pelayan
4) Sila beri perhatian kepada parameter (q) yang ditambahkan pada hujung URL (mengandungi kandungan kotak input)
Nota: Banyak pengetahuan tentang JavaScript digunakan dalam contoh di atas Sila rujuk bab ini dahulu: Tutorial JavaScript
Fail PHP
Halaman pelayan yang dipanggil di atas melalui JavaScript ialah fail PHP bernama "gethint.php".
Kod sumber dalam "gethint.php" menyemak tatasusunan nama dan mengembalikan nama yang sepadan kepada penyemak imbas:
<?php
// 将姓名填充到数组中
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
//从请求URL地址中获取 q 参数
$q=$_GET["q"];
//查找是否由匹配值， 如果 q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// 如果没有匹配值设置输出为 "no suggestion"
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//输出返回值
echo $response;
?>Penjelasan: Jika JavaScript menghantar sebarang teks (mis. strlen($q) > 0), kemudian:
1 Cari nama yang sepadan dengan aksara yang dihantar oleh JavaScript
2 Jika tiada padanan ditemui, rentetan akan dibalas. tiada cadangan"
3. Jika satu atau lebih nama yang sepadan ditemui, tetapkan rentetan respons dengan semua nama
4. Hantar respons kepada pemegang tempat "txtHint"
Ringkasan: Format Html Kembali
HTML terdiri daripada beberapa teks biasa. Jika pelayan menghantar HTML melalui XMLHttpRequest, teks akan disimpan dalam sifat responseText.
Tidak perlu membaca data daripada sifat responseText. Ia sudah dalam format yang dikehendaki dan boleh dimasukkan terus ke dalam halaman.
Cara paling mudah untuk memasukkan kod HTML adalah dengan mengemas kini sifat innerHTML elemen ini.
Kelebihan:
Kod HTML yang dihantar daripada pelayan tidak perlu dihuraikan oleh JavaScript di sebelah penyemak imbas.
HTML boleh dibaca.
Blok kod HTML dipasangkan dengan atribut innerHTML untuk kecekapan tinggi.
Kelemahan:
Jika anda perlu mengemas kini berbilang bahagian dokumen melalui AJAX, HTML tidak sesuai
innerHTML bukan standard DOM.
Penyelesaian masalah merentas domain PHP Ajax
Jika permintaan tak segerak anda perlu merentas domain, anda boleh menyemak: Penyelesaian masalah merentas domain PHP Ajax.
![Projek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Kursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutorial bahagian hadapan WEB [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Aplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
