Saya memulakan artikel ini atas permintaan pemula yang baru mula menguasai JS/jQuery dan, lambat laun, berhadapan dengan masalah cara menggunakan teknologi Ajax dalam amalan. Dalam bahagian ini, saya akan cuba dalam bahasa mudah ( Biarkan ini tidak mengelirukan pengguna lanjutan) terangkan cara menggunakan "helah" ini menggunakan perpustakaan jQuery dalam projek anda.

Jadi... jQuery mempunyai beberapa kaedah yang membuat permintaan ke bahagian pelayan tapak tanpa memuat semula halaman. Kami tidak akan melihat setiap kaedah secara berasingan "di bawah mikroskop", atas sebab mudah bahawa mereka semua dilucutkan fungsi kaedah $.ajax(). Mula-mula, mari kita lihat kod di bawah, dan kemudian kita akan melihatnya dengan lebih terperinci:

HTML ( fail index.html)

Laman halaman sejuk Klik saya!

Dalam fail ini kami telah menyambungkan perpustakaan jQuery, fail dengan kod JS kami, butang (id="btn"), apabila diklik, permintaan ajax akan dilancarkan dan blok (id="output"), di mana kami akan mengeluarkan hasil operasi permintaan ajax

JS/jQuery ( fail script.js)

$(function())( var output = $("#output"); // blok output maklumat $("#btn").on("klik", function())( $.ajax(( url: " path/ to/handler.php", // laluan ke jenis pengendali php: "POST", // kaedah pemindahan data dataType: "json", // jenis data yang dijangkakan dalam data respons: (kunci: 1), // data, yang kami pindahkan ke pelayan sebelumHantar: function())( // Fungsi dipanggil sebelum menghantar permintaan output.text("Permintaan telah dihantar. Tunggu respons."); error: function( req, teks, ralat)( // menjejaki ralat semasa menyelesaikan permintaan ajax output.text("Houston, Kami menghadapi masalah! " + teks + " | " + ralat); complete: function())( // fungsi dipanggil apabila permintaan selesai output.append("

Permintaan telah selesai sepenuhnya!

"); ), success: function(json)( // fungsi yang akan dipanggil jika permintaan kepada pelayan berjaya // json - pembolehubah yang mengandungi data tindak balas daripada pelayan. Panggil apa sahaja yang anda suka;) output.html (json); // memaparkan data yang diterima daripada pelayan pada halaman ) ));

Saya segera mengulas tentang kod ini, jadi tiada soalan khas harus timbul. Satu-satunya perkara yang saya ingin ambil perhatian untuk peminat copy-paste ialah anda perlu menentukan laluan sebenar kepada pengendali dalam parameter url. Dan satu lagi perkara - dalam contoh kita menghantar data yang dimasukkan secara manual (kunci "kunci" dengan nilai "1"), tetapi dalam projek sebenar, data ini diambil dari beberapa sumber, tetapi kita akan membincangkannya kemudian.

pengendali PHP ( pengendali fail.php)

Tujuan fail time.php adalah untuk memaparkan masa semasa pada skrin.

Muat turun fail sumber contoh (16.6 kb):

Contoh 2: Mengemas kini kandungan secara dinamik berdasarkan pemilihan pengguna

Program yang memuatkan kandungan secara dinamik mengikut budi bicara pengguna.

Kandungan fail index.html.

Halaman manakah yang anda ingin buka?

$(document).ready(function())( $("#btn1").klik(function())( $.ajax(( url: "page1.html", cache: false, success: function(html) ($ ("#content").html(html); )); $("#btn2").klik(function())( $.ajax(( url: "page2.html", cache: false, success : function(html)( $("#content").html(html); ) ));

Dalam badan dokumen, borang telah dibuat yang mempunyai dua butang di mana pengguna memilih kandungan yang dikehendaki. Dan bekas untuk memuatkan kandungan.

Acara klik pada butang "Halaman 1" dikendalikan oleh fungsi $("#btn1").click() dan acara klik pada butang "Halaman 2" diproses oleh $("#btn2"). fungsi klik().

Kandungan fail page1.html dan page2.html, yang dimuatkan secara dinamik ke dalam kawasan kandungan, ialah halaman HTML ringkas atau fail teks yang mengandungi kandungan.

Muat turun fail sumber contoh (18.4 kb):

Contoh 3: Menghantar data ke pelayan di latar belakang dan menerima kandungan

Mari lihat contoh yang menghantar nama pengguna yang dimasukkan ke pelayan. Apabila pelayan menerima nama, ia mengeluarkan ucapan dan mengira bilangan aksara dalam nama yang dimasukkan.

Kandungan fail index.html.

Masukkan nama anda:


$(document).ready(function())( $("#myForm").submit(function())( $.ajax(( type: "POST", url: "greetings.php", data: "username =" +$("#nama pengguna").val(), success: function(html)( $("#content").html(html); ) ));

Satu borang untuk memasukkan nama pengguna telah dibuat dalam badan dokumen. Dan bekas untuk memuatkan kandungan dinamik.

Ambil perhatian bahawa borang itu sendiri tidak mempunyai medan tindakan dan kaedah biasa. Fungsi $("#myForm").submit() berfungsi sebagai pengendali untuk acara mengklik pada butang "Submit". Mari kita lihat fungsi ini.

$("#myForm").submit(function())( $.ajax(( type: "POST", url: "greetings.php", data: "username="+$("#username").val ( ), kejayaan: function(html)( $("#content").html(html); ) ));

Seperti yang kita dapat lihat, kerja utama sekali lagi berkaitan dengan fungsi $.ajax(). Kali ini, muncul parameter tambahan yang tidak dipertimbangkan dalam contoh 1 dan 2. Iaitu:

Jenis: "POST" Jenis pemindahan data. data: "nama pengguna="+$("#nama pengguna").val() Parameter dihantar ke pelayan. Dalam kes ini, kami lulus kandungan medan nama pengguna - nama pengguna. Secara umum, parameter ditulis dengan cara yang sama seperti dalam kaedah GET, dalam satu baris, sebagai contoh:
data: "nama pengguna=Vasya&umur=18&jantina=lelaki"

Sila ambil perhatian bahawa pada penghujungnya terdapat baris:

Kembali palsu; Ini dilakukan supaya borang tidak cuba memindahkan data ke fail dari mana ia dilancarkan dan halaman tidak dimuat semula.

Kandungan fail greetings.php.

Kami memaparkan ucapan dan mengira bilangan aksara dalam nama.

Muat turun fail sumber contoh (16.8 kb):

Perlu dikatakan sebagai kesimpulan bahawa sebagai tambahan kepada kelebihan jelas mencipta halaman menggunakan kandungan pengemaskinian dinamik, terdapat beberapa kelemahan yang harus diambil kira semasa membangunkan tapak, iaitu:

1. Pada halaman dengan pengemaskinian kandungan dinamik, butang "Kembali" dalam penyemak imbas tidak berfungsi dengan betul.

2. Halaman dengan kemas kini kandungan dinamik tidak mengubah URL berdasarkan kandungannya, jadi ia tidak boleh ditandakan.

3. Halaman dengan kemas kini kandungan dinamik tidak diindeks oleh enjin carian, kerana mereka tidak melaksanakan arahan JavaScript.

Anda boleh menyingkirkan kelemahan di atas secara pemrograman. Artikel ini tidak membincangkan kaedah sedemikian.

Bagaimana untuk mengeluarkan html menggunakan AJAX

Daripada artikel ini anda akan belajar bagaimana anda boleh memaparkan sebarang kod HTML menggunakan teknologi AJAX khas. Ia tidak begitu mudah dan memerlukan sedikit pengetahuan, tetapi jangan risau anda tidak akan berjaya. Di bawah ini anda akan menemui arahan terperinci yang boleh diketahui oleh seorang pemula sekalipun. Sebelum meneruskan terus ke arahan, saya akan menjawab persoalan mengapa ini diperlukan secara umum dan pilihan yang ada.

Secara umum, terdapat dua cara untuk memaparkan kandungan: sama ada melalui JavaScript atau melalui AJAX. Pendapat saya ialah lebih baik menggunakan AJAX daripada JS, tetapi mengapa ia lebih baik - anda bertanya? Lagipun, kedua-dua teknologi menyembunyikan teks dalam fail berasingan. Dan jawapannya ialah enjin carian telah mencapai tahap yang sangat tinggi dan sudah dapat mengenal pasti pautan yang terkandung dalam JavaScript. Sebagai contoh, Google telah pun mengumumkan perkara ini, dan nampaknya tidak lama lagi Yandex juga akan mengumumkan pencapaian ini.

Arahan untuk memaparkan kandungan melalui AJAX

1) Tambahkan skrip berikut pada direktori pengepala:

... ...

Dengan cara ini kami akan menyambungkan perpustakaan yang diperlukan untuk kerja AJAX terus dari tapak web rasmi mereka.

2) Buat dokumen html atau php dengan kod yang anda ingin keluarkan melalui AJAX. Sebagai contoh, mari buat fail text-dlya-ajax.html dan tulis di dalamnya:

Teks ini akan dikeluarkan melalui AJAX

3) Cipta fail JavaScript (.js) yang berasingan. Saya biasanya memanggilnya ajax.js untuk segera memahami kandungannya. Tambahkan kod berikut padanya:

(function($) ($(function() ($("#blockajax").load("LETAKKAN DI SINI_PATH_TO_FILE_html/text-dlya-ajax.html"); )) ))(jQuery)

Sekarang blockajax akan dicirikan oleh fail text-dlya-ajax.html.

Catatan
Jika anda perlu memaparkan banyak pengikatan "blok" = "kod html" sedemikian, maka anda boleh menulis seberapa banyak padanan berbeza yang anda suka:

(function($) ($(function() ($("#block1").load("block1.html"); $("#block2").load("block2.php"); .... ......................... $("#blockN").load("blockN.html");

4) Sambungkan fail ajax.js ke dokumen melalui teg kepala:

... ...

5) Di tempat yang anda perlukan untuk memaparkan teks html fail text-dlya-ajax.html, tulis:

Sebaliknya, kod html kami akan dimuatkan daripada fail text-dlya-ajax.html. Ini maksudnya: tiada kod pada halaman, tetapi output kandungan yang kami perlukan ada di sana.

Tiada lagi yang perlu dilakukan. Kini anda boleh memaparkan kandungan dengan mudah melalui AJAX.

Anda boleh memuat turun contoh yang diterangkan di atas dari pautan berikut: ajax.rar

Catatan
Dengan cara ini, anda juga boleh memaparkan dan mentafsir kod PHP melalui AJAX. Dan ini membuka peluang besar untuk anda.

Mengapa anda perlu mengeluarkan html menggunakan AJAX (3 sebab)
1. Untuk menjadi sangat ringkas, ini adalah perlu untuk mempromosikan tapak dalam enjin carian. Hakikatnya ialah pautan dalam laman web ini seolah-olah memindahkan berat antara mereka. Halaman yang dipautkan lebih kerap mempunyai lebih berat. Oleh itu, untuk mengagihkan berat tapak dengan lebih sekata antara halaman (dan tidak menggabungkan semuanya melalui pautan hujung ke hujung), anda perlu memastikan bahawa pautan hujung ke hujung ini tidak diambil kira oleh enjin carian.

Sebagai contoh, pada banyak tapak anda boleh menemui pautan ke teg yang muncul pada setiap halaman tapak dalam bar sisi. Ternyata halaman dengan teg mempunyai pemberat tertinggi, walaupun ia tidak mengandungi maklumat penting. Ini juga termasuk pautan lain yang tidak diperlukan pada halaman yang pada asasnya tidak diperlukan.

Sudah tentu, anda boleh menutup semua pautan dalam teg dalam , tetapi kajian telah menunjukkan bahawa dengan cara ini berat badan hilang di tapak, i.e. berat ini tidak dipindahkan kepada sesiapa, ia seolah-olah hanya menguap (bunyi aneh, tetapi ia adalah benar).

2. Sebab kedua untuk menggunakan output HTML melalui AJAX adalah untuk mengurangkan kod pada halaman tapak. Sekali lagi, ini perlu untuk enjin carian. Sebagai contoh, pengaki tapak sentiasa menduplikasi kod yang sama, yang hanya menghilangkan berat yang tidak perlu daripada halaman, jadi adalah lebih baik untuk mengalih keluar kod ini, tetapi meninggalkan pengaki. Ajax sesuai untuk menyelesaikan masalah ini.

3. Menggunakan AJAX, halaman dimuatkan blok demi blok, iaitu setiap elemen dimuatkan secara serentak dan tidak bergantung pada yang lain. Dengan cara ini, elemen "berat" di tapak tidak akan melambatkan pemuatan bahagian lain tapak. Ini lebih mudah untuk pengguna, kerana dia melihat bahawa tapak sedang dimuatkan dan berasa lebih santai daripada apabila tapak dimuatkan pada satu ketika.

AJAX ialah akronim yang bermaksud Asynchronous Javascript dan XML. Sebenarnya, AJAX bukanlah teknologi baharu, kerana kedua-dua Javascript dan XML telah wujud sejak sekian lama, dan AJAX ialah sintesis teknologi yang ditetapkan. AJAX paling kerap dikaitkan dengan istilah Web 2.0 dan disebut-sebut sebagai aplikasi Web terkini.

Apabila menggunakan AJAX, tidak perlu memuat semula keseluruhan halaman setiap kali, kerana hanya sebahagian tertentu daripadanya dikemas kini. Ini lebih mudah, kerana anda tidak perlu menunggu lama, dan lebih menjimatkan, kerana tidak semua orang mempunyai Internet tanpa had. Benar, dalam kes ini, pembangun perlu memastikan bahawa pengguna menyedari apa yang berlaku pada halaman. Ini boleh dilaksanakan menggunakan penunjuk pemuatan dan mesej teks yang menunjukkan bahawa data sedang ditukar dengan pelayan. Anda juga mesti faham bahawa tidak semua penyemak imbas menyokong AJAX (versi lama pelayar dan pelayar teks). Plus Javascript boleh dilumpuhkan oleh pengguna. Oleh itu, seseorang tidak seharusnya menyalahgunakan penggunaan teknologi dan menggunakan kaedah alternatif untuk menyampaikan maklumat di laman web.

Mari kita ringkaskan kelebihan AJAX:

• Keupayaan untuk mencipta antara muka Web yang mudah
• Interaksi pengguna aktif
• Kemudahan penggunaan

AJAX menggunakan dua kaedah untuk bekerja dengan halaman web: menukar halaman Web tanpa memuatkannya semula, dan menghubungi pelayan secara dinamik. Yang kedua boleh dilakukan dalam beberapa cara, khususnya, XMLHttpRequest, yang akan kita bincangkan, dan menggunakan teknik bingkai tersembunyi

Untuk menukar data, objek XMLHttpRequest mesti dibuat pada halaman, yang merupakan sejenis perantara antara Pelayar pengguna dan pelayan (Gamb. 1). Menggunakan XMLHttpRequest, anda boleh menghantar permintaan ke pelayan dan juga menerima respons dalam bentuk pelbagai jenis data.

Terdapat dua cara untuk menukar data dengan pelayan. Kaedah pertama ialah permintaan GET. Dalam permintaan ini, anda mengakses dokumen pada pelayan, menyampaikan argumen melalui URL itu sendiri. Dalam kes ini, di sisi pelanggan adalah logik untuk menggunakan fungsi melarikan diri Javascript supaya beberapa data tidak mengganggu permintaan.

Bahagian klien, yang ditulis dalam Javascript, mesti menyediakan fungsi yang diperlukan untuk pertukaran selamat dengan pelayan dan menyediakan kaedah untuk bertukar-tukar data dalam mana-mana cara di atas. Bahagian pelayan mesti memproses data input, dan berdasarkannya, menjana maklumat baharu (contohnya, bekerja dengan pangkalan data), dan menghantarnya kembali kepada klien. Contohnya, untuk meminta maklumat daripada pelayan, anda boleh menggunakan permintaan GET biasa dengan pemindahan beberapa parameter kecil, tetapi untuk mengemas kini maklumat atau menambah maklumat baharu, anda perlu menggunakan permintaan POST, kerana ia membolehkan anda memindahkan besar jumlah data.

Seperti yang telah disebutkan, AJAX menggunakan pemindahan data tak segerak. Ini bermakna semasa data sedang dipindahkan, pengguna boleh melakukan tindakan lain yang perlu. Pada masa ini, pengguna harus dimaklumkan bahawa beberapa jenis pertukaran data sedang berlaku, jika tidak, pengguna akan berfikir bahawa sesuatu yang tidak kena telah berlaku dan mungkin meninggalkan tapak, atau memanggil semula fungsi yang difikirkannya "beku". Petunjuk semasa komunikasi dalam aplikasi Web 2.0 memainkan peranan yang sangat penting: pelawat mungkin belum terbiasa dengan cara mengemas kini halaman ini.

Sambutan daripada pelayan bukan sahaja XML, seperti yang dicadangkan oleh nama teknologi. Selain XML, anda boleh menerima respons dalam teks biasa atau JSON (Javascript Object Notation). Jika respons diterima dalam teks ringkas, maka ia boleh dipaparkan dengan serta-merta dalam bekas pada halaman. Apabila menerima respons dalam bentuk XML, dokumen XML yang diterima biasanya diproses pada bahagian klien dan data ditukar kepada (X)HTML. Apabila menerima respons dalam format JSON, pelanggan hanya perlu melaksanakan kod yang diterima (fungsi eval Javascript) untuk mendapatkan objek Javascript sepenuhnya. Tetapi di sini anda perlu berhati-hati dan mengambil kira hakikat bahawa kod berniat jahat boleh dihantar menggunakan teknologi ini, jadi sebelum melaksanakan kod yang diterima daripada pelayan, anda perlu menyemak dan memprosesnya dengan teliti. Terdapat amalan seperti permintaan "terbiar", di mana tiada respons diterima daripada pelayan, hanya data di bahagian pelayan diubah.

Dalam pelayar yang berbeza, objek ini mempunyai sifat yang berbeza, tetapi secara umum ia adalah sama.

Kaedah objek XMLHttpRequest

Ambil perhatian bahawa nama kaedah ditulis dalam gaya Camel yang sama seperti fungsi Javascript yang lain. Berhati-hati apabila menggunakannya.

menggugurkan ()- membatalkan permintaan semasa kepada pelayan.

getAllResponseHeaders()- dapatkan semua pengepala respons daripada pelayan.

getResponseHeader("header_name")- dapatkan pengepala yang ditentukan.

open("request_type", "URL", "asynchronous", "username", "password")- memulakan permintaan kepada pelayan, menentukan kaedah permintaan. Jenis permintaan dan URL adalah parameter yang diperlukan. Argumen ketiga ialah nilai boolean. Biasanya benar sentiasa dinyatakan atau tidak dinyatakan sama sekali (lalai adalah benar). Argumen keempat dan kelima digunakan untuk pengesahan (amat tidak selamat untuk menyimpan data pengesahan dalam skrip, kerana skrip boleh dilihat oleh mana-mana pengguna).

hantar("kandungan")- hantar permintaan HTTP ke pelayan dan terima jawapan.

setRequestHeader("header_name", "value")- tetapkan nilai pengepala permintaan.

Sifat objek XMLHttpRequest

onreadystatechange- salah satu sifat terpenting bagi objek XMLHttpRequest. Menggunakan sifat ini, pengendali ditentukan yang dipanggil apabila status objek berubah.

readyState- nombor yang menunjukkan status objek.

Teks respons- perwakilan respons pelayan sebagai teks biasa (rentetan).

responXML- objek dokumen serasi DOM diterima daripada pelayan.

status- status respons daripada pelayan.

statusTeks- perwakilan teks status respons daripada pelayan.

Anda harus melihat lebih dekat pada sifat readyState:

• 0 - Objek tidak dimulakan.
• 1 - Objek sedang memuatkan data.
• 2 - Objek telah memuatkan datanya.
• 3 - Objek tidak dimuatkan sepenuhnya, tetapi boleh berinteraksi dengan pengguna.
• 4 - Objek dimulakan sepenuhnya; respons telah diterima daripada pelayan.

Ia berdasarkan keadaan kesediaan objek yang anda boleh memberikan pelawat maklumat tentang tahap proses pertukaran data dengan pelayan dan, mungkin, memberitahunya tentang perkara ini secara visual Mencipta objek XMLHttpRequest

Seperti yang dinyatakan di atas, mencipta objek ini untuk setiap jenis penyemak imbas adalah proses yang unik.

Contohnya, untuk mencipta objek dalam penyemak imbas yang serasi dengan Gecko, Konqueror dan Safari, anda perlu menggunakan ungkapan berikut:

Permintaan Var = XMLHttpRequest baharu();

Dan untuk Internet Explorer perkara berikut digunakan:

Var Request = new ActiveXObject("Microsoft.XMLHTTP");

Var Request = new ActiveXObject("Msxml2.XMLHTTP");

Kini, untuk mencapai keserasian merentas pelayar, anda perlu menggabungkan semua fungsi menjadi satu:

Fungsi CreateRequest() ( var Request = false; if (window.XMLHttpRequest) ( //Pelayar yang serasi dengan Gecko, Safari, Konqueror Request = XMLHttpRequest(); ) else if (window.ActiveXObject) ( //Internet explorer try ( Request = new ActiveXObject("Microsoft.XMLHTTP"); tangkap (CatchException) ( Request = new ActiveXObject("Msxml2.XMLHTTP"); ) ) jika (!Request) ( alert("Tidak boleh membuat XMLHttpRequest"); ) return Request;

Selepas semua ini, anda boleh mencipta objek ini dan tidak bimbang tentang prestasi pada pelayar popular. Tetapi anda boleh membuat objek di tempat yang berbeza. Jika anda menciptanya secara global, maka pada masa tertentu hanya satu permintaan kepada pelayan boleh dilakukan. Anda boleh mencipta objek setiap kali permintaan dibuat kepada pelayan (ini hampir akan menyelesaikan masalah sepenuhnya).

Minta kepada pelayan

Algoritma permintaan pelayan kelihatan seperti ini:

• Menyemak kewujudan XMLHttpRequest.
• Memulakan sambungan ke pelayan.
• Menghantar permintaan kepada pelayan.
• Pemprosesan data yang diterima.

Untuk membuat permintaan kepada pelayan, kami akan mencipta fungsi kecil yang akan menggabungkan dalam fungsi fungsi untuk permintaan GET dan POST.

/* Fungsi untuk menghantar permintaan ke fail pada pelayan r_method - jenis permintaan: GET atau POST r_path - laluan ke fail r_args - argumen seperti a=1&b=2&c=3... r_handler - fungsi yang mengendalikan respons daripada pelayan */ fungsi SendRequest(r_method , r_path, r_args, r_handler) ( //Cipta permintaan var Request = CreateRequest(); //Semak kewujudan permintaan sekali lagi jika (!Request) ( return; ) //Tetapkan adat pengendali Request.onreadystatechange = function() ( // Jika pertukaran data selesai jika (Request.readyState == 4) ( // Lulus kawalan kepada pengendali pengguna r_handler(Request); ) ) //Semak jika perlu untuk buat permintaan GET jika (r_method.toLowerCase() == "get" && r_args.length > 0) r_path += "?" //Memulakan Permintaan sambungan. r_method.toLowerCase() == "post") ( //Jika ini POST- request //Tetapkan tajuk Request.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=utf- 8"); //Hantar permintaan Request.send(r_args); ) else ( //Jika ini permintaan GET //Hantar permintaan batal Request.send(null); ) )

Membuat permintaan telah menjadi lebih mudah. Sebagai contoh, mari tulis fungsi yang akan menerima kandungan fail pada pelayan dan mengeluarkannya ke bekas.

Fungsi ReadFile(nama fail, bekas) ( //Buat fungsi pengendali var Handler = function(Request) ( document.getElementById(container).innerHTML = Request.responseText; ) //Hantar permintaan SendRequest("GET",nama fail," ", Pengendali);

Ini adalah bagaimana interaksi dengan pelayan berlaku.

Memproses tindak balas

Dalam contoh sebelumnya, kami membuat fungsi permintaan kepada pelayan. Tetapi pada dasarnya ia tidak selamat, kerana kami tidak memproses keadaan objek dan keadaan respons daripada pelayan.

Mari tambahkan pada kod kami supaya ia boleh memaparkan pemberitahuan visual tentang proses pemuatan.

Request.onreadystatechange = function() ( //Jika pertukaran data selesai jika (Request.readyState == 4) ( // Lulus kawalan kepada pengendali pengguna r_handler(Permintaan); ) lain ( // Beritahu pengguna tentang muat turun ) )...

Seperti yang anda sedia maklum, objek XMLHttpRequest membolehkan anda mengetahui status respons daripada pelayan. Jom rebut peluang ini.

Request.onreadystatechange = function() ( //Jika pertukaran data selesai jika (Request.readyState == 4) ( jika (Request.status == 200) ( // Lulus kawalan kepada pengendali pengguna r_handler(Request); ) lain ( // Kami memberitahu pengguna tentang ralat yang berlaku) ) lain ( // Beritahu pengguna tentang muat turun ) ) ...

Pilihan tindak balas pelayan

Anda boleh menerima beberapa jenis data daripada pelayan:

• Teks kosong

Jika anda menerima teks biasa, maka anda boleh segera menghantarnya ke bekas, iaitu, ke output. Apabila menerima data sebagai XML, anda mesti memproses data menggunakan fungsi DOM dan membentangkan hasilnya menggunakan HTML.

JSON ialah notasi objek Javascript. Dengan bantuannya, anda boleh mewakili objek sebagai rentetan (di sini anda boleh memberikan analogi dengan fungsi bersiri). Apabila anda menerima data JSON, anda mesti melaksanakannya untuk mendapatkan objek Javascript penuh dan melaksanakan operasi yang diperlukan padanya. Harap maklum bahawa penghantaran dan pelaksanaan data sedemikian tidak selamat. Anda perlu menjejaki apa yang masuk untuk pelaksanaan.

Contoh kod JSON:
( "data": ( "misc": [ ( "nama" : "Elemen JSON satu", "jenis" : "Subtajuk 1" ), ( "nama" : "Elemen JSON dua", "jenis" : " Sari kata 2 " ) ] ) )

Apabila menerima kod sedemikian, lakukan tindakan berikut:

Var responsedata = eval("(" + Request.responseText + ")")

Selepas melaksanakan kod ini, objek akan tersedia untuk anda data tindak balas.

Bekerja dengan bahasa pengaturcaraan sebelah pelayan

Kerja sebegini tiada bezanya dengan kerja biasa. Sebagai contoh, saya akan mengambil PHP sebagai bahasa sebelah pelayan. Tiada apa-apa yang berubah pada bahagian klien, tetapi bahagian pelayan kini diwakili oleh fail PHP.

Mengikut tradisi, mari kita mulakan dengan salam kepada dunia kita yang indah:

Gema "Hello, Dunia!";

Apabila mengakses fail ini, rentetan Hello, World akan dikembalikan kepada klien. Seperti yang anda boleh bayangkan, ini memberikan peluang yang besar untuk membina aplikasi. Dengan menghantar hujah apabila memanggil pelayan menggunakan XMLHttpRequest, anda boleh parameterkan output, dengan itu menyediakan fungsi yang meluas kepada aplikasi Web.

Selain PHP, anda boleh menggunakan mana-mana bahasa pengaturcaraan sebelah pelayan yang lain.

JQuery ialah perpustakaan javascript yang matlamatnya adalah untuk "menulis kurang, melakukan lebih banyak." jQuery mudah disambungkan ke tapak anda dan mula menggunakan. jQuery menjadikannya lebih mudah untuk menggunakan javascript di tapak anda.

jQuery menghapuskan banyak baris kod javascript, dan membolehkan anda melaksanakan keseluruhan baris ini dengan hanya satu kaedah.

Apakah AJAX?

AJAX adalah asynchronous (iaitu, penyemak imbas boleh melakukan apa sahaja yang dikehendakinya selepas menghantar permintaan, seperti menunjukkan mesej menunggu respons, menatal halaman, dll.) JavaScript dan XML. Ia digunakan untuk mencipta halaman web yang dinamik dan pantas. AJAX membolehkan kami mengemas kini sebahagian daripada halaman web tanpa memuatkan semula keseluruhan halaman.

Bagaimana pula dengan jQuery dan AJAX?

Gabungan jQuery dan AJAX menyediakan fungsi yang berkuasa. Dengan jquery dan ajax, anda boleh membuat permintaan dan menerima maklumat dalam pelbagai format, termasuk XML, HTML, dan juga teks biasa. Anda boleh menggunakan format JSON untuk menukar data. Kami boleh menggunakan data yang diterima melalui permintaan ajax dalam halaman html kami.

jQuery menjadikan API Ajax pelayar sedia ada lebih berkuasa dan lebih mudah untuk digunakan. Membuat panggilan ajax dengan cara biasa menggunakan javascript agak rumit: kerana anda perlu mempertimbangkan bahawa pelayar yang berbeza memerlukan pendekatan yang berbeza untuk mencipta objek XMLHttpRequest. Selain itu, menghantar data daripada borang, sebagai contoh, menjadi lebih sukar jika anda menggunakan javascript biasa untuk panggilan ajax.

jQuery menyediakan fungsi mudah dan berkuasa yang memanjangkan kaedah AJAX javascript dan menyediakan pendekatan yang lebih fleksibel.

Dalam artikel pendek ini saya akan menunjukkan kepada anda cara menggunakan jQuery dan AJAX dalam bentuk php yang mudah. Mari kita mulakan... Untuk menggunakan jQuery dan AJAX kita memerlukan dua fail, fail pertama akan mengandungi kod html/php di mana permintaan ajax akan dibuat. Dalam fail kedua kami akan memproses permintaan ajax dan mengembalikan hasilnya ke halaman pertama.

Langkah 1: Buat fail school.php dan tampal kod berikut ke dalamnya:

Dalam kod di atas kami mendapat nama dan nombor pelajar dan menggunakan jquery dan ajax kami menghantar mereka ke details.php.

function getdetails())( var name = $("#name").val(); var rno = $("#rno").val(); $.ajax(( type: "POST", url: " butiran .php", data: (fname:name, id:rno) )).selesai(fungsi(hasil) ( $("#msg").html(" Alamat No Roll " +rno +" ialah "+hasil );));

Nama awak:
Nombor Roll:

Langkah 2: Cipta details.php dan letakkan kod berikut di dalamnya:

Dalam kod di atas, kami mendapat alamat pelajar menggunakan nombor urutan dan namanya.

Untuk contoh ini, anda perlu mencipta pangkalan data sekolah dan jadual pelajar. Jadual pelajar mengandungi medan dengan nama, nombor urutan dan alamat.

Saya harap anda dapati artikel ini membantu.