masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

AJAXRSS

AJAX RSS Reader

Dalam contoh AJAX berikut, kami akan menunjukkan pembaca RSS yang melaluinya kandungan daripada RSS tidak Memuatkan halaman web semasa menyegarkan .

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    Ia mengandungi borang HTML ringkas dan pautan untuk melaksanakan fail JavaScript: 

<html>
 <head>
     <script type="text/javascript" src="getrss.js"></script>
 </head>
 <body>
 <form>
     Select an RSS-Feed:
     <select onchange="showRSS(this.value)">
         <option value="Google">Google News</option>
         <option value="MSNBC">MSNBC News</option>
     </select>
 </form>
 <p><div id="rssOutput">
     <b>RSS Feed will be listed here.</b></div></p>
 </body>
 </html>

Contoh penjelasan - Borang HTML

Seperti yang anda lihat, halaman HTML di atas mengandungi borang HTML ringkas dengan kotak senarai juntai bawah. Borang berfungsi seperti ini:

1 Apabila pengguna memilih pilihan dalam kotak lungsur, acara akan dicetuskan

2 dicetuskan, laksanakan fungsi showRSS( )

Di bawah borang ialah <div> bernama "rssOutput". Ia digunakan sebagai ruang letak untuk data yang dikembalikan oleh fungsi showRSS().

JavaScript

Kod JavaScript disimpan dalam "getrss.js", yang disambungkan ke dokumen HTML: 

var xmlHttp
 function showRSS(str)
 {
     xmlHttp=GetXmlHttpObject()
     if (xmlHttp==null)
     {
         alert ("Browser does not support HTTP Request")
         return
     }
     var url="getrss.php"
     url=url+"?q="+str
     url=url+"&sid="+Math.random()
     xmlHttp.onreadystatechange=stateChanged
     xmlHttp.open("GET",url,true)
     xmlHttp.send(null)
 }
 function stateChanged()
 {
     if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
     {
         document.getElementById("rssOutput")
             .innerHTML=xmlHttp.responseText
     }
 }
 function GetXmlHttpObject()
 {
     var xmlHttp=null;
     try
     {
         // Firefox, Opera 8.0+, Safari
         xmlHttp=new XMLHttpRequest();
     }
     catch (e)
     {
         // Internet Explorer
         try
         {
             xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
         }
         catch (e)
         {
             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
     }
     return xmlHttp;
 }

Contoh penjelasan:

Fungsi stateChanged() dan GetXmlHttpObject adalah sama seperti contoh dalam bahagian Permintaan PHP dan AJAX. fungsi showRSS()

Fungsi ini akan dilaksanakan apabila pilihan dipilih dalam kotak lungsur:

1 Tentukan url (nama fail) yang dihantar ke pelayan

2 Tambahkan parameter (q) pada url, kandungan parameter adalah pilihan yang dipilih dalam kotak lungsur

3 caching fail

4. Panggil fungsi GetXmlHttpObject untuk mencipta objek XMLHTTP, dan beritahu objek untuk melaksanakan fungsi stateChanged apabila perubahan dicetuskan

5 Buka XMLHTTP melalui url

6. Letakkan permintaan HTTP Dilancarkan ke pelayan

Halaman PHP

Halaman pelayan yang memanggil kod JavaScript ialah fail PHP bernama "getrss .php": 

<?php
 //get the q parameter from URL
 $q=$_GET["q"];
 //find out which feed was selected
 if($q=="Google")
 {
     $xml=("http://news.google.com/news?ned=us&topic=h&output=rss");
 }
 elseif($q=="MSNBC")
 {
     $xml=("http://rss.msnbc.msn.com/id/3032091/device/rss/rss.xml");
 }
 
 $xmlDoc = new DOMDocument();
 $xmlDoc->load($xml);
 
 //get elements from "<channel>"
 $channel=$xmlDoc->getElementsByTagName('channel')->item(0);
 $channel_title = $channel->getElementsByTagName('title')
     ->item(0)->childNodes->item(0)->nodeValue;
 $channel_link = $channel->getElementsByTagName('link')
     ->item(0)->childNodes->item(0)->nodeValue;
 $channel_desc = $channel->getElementsByTagName('description')
     ->item(0)->childNodes->item(0)->nodeValue;
 
 //output elements from "<channel>"
 echo("<p><a href='" . $channel_link
     . "'>" . $channel_title . "</a>");
 echo("<br />");
 echo($channel_desc . "</p>");
 
 //get and output "<item>" elements
 $x=$xmlDoc->getElementsByTagName('item');
 for ($i=0; $i<=2; $i++)
 {
     $item_title=$x->item($i)->getElementsByTagName('title')
         ->item(0)->childNodes->item(0)->nodeValue;
     $item_link=$x->item($i)->getElementsByTagName('link')
         ->item(0)->childNodes->item(0)->nodeValue;
     $item_desc=$x->item($i)->getElementsByTagName('description')
         ->item(0)->childNodes->item(0)->nodeValue;
 
     echo ("<p><a href='" . $item_link
         . "'>" . $item_title . "</a>");
     echo ("<br />");
     echo ($item_desc . "</p>");
 }
 ?>

Contoh penjelasan:

Apabila pilihan dihantar daripada JavaScript, apa yang berlaku:1. PHP mengetahui RSS mana suapan dipilih

2 Suapan RSS Cipta objek DOM XML

3 Cari dan keluarkan elemen daripada saluran RSS

4 item dan keluarkannya

Meneruskan pembelajaran
||
<html> <head> <script type="text/javascript" src="getrss.js"></script> </head> <body> <form> Select an RSS-Feed: <select onchange="showRSS(this.value)"> <option value="Google">Google News</option> <option value="MSNBC">MSNBC News</option> </select> </form> <p><div id="rssOutput"> <b>RSS Feed will be listed here.</b></div></p> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492836 permainan