| 導購 | 订阅 | 在线投稿
分享
 
 
當前位置: 王朝網路 >> php >> Ajax+PHP簡單入門教程
 

Ajax+PHP簡單入門教程

2008-12-22 08:10:49  編輯來源:互聯網  简体版  手機版  評論  字體: ||
 
 
  Ajax 由 HTML、JavaScript™ 技術、DHTML 和 DOM 組成,這一傑出的方法可以將笨拙的 Web 界面轉化成交互性的 Ajax 應用程序。對于Ajax,最核心的一個對象是XMLHttpRequest,所有的Ajax操作都離不開對這個對象的操作。

  首先我們來了解怎麽在javascript中創建這個對象:

  varxmlHttp=newXMLHttpRequest();

  這行簡單的代碼在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 浏覽器中,創建了XMLHttpRequest對象。但是對于市場占有率達到70%的IE來說,這種方法是不行的,而不同的IE版本還有不同的創建方法,所以我們需要在IE下面使用下面兩種創建對象的辦法:

  try{

  xmlHttp=newActiveXObject("Msxml2.XMLHTTP");//針對較新的浏覽器

  }catch(err){

  try{

  xmlHttp=newActiveXObject("Microsoft.XMLHTTP");//針對較老的浏覽器

  }catch(err2){

  xmlHttp=false;

  }

  }

  即使這樣,我們也無法預料有些浏覽器可能無法創建這個對象,所以在創建不成功的情況下,我們還要加上一句:

  if(!xmlHttp){

  alert("無法創建 XMLHttpRequest 對象!");

  }

  結合起來就是:

  varxmlHttp=false;

  try{

  xmlHttp=newXMLHttpRequest();

  }catch(trymicrosoft){

  try{

  xmlHttp=newActiveXObject("Msxml2.XMLHTTP");

  }catch(othermicrosoft){

  try{

  xmlHttp=newActiveXObject("Microsoft.XMLHTTP");

  }catch(failed){

  xmlHttp=false;

  }

  }

  }

  if(!xmlHttp){

  alert("無法創建 XMLHttpRequest 對象!");

  }

  然後,讓我們建立一個函數getInfo(),打開異步請求:

  functiongetInfo(){

  varnum=document.getElementById("num").value;//獲得表單的數據

  varurl="/ajax/1.php?n="+escape(num);

  xmlHttp.open("GET",url,true);//這裏的true代表是異步請求

  }

  一旦用open()配置好之後,就可以發送請求了。雖然可以使用send()發送數據,但也能通過 URL 本身發送數據。事實上,在大部分GET請求中,用 URL 發送數據要容易得多,所以這裏用null作爲send()的參數就可以了。url地址裏面的php文件是被請求來處理所需要數據的php文件,就像我們平時用PHP的時候一樣,後面的參數可以加多個,並用&分隔開來。

  xmlHttp.send(null);

  在發送了數據之後,我們需要用回調方法來獲得服務器的狀態,所以就用到了onreadystatechange屬性。

  xmlHttp.onreadystatechange=updatePage;

  此語句已經要放在send()語句前面,這樣才會有效,後面的updatePage是處理返回信息的一個函數。完整的getInfo()如下:

  functiongetInfo(){

  varnum=document.getElementById("num").value;//獲得表單的數據

  varurl="/ajax/1.php?n="+escape(num);

  xmlHttp.open("GET",url,true);//這裏的true代表是異步請求

  xmlHttp.onreadystatechange=updatePage;

  xmlHttp.send(null);

  }

  我們還需要在html裏面來觸發這個函數:

  <inputname="num"id="num"onblur="getInfo()"type="text"/>

  下面我們需要來編寫updatePage()這個函數:

  functionupdatePage(){

  if(xmlhttp.readyState==4){

  varresponse=xmlhttp.responseText;

  document.getElementById("city").value=response;

  }

  }

  上面這段代碼裏面的readyState是服務器返回的一個狀態,4這個狀態表示請求已經發送,並處理完畢。responseText是獲得服務器返回的信息,然後通過javascript賦給ID爲city的表單。

  到此,一個簡單的Ajax程序就完成了,完整的javascript代碼如下:

  varxmlHttp=false;

  try{

  xmlHttp=newXMLHttpRequest();

  }catch(trymicrosoft){

  try{

  xmlHttp=newActiveXObject("Msxml2.XMLHTTP");

  }catch(othermicrosoft){

  try{

  xmlHttp=newActiveXObject("Microsoft.XMLHTTP");

  }catch(failed){

  xmlHttp=false;

  }

  }

  }

  if(!xmlHttp){

  alert("無法創建 XMLHttpRequest 對象!");

  }

  functiongetInfo(){

  varnum=document.getElementById("num").value;//獲得表單的數據

  varurl="/ajax/1.php?n="+escape(num);

  xmlHttp.open("GET",url,true);//這裏的true代表是異步請求

  xmlHttp.onreadystatechange=updatePage;

  xmlHttp.send(null);

  }

  functionupdatePage(){

  if(xmlhttp.readyState==4){

  varresponse=xmlhttp.responseText;

  document.getElementById("city").value=response;

  }

  }

  這裏還缺一個php文件,由于處理的方式不一樣,寫法也不一樣,而且這不是Ajax的主要部分,所以這裏就不放代碼了。只要記住php是輸出並返回所需要的數據就可以了

  好久沒更新,今天看到這教程,對初學者挺適合.
 
 
 
