Ambil arahan dengan Ajax

Adakah anda ingin membina aplikasi web yang lebih dinamik, responsif, seperti desktop seperti Gmail dan Google Maps? Kemudian artikel ini adalah untuk anda! Ia membimbing anda melalui asas -asas Ajax dan melalui proses membina aplikasi Ajax yang mudah.

Aplikasi itu dinamakan WebConsole, antara muka penyemak imbas untuk melaksanakan arahan sistem yang biasanya anda perlukan akses shell. Terdapat juga contoh pendek menggunakan fungsi AJAX dari dua perpustakaan JavaScript yang popular - JQuery dan Yui.

Dalam artikel ini, yang pertama kali diterbitkan pada tahun 2005 dan baru -baru ini dikemas kini, saya akan menerangkan penciptaan satu fungsi JavaScript yang mudah dan boleh diguna semula untuk membuat permintaan HTTP. Kemudian, saya akan menggunakan fungsi itu dalam penciptaan aplikasi mudah. ​​

Walaupun terdapat beberapa contoh Yui dan jQuery, artikel itu bukan tutorial di perpustakaan Ajax tertentu. Sebaliknya, ia bertujuan untuk memberi anda lebih banyak maklumat mengenai membuat permintaan HTTP, supaya anda berada dalam kedudukan yang lebih baik apabila menilai perpustakaan tersebut atau memutuskan untuk pergi sendiri.

Takeaways Key

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:

Inilah contohnya Contoh ini berfungsi:

<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.

Dalam contoh di atas, kami memerlukan pembolehubah global, http_request, yang boleh diakses oleh fungsi makeRequest () dan alertContents (), yang tidak baik dari segi kebolehgunaan semula dan juga risiko menamakan perlanggaran. Idealnya, MakeReQuest () harus melaksanakan permintaan dan alertContents () hanya harus membentangkan hasilnya; fungsi tidak perlu tahu tentang atau memerlukan yang lain.

inilah kod untuk fungsi permintaan yang boleh diguna semula:

<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 ini menerima tiga parameter:

url untuk mendapatkan

• 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>
}

Anda boleh membuat fungsi dengan mudah lebih banyak boleh diguna semula dengan membenarkan kaedah permintaan HTTP serta sebarang rentetan pertanyaan yang akan diluluskan sebagai parameter ke fungsi dan kemudian digunakan dalam panggilan untuk membuka () dan menghantar () kaedah. Ini juga akan membolehkan anda membuat permintaan pos sebagai tambahan kepada Get yang pada asalnya bertujuan untuk melaksanakan.

Keupayaan lain fungsi adalah pengendalian kod tindak balas selain 200, yang boleh menjadi berguna jika anda ingin menjadi lebih spesifik dan mengambil tindakan yang sesuai bergantung pada jenis kod kejayaan/ralat yang dikembalikan.

Contoh mudah dikaji semula

Sekarang mari kita buat semula contoh sebelumnya di mana kandungan fail test.html adalah amaran () ed. Kali ini, dengan menggunakan fungsi permintaan yang boleh diguna semula baru kami, versi yang disemak semula dari kedua -dua fungsi yang digunakan akan menjadi lebih mudah:

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

seperti yang anda lihat, alertContents () hanyalah penyampaian: tidak ada negeri, siap sedia, atau permintaan HTTP yang terbang di sekitar.

Oleh kerana fungsi-fungsi ini kini hanya satu-liners, kita sebenarnya boleh menyingkirkannya sepenuhnya, dan menukar panggilan fungsi sebaliknya. Jadi keseluruhan contoh akan menjadi:

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>
}

Ya, itu mudah! Lihat contoh dan kod sumber penuh (tersedia melalui sumber pandangan rakan lama kami).

Projek kami: Aplikasi WebConsole

Mengetahui asas -asas Ajax, dan bersenjata dengan cara yang boleh diguna semula untuk membuat permintaan, mari kita pergi lebih mendalam, untuk mencipta sesuatu yang sebenarnya boleh digunakan dalam kehidupan sebenar.

Aplikasi yang akan kami buat akan membolehkan anda melaksanakan sebarang arahan shell pada pelayan web anda, sama ada ia berasaskan Windows- atau Linux. Kami juga akan membuat sedikit usaha CSS dalam usaha untuk membuat aplikasi berasa lebih seperti tetingkap konsol.

antara muka, kita mempunyai satu scrollable

yang mengandungi hasil perintah yang dilaksanakan setakat ini, dan satu di mana kita menaip perintah yang akan dilaksanakan. Kedua -duanya mempunyai latar belakang hitam dan font kurier kelabu. Berikut adalah tangkapan skrin.

html

Berikut adalah bahagian HTML aplikasi:

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

itu sahaja: A

yang akan dikemas kini dengan hasil perintah yang dilaksanakan, dan ke mana kita boleh menaip arahan. Ia adalah antara muka yang bagus, bersih, tanpa gusti

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