AJAX membolehkan penciptaan aplikasi web yang dinamik, responsif yang serupa dengan Gmail dan Peta Google dengan mengendalikan permintaan HTTP dalam pelayar.
Tutorial memperkenalkan fungsi JavaScript yang boleh diguna semula untuk membuat permintaan HTTP, yang boleh digunakan di pelbagai aplikasi tanpa bergantung pada perpustakaan tertentu seperti JQuery atau Yui.
• Contoh mudah menunjukkan langkah -langkah asas membuat permintaan HTTP: Membuat objek XMLHTTPREQUEST, memberikan fungsi panggil balik, dan menghantar permintaan.
• Artikel memperkenalkan aplikasi webconsole, membolehkan pelaksanaan perintah sisi pelayan melalui antara muka penyemak imbas, menggambarkan penggunaan Ajax praktikal.
• Kebimbangan keselamatan diketengahkan, menekankan pentingnya menyekat perintah yang boleh dilaksanakan dan sanitasi input untuk mengelakkan akses pelayan yang tidak dibenarkan.
• Tutorial meliputi topik lanjutan, termasuk mengendalikan format data yang berbeza seperti XML dan JSON, dan mengintegrasikan Ajax dengan perpustakaan JavaScript yang popular untuk fungsi yang dipertingkatkan.
Contoh permintaan HTTP yang mudah

Mari kita semak semula aliran membuat permintaan HTTP di JavaScript, dan mengendalikan respons. Ini hanya satu contoh yang cepat untuk menyegarkan ingatan anda. Untuk semua butiran pedas, lihat artikel pengenalan SitePoint, "Ajax: Interaktiviti yang boleh digunakan dengan skrip jauh."

Terdapat tiga langkah asas:

Buat objek XMLHTTPREQUEST.

berikan fungsi panggil balik untuk mengendalikan respons HTTP.

membuat (hantar) permintaan.

Mari kita lihat contoh di mana kita akan meminta dokumen HTML yang mudah, test.html, yang hanya mengandungi teks "Saya ujian." Kami kemudiannya akan memberi amaran () kandungan fail test.html:

<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
 ? if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
 ? ? ? http_request = new XMLHttpRequest(); <br>
 ? } else if (window.ActiveXObject) { // IE6 and older <br>
 ? ? ? http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
 ? } <br>
 ? http_request.onreadystatechange = alertContents; <br>
 ? http_request.open('GET', url, true); <br>
 ? http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
 ? if (http_request.readyState == 4) { <br>
 ? ? ? if (http_request.status == 200) { <br>
 ? ? ? ? ? alert(http_request.responseText); <br>
 ? ? ? } else { <br>
 ? ? ? ? ? alert('There was a problem with the request.'); <br>
 ? ? ? } <br>
 ? } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
 ? makeRequest('test.html'); <br>
} <br>
 <br>
</script>

1. Pengguna mengklik butang "Buat Permintaan".


2. ini memanggil fungsi makeRequest () dengan parameter: nama fail HTML dalam direktori yang sama. Dalam kes ini, ia adalah test.html.


3. Permintaan dihantar.


4. kebakaran acara OnreadyStateChange dan pelaksanaannya diluluskan kepada AlertContents ().


5. AlertContents () memeriksa jika respons diterima dan, jika tidak apa -apa, maka amaran () s kandungan fail test.html.

Uji contoh untuk diri sendiri, dan lihat fail ujian.

Masalah

Contoh di atas bekerja dengan baik, tetapi ada satu perkara yang perlu kita tingkatkan sebelum kita bersedia untuk masa perdana. Penambahbaikannya adalah untuk mengodkan fungsi permintaan yang boleh diguna semula yang mengendalikan semua penciptaan objek yang membosankan dan berulang-ulang, sambil meninggalkan bahagian penyampaian ke fungsi lain, yang merupakan permintaan-agnostik dan berurusan dengan hasilnya sahaja, tanpa mengira sumbernya.

<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
 ? if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
 ? ? ? http_request = new XMLHttpRequest(); <br>
 ? } else if (window.ActiveXObject) { // IE6 and older <br>
 ? ? ? http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
 ? } <br>
 ? http_request.onreadystatechange = alertContents; <br>
 ? http_request.open('GET', url, true); <br>
 ? http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
 ? if (http_request.readyState == 4) { <br>
 ? ? ? if (http_request.status == 200) { <br>
 ? ? ? ? ? alert(http_request.responseText); <br>
 ? ? ? } else { <br>
 ? ? ? ? ? alert('There was a problem with the request.'); <br>
 ? ? ? } <br>
 ? } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
 ? makeRequest('test.html'); <br>
} <br>
 <br>
</script>

• fungsi untuk dipanggil apabila respons diterima
• bendera jika fungsi panggil balik mengharapkan dokumen XML (benar) atau teks biasa (palsu, lalai)
Fungsi ini bergantung pada dua keupayaan JavaScript untuk membungkus dan mengasingkan objek permintaan dengan baik. Yang pertama adalah keupayaan untuk menentukan fungsi baru (dipanggil fungsi tanpa nama) dengan cepat, seperti ini:

http_request.onreadyStateChange = function () {...}

Trik lain adalah keupayaan untuk menggunakan fungsi panggil balik tanpa mengetahui nama mereka terlebih dahulu; Contohnya:

Perhatikan bagaimana nama fungsi panggil balik diluluskan tanpa sebarang petikan.

function makeHttpRequest(url, callback_function, return_xml) <br>
{ <br>
 ?var http_request, response, i; <br>
 <br>
 ?var activex_ids = [ <br>
 ? ?'MSXML2.XMLHTTP.3.0', <br>
 ? ?'MSXML2.XMLHTTP', <br>
 ? ?'Microsoft.XMLHTTP' <br>
 ?]; <br>
 <br>
 ?if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... <br>
 ? ?http_request = new XMLHttpRequest(); <br>
 ? ?if (http_request.overrideMimeType) { <br>
 ? ? ?http_request.overrideMimeType('text/xml'); <br>
 ? ?} <br>
 ?} else if (window.ActiveXObject) { // IE6 and older <br>
 ? ?for (i = 0; i < activex_ids.length; i++) { <br>
 ? ? ?try { <br>
 ? ? ? ?http_request = new ActiveXObject(activex_ids[i]); <br>
 ? ? ?} catch (e) {} <br>
 ? ?} <br>
 ?} <br>
 <br>
 ?if (!http_request) { <br>
 ? ?alert('Unfortunately your browser doesn't support this feature.'); <br>
 ? ?return false; <br>
 ?} <br>
 <br>
 ?http_request.onreadystatechange = function() { <br>
 ? ?if (http_request.readyState !== 4) { <br>
 ? ? ? ?// not ready yet <br>
 ? ? ? ?return; <br>
 ? ?} <br>
 ? ?if (http_request.status !== 200) { <br>
 ? ? ?// ready, but not OK <br>
 ? ? ?alert('There was a problem with the request.(Code: ' + http_request.status + ')'); <br>
 ? ? ?return; <br>
 ? ?} <br>
 ? ?if (return_xml) { <br>
 ? ? ?response = http_request.responseXML; <br>
 ? ?} else { <br>
 ? ? ?response = http_request.responseText; <br>
 ? ?} <br>
 ? ?// invoke the callback <br>
 ? ?callback_function(response); <br>
 ?}; <br>
 <br>
 ?http_request.open('GET', url, true); <br>
 ?http_request.send(null); <br>
}

<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
 ? if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
 ? ? ? http_request = new XMLHttpRequest(); <br>
 ? } else if (window.ActiveXObject) { // IE6 and older <br>
 ? ? ? http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
 ? } <br>
 ? http_request.onreadystatechange = alertContents; <br>
 ? http_request.open('GET', url, true); <br>
 ? http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
 ? if (http_request.readyState == 4) { <br>
 ? ? ? if (http_request.status == 200) { <br>
 ? ? ? ? ? alert(http_request.responseText); <br>
 ? ? ? } else { <br>
 ? ? ? ? ? alert('There was a problem with the request.'); <br>
 ? ? ? } <br>
 ? } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
 ? makeRequest('test.html'); <br>
} <br>
 <br>
</script>

function makeHttpRequest(url, callback_function, return_xml) <br>
{ <br>
 ?var http_request, response, i; <br>
 <br>
 ?var activex_ids = [ <br>
 ? ?'MSXML2.XMLHTTP.3.0', <br>
 ? ?'MSXML2.XMLHTTP', <br>
 ? ?'Microsoft.XMLHTTP' <br>
 ?]; <br>
 <br>
 ?if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... <br>
 ? ?http_request = new XMLHttpRequest(); <br>
 ? ?if (http_request.overrideMimeType) { <br>
 ? ? ?http_request.overrideMimeType('text/xml'); <br>
 ? ?} <br>
 ?} else if (window.ActiveXObject) { // IE6 and older <br>
 ? ?for (i = 0; i < activex_ids.length; i++) { <br>
 ? ? ?try { <br>
 ? ? ? ?http_request = new ActiveXObject(activex_ids[i]); <br>
 ? ? ?} catch (e) {} <br>
 ? ?} <br>
 ?} <br>
 <br>
 ?if (!http_request) { <br>
 ? ?alert('Unfortunately your browser doesn't support this feature.'); <br>
 ? ?return false; <br>
 ?} <br>
 <br>
 ?http_request.onreadystatechange = function() { <br>
 ? ?if (http_request.readyState !== 4) { <br>
 ? ? ? ?// not ready yet <br>
 ? ? ? ?return; <br>
 ? ?} <br>
 ? ?if (http_request.status !== 200) { <br>
 ? ? ?// ready, but not OK <br>
 ? ? ?alert('There was a problem with the request.(Code: ' + http_request.status + ')'); <br>
 ? ? ?return; <br>
 ? ?} <br>
 ? ?if (return_xml) { <br>
 ? ? ?response = http_request.responseXML; <br>
 ? ?} else { <br>
 ? ? ?response = http_request.responseText; <br>
 ? ?} <br>
 ? ?// invoke the callback <br>
 ? ?callback_function(response); <br>
 ?}; <br>
 <br>
 ?http_request.open('GET', url, true); <br>
 ?http_request.send(null); <br>
}

var callmeback = alert;<br>
callmeback('test'); // alerts 'test'

Atas ialah kandungan terperinci Ambil arahan dengan Ajax. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!