上一篇《JSON在PHP中的應用》
下一篇《PHP對象相互引用的內存溢出》
 
 
 
 
 
 
日版寵物情人插曲《Winding Road》歌詞

日版寵物情人2017的插曲,很帶節奏感,日語的,女生唱的。 最後聽見是在第8集的時候女主手割傷了,然後男主用嘴幫她吸了一下,插曲就出來了。 歌手:Def...

兄弟共妻,我成了他們夜裏的美食

老鍾家的兩個兒子很特別,就是跟其他的人不太一樣,魔一般的執著。兄弟倆都到了要結婚的年齡了,不管自家老爹怎麽磨破嘴皮子,兄弟倆說不娶就不娶,老父母爲兄弟兩操碎了心...

如何磨出破洞牛仔褲?牛仔褲怎麽剪破洞?

把牛仔褲磨出有線的破洞 1、具體工具就是磨腳石,下面墊一個硬物,然後用磨腳石一直磨一直磨,到把那塊磨薄了,用手撕開就好了。出來的洞啊很自然的。需要貓須的話調幾...

我就是掃描下圖得到了敬業福和愛國福

先來看下敬業福和愛國福 今年春節,支付寶再次推出了“五福紅包”活動,表示要“把欠大家的敬業福都還給大家”。 今天該活動正式啓動,和去年一樣,需要收集“五福”...

冰箱異味産生的原因和臭味去除的方法

有時候我們打開冰箱就會聞到一股異味,冰箱裏的這種異味是因爲一些物質發出的氣味的混合體,聞起來讓人惡心。 産生這些異味的主要原因有以下幾點。 1、很多人有這種習...

《極品家丁》1-31集大結局分集劇情介紹

簡介 《極品家丁》講述了現代白領林晚榮無意回到古代金陵,並追隨蕭二小姐化名“林三”進入蕭府,不料卻陰差陽錯上演了一出低級家丁拼搏上位的“林三升職記”。...

李溪芮《極品家丁》片尾曲《你就是我最愛的寶寶》歌詞

你就是我最愛的寶寶 - 李溪芮 (電視劇《極品家丁》片尾曲) 作詞:常馨內 作曲:常馨內 你的眉 又鬼馬的挑 你的嘴 又壞壞的笑 上一秒吵鬧 下...

烏梅的功效與作用以及烏梅的食用禁忌有哪些?

烏梅,又稱春梅,中醫認爲,烏梅味酸,性溫,無毒,具有安心、除熱、下氣、祛痰、止渴調中、殺蟲的功效,治肢體痛、肺痨病。烏梅泡水喝能治傷寒煩熱、止吐瀉,與幹姜一起制...

什麽是脂肪粒?如何消除臉部脂肪粒?

什麽是脂肪粒 在我們的臉上總會長一個個像脂肪的小顆粒,弄也弄不掉,而且顔色還是白白的。它既不是粉刺也不是其他的任何痘痘,它就是脂肪粒。 脂肪粒雖然也是由油脂...

網絡安全治理:國家安全保障的主要方向是打擊犯罪,而不是處置和懲罰受害者

來源:中國青年報 新的攻擊方法不斷湧現,黑客幾乎永遠占據網絡攻擊的上風,我們不可能通過技術手段杜絕網絡攻擊。國家安全保障的主要方向是打擊犯罪,而不是處置和懲罰...

河南夫妻在溫嶺網絡直播“造人”內容涉黃被刑事拘留

夫妻網絡直播“造人”爆紅   1月9日,溫嶺城北派出所接到南京警方的協查通告,他們近期打掉了一個涉黃直播APP平台。而根據掌握的線索,其中有一對涉案的夫妻主播...

如何防止牆紙老化?牆紙變舊變黃怎麽辦?

如何防止牆紙老化? (1)選擇透氣性好的牆紙 市場上牆紙的材質分無紡布的、木纖維的、PVC的、玻璃纖維基材的、布面的等,相對而言,PVC材質的牆紙最不透氣...

鮮肌之謎非日本生産VS鮮肌之謎假日貨是謠言

觀點一:破日本銷售量的“鮮肌之謎” 非日本生産 近一段時間,淘寶上架了一款名爲“鮮肌之謎的” 鲑魚卵巢美容液,號稱是最近日本的一款推出的全新護膚品,産品本身所...

中國最美古詩詞精選摘抄

系腰裙(北宋詞人 張先) 惜霜蟾照夜雲天,朦胧影、畫勾闌。人情縱似長情月,算一年年。又能得、幾番圓。 欲寄西江題葉字,流不到、五亭前。東池始有荷新綠,尚小如...

關于女人的經典語句

關于女人的經典語句1、【做一個獨立的女人】 思想獨立:有主見、有自己的人生觀、價值觀。有上進心,永遠不放棄自己的理想,做一份自己喜愛的事業,擁有快樂和成就...

未來我們可以和性愛機器人結婚嗎?

你想體驗機器人性愛嗎?你想和性愛機器人結婚嗎?如果你想,機器人有拒絕你的權利嗎? 近日,第二屆“國際人類-機器人性愛研討會”大會在倫敦金史密斯大學落下帷幕。而...

全球最變態的十個地方

10.土耳其地下洞穴城市 變態指數:★★☆☆☆ 這是土耳其卡帕多西亞的一個著名景點,傳說是當年基督教徒們爲了躲避戰爭而在此修建。裏面曾住著20000人,...

科學家稱,人類死亡後意識將在另外一個宇宙中繼續存活

據英國《每日快報》報道,一位科學家兼理論家Robert Lanza博士宣稱,世界上並不存在人類死亡,死亡的只是身體。他認爲我們的意識借助我們體內的能量生存,而且...

《屏裏狐》片頭曲《我愛狐狸精》歌詞是什麽?

《我愛狐狸精》 - 劉馨棋   (電視劇《屏裏狐》主題曲)   作詞:金十三&李旦   作曲:劉嘉   狐狸精 狐狸仙   千年修...

 
 
 
Ajax 由 HTML、JavaScript™ 技術、DHTML 和 DOM 組成,這一傑出的方法可以將笨拙的 Web 界面轉化成交互性的 Ajax 應用程序。對于Ajax,最核心的一個對象是XMLHttpRequest,所有的Ajax操作都離不開對這個對象的操作。 首先我們來了解怎麽在javascript中創建這個對象: varxmlHttp=newXMLHttpRequest(); 這行簡單的代碼在 Mozilla、Firefox、Safari、Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 浏覽器中,創建了XMLHttpRequest對象。但是對于市場占有率達到70%的IE來說,這種方法是不行的,而不同的IE版本還有不同的創建方法,所以我們需要在IE下面使用下面兩種創建對象的辦法: try{ xmlHttp=newActiveXObject("Msxml2.XMLHTTP");//針對較新的浏覽器 }catch(err){ try{ xmlHttp=newActiveXObject("Microsoft.XMLHTTP");//針對較老的浏覽器 }catch(err2){ xmlHttp=false; } } 即使這樣,我們也無法預料有些浏覽器可能無法創建這個對象,所以在創建不成功的情況下,我們還要加上一句: if(!xmlHttp){ alert("無法創建 XMLHttpRequest 對象!"); } 結合起來就是: varxmlHttp=false; try{ xmlHttp=newXMLHttpRequest(); }catch(trymicrosoft){ try{ xmlHttp=newActiveXObject("Msxml2.XMLHTTP"); }catch(othermicrosoft){ try{ xmlHttp=newActiveXObject("Microsoft.XMLHTTP"); }catch(failed){ xmlHttp=false; } } } if(!xmlHttp){ alert("無法創建 XMLHttpRequest 對象!"); } 然後,讓我們建立一個函數getInfo(),打開異步請求: functiongetInfo(){ varnum=document.getElementById("num").value;//獲得表單的數據 varurl="/ajax/1.php?n="+escape(num); xmlHttp.open("GET",url,true);//這裏的true代表是異步請求 } 一旦用open()配置好之後,就可以發送請求了。雖然可以使用send()發送數據,但也能通過 URL 本身發送數據。事實上,在大部分GET請求中,用 URL 發送數據要容易得多,所以這裏用null作爲send()的參數就可以了。url地址裏面的php文件是被請求來處理所需要數據的php文件,就像我們平時用PHP的時候一樣,後面的參數可以加多個,並用&分隔開來。 xmlHttp.send(null); 在發送了數據之後,我們需要用回調方法來獲得服務器的狀態,所以就用到了onreadystatechange屬性。 xmlHttp.onreadystatechange=updatePage; 此語句已經要放在send()語句前面,這樣才會有效,後面的updatePage是處理返回信息的一個函數。完整的getInfo()如下: functiongetInfo(){ varnum=document.getElementById("num").value;//獲得表單的數據 varurl="/ajax/1.php?n="+escape(num); xmlHttp.open("GET",url,true);//這裏的true代表是異步請求 xmlHttp.onreadystatechange=updatePage; xmlHttp.send(null); } 我們還需要在html裏面來觸發這個函數: <inputname="num"id="num"onblur="getInfo()"type="text"/> 下面我們需要來編寫updatePage()這個函數: functionupdatePage(){ if(xmlhttp.readyState==4){ varresponse=xmlhttp.responseText; document.getElementById("city").value=response; } } 上面這段代碼裏面的readyState是服務器返回的一個狀態,4這個狀態表示請求已經發送,並處理完畢。responseText是獲得服務器返回的信息,然後通過javascript賦給ID爲city的表單。 到此,一個簡單的Ajax程序就完成了,完整的javascript代碼如下: varxmlHttp=false; try{ xmlHttp=newXMLHttpRequest(); }catch(trymicrosoft){ try{ xmlHttp=newActiveXObject("Msxml2.XMLHTTP"); }catch(othermicrosoft){ try{ xmlHttp=newActiveXObject("Microsoft.XMLHTTP"); }catch(failed){ xmlHttp=false; } } } if(!xmlHttp){ alert("無法創建 XMLHttpRequest 對象!"); } functiongetInfo(){ varnum=document.getElementById("num").value;//獲得表單的數據 varurl="/ajax/1.php?n="+escape(num); xmlHttp.open("GET",url,true);//這裏的true代表是異步請求 xmlHttp.onreadystatechange=updatePage; xmlHttp.send(null); } functionupdatePage(){ if(xmlhttp.readyState==4){ varresponse=xmlhttp.responseText; document.getElementById("city").value=response; } } 這裏還缺一個php文件,由于處理的方式不一樣,寫法也不一樣,而且這不是Ajax的主要部分,所以這裏就不放代碼了。只要記住php是輸出並返回所需要的數據就可以了 好久沒更新,今天看到這教程,對初學者挺適合.
󰈣󰈤
 
 
 
  免責聲明:本文僅代表作者個人觀點,與王朝網路無關。王朝網路登載此文出於傳遞更多信息之目的,並不意味著贊同其觀點或證實其描述,其原創性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,並請自行核實相關內容。
 
 
暖暖的午後美女(2)
一個人的生活
妩媚動人的女生
秀氣迷人的模特
巧合的對稱
擁抱明天
十二月,有陽光
董子讀書台
 
>>返回首頁<<
 
 
 
 熱帖排行
 
 
 
 
© 2005- 王朝網路 版權所有