国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

打開APP
userphoto
未登錄

開通VIP,暢享免費(fèi)電子書等14項(xiàng)超值服

開通VIP
Web 2.0中AJAX技術(shù)應(yīng)用詳解
今年互聯(lián)網(wǎng)上比較火熱的話題當(dāng)然是關(guān)于WEB2.0的應(yīng)用,其中AJAX又是WEB2.0的核心之一。AJAX是Asynchronous JavaScript and XML 的縮寫。它并不是一門新的語言或技術(shù),它實(shí)際上是幾項(xiàng)技術(shù)按一定的方式組合在一在同共的協(xié)作中發(fā)揮各自的作用,它包括:使用XHTML和CSS標(biāo)準(zhǔn)化呈 現(xiàn);使用DOM實(shí)現(xiàn)動(dòng)態(tài)顯示和交互;使用XML和XSLT進(jìn)行數(shù)據(jù)交換與處理;使用XMLHttpRequest進(jìn)行異步數(shù)據(jù)讀??;最后用 JavaScript綁定和處理所有數(shù)據(jù)。

  Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了—個(gè)中間層,使用戶操作與服務(wù)器響應(yīng)異步化。這樣把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端,利于客戶端閑置的處理能力來處理,減輕服務(wù)器和帶寬的負(fù)擔(dān),從而達(dá)到節(jié)約ISP的空間及帶寬租用成本的目的。

  我們以兩個(gè)驗(yàn)證通行證賬號(hào)是否存在的例子來講述AJAX在實(shí)際中的應(yīng)用:

  (1)用文本字符串的方式返回服務(wù)器的響應(yīng)來驗(yàn)證網(wǎng)易通行證賬號(hào)是否存在;

  (2)以XMLDocument對(duì)象方式返回響應(yīng)來驗(yàn)證金山通行證賬號(hào)是否存在;

  首先,我們需要用JavaScript來創(chuàng)建XMLHttpRequest 類向服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求, XMLHttpRequest 類首先由Internet Explorer以ActiveX對(duì)象引入,被稱為XMLHTTP。 后來Mozilla﹑Netscape﹑Safari 和其他瀏覽器也提供了XMLHttpRequest類,不過它們創(chuàng)建XMLHttpRequest類的方法不同。

  對(duì)于Internet Explorer瀏覽器,創(chuàng)建XMLHttpRequest 方法如下:

xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP"); 

  由于在不同Internet Explorer瀏覽器中XMLHTTP版本可能不一致,為了更好的兼容不同版本的Internet Explorer瀏覽器,因此我們需要根據(jù)不同版本的Internet Explorer瀏覽器來創(chuàng)建XMLHttpRequest類,上面代碼就是根據(jù)不同的Internet Explorer瀏覽器創(chuàng)建XMLHttpRequest類的方法。

  對(duì)于Mozilla﹑Netscape﹑Safari等瀏覽器,創(chuàng)建XMLHttpRequest 方法如下:

xmlhttp_request = new XMLHttpRequest();

  如果服務(wù)器的響應(yīng)沒有XML mime-type header,某些Mozilla瀏覽器可能無法正常工作。 為了解決這個(gè)問題,如果服務(wù)器響應(yīng)的header不是text/xml,可以調(diào)用其它方法修改該header。

xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType(‘text/xml‘); 

  在實(shí)際應(yīng)用中,為了兼容多種不同版本的瀏覽器,一般將創(chuàng)建XMLHttpRequest類的方法寫成如下形式:

try{
 if( window.ActiveXObject ){
  for( var i = 5; i; i-- ){
   try{
    if( i == 2 ){
     xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );
    }else{
     xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
    }
   xmlhttp_request.setRequestHeader("Content-Type","text/xml");
   xmlhttp_request.setRequestHeader("Content-Type","gb2312");
   break;
  }
  catch(e){
   xmlhttp_request = false;
  }
 }
}else if( window.XMLHttpRequest ){
 xmlhttp_request = new XMLHttpRequest();
 if (xmlhttp_request.overrideMimeType) {
  xmlhttp_request.overrideMimeType(‘text/xml‘);
 }
}
}catch(e){ xmlhttp_request = false; } 

  在定義了如何處理響應(yīng)后,就要發(fā)送請(qǐng)求了??梢哉{(diào)用HTTP請(qǐng)求類的open()和send()方法,如下所示:

xmlhttp_request.open(‘GET‘, URL, true); xmlhttp_request.send(null); 

  open()的第一個(gè)參數(shù)是HTTP請(qǐng)求方式—GET,POST或任何服務(wù)器所支持的您想調(diào)用的方式。 按照HTTP規(guī)范,該參數(shù)要大寫;否則,某些瀏覽器(如Firefox)可能無法處理請(qǐng)求。

  第二個(gè)參數(shù)是請(qǐng)求頁面的URL。

  第三個(gè)參數(shù)設(shè)置請(qǐng)求是否為異步模式。如果是TRUE,JavaScript函數(shù)將繼續(xù)執(zhí)行,而不等待服務(wù)器響應(yīng)。這就是"AJAX"中的"A"。

  用JavaScript來創(chuàng)建XMLHttpRequest 類向服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求后,接下來要決定當(dāng)收到服務(wù)器的響應(yīng)后,需要做什么。這需要告訴HTTP請(qǐng)求對(duì)象用哪一個(gè)JavaScript函數(shù)處理這 個(gè)響應(yīng)??梢詫?duì)象的onreadystatechange屬性設(shè)置為要使用的JavaScript的函數(shù)名,如下所示: xmlhttp_request.onreadystatechange =FunctionName;

  FunctionName是用JavaScript創(chuàng)建的函數(shù)名,注意不要寫成FunctionName(),當(dāng)然我們也可以直接將JavaScript代碼創(chuàng)建在onreadystatechange之后,例如:

xmlhttp_request.onreadystatechange = function(){
 // JavaScript代碼段
};

  在這個(gè)函數(shù)中。首先要檢查請(qǐng)求的狀態(tài)。只有當(dāng)一個(gè)完整的服務(wù)器響應(yīng)已經(jīng)收到了,函數(shù)才可以處理該響應(yīng)。XMLHttpRequest 提供了readyState屬性來對(duì)服務(wù)器響應(yīng)進(jìn)行判斷。

  readyState的取值如下:

   0 (未初始化)

   1 (正在裝載)

   2 (裝載完畢)

   3 (交互中)

   4 (完成)

  所以只有當(dāng)readyState=4時(shí),一個(gè)完整的服務(wù)器響應(yīng)已經(jīng)收到了,函數(shù)才可以處理該響應(yīng)。具體代碼如下:

if (http_request.readyState == 4) {
 // 收到完整的服務(wù)器響應(yīng)
} else {
 // 沒有收到完整的服務(wù)器響應(yīng)
}

  當(dāng)readyState=4時(shí),一個(gè)完整的服務(wù)器響應(yīng)已經(jīng)收到了,接著,函數(shù)會(huì)檢查HTTP服務(wù)器響應(yīng)的狀態(tài)值。完整的狀態(tài)取值可參見W3C文檔。當(dāng)HTTP服務(wù)器響應(yīng)的值為200時(shí),表示狀態(tài)正常。

  在檢查完請(qǐng)求的狀態(tài)值和響應(yīng)的HTTP狀態(tài)值后,就可以處理從服務(wù)器得到的數(shù)據(jù)了。有兩種方式可以得到這些數(shù)據(jù):(1) 以文本字符串的方式返回服務(wù)器的響應(yīng)

  (2) 以XMLDocument對(duì)象方式返回響應(yīng)

  實(shí)例一: 用文本字符串的方式返回服務(wù)器的響應(yīng)來驗(yàn)證網(wǎng)易通行證賬號(hào)是否存在

  首先,我們登陸網(wǎng)易通行證注冊(cè)頁面,可以看到檢測(cè)用戶名是否存在是將用戶名提交給checkssn.jsp頁面進(jìn)行判斷,格式為:

reg.163.com/register/checkssn.jsp?username=用戶名 根據(jù)上面講到的方法,我們可以利用AJAX技術(shù)對(duì)網(wǎng)易通行證用戶名進(jìn)行檢測(cè):

  第一步:新建一個(gè)基于Xhtml標(biāo)準(zhǔn)的網(wǎng)頁,在區(qū)域插入Javascript函數(shù)如下:

function getXMLRequester( )
{
 var xmlhttp_request = false;
 try{
  if( window.ActiveXObject )
  {
   for( var i = 5; i; i-- ){
    try{
     if( i == 2 )
     {
      xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );
     }
     else
     {
      xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
      xmlhttp_request.setRequestHeader("Content-Type","text/xml"); xmlhttp_request.setRequestHeader("Content-Type","gb2312"); }
    break;}
    catch(e){ xmlhttp_request = false;
    }
   }
  }
  else if( window.XMLHttpRequest )
  {
   xmlhttp_request = new XMLHttpRequest();
   if (xmlhttp_request.overrideMimeType)
   {
    xmlhttp_request.overrideMimeType(‘text/xml‘);
   }
  }
 }
 catch(e){ xmlhttp_request = false; }
 return xmlhttp_request ;
}

function IDRequest(n)
{
 //定義收到服務(wù)器的響應(yīng)后需要執(zhí)行的JavaScript函數(shù) url=n+document.getElementById(‘163id‘).value;
 //定義網(wǎng)址參數(shù) xmlhttp_request=getXMLRequester();
 //調(diào)用創(chuàng)建XMLHttpRequest的函數(shù) xmlhttp_request.onreadystatechange = doContents;
 //調(diào)用doContents函數(shù) xmlhttp_request.open(‘GET‘, url, true); xmlhttp_request.send(null); } function doContents()
 
 {
  if (xmlhttp_request.readyState == 4)
  {
   // 收到完整的服務(wù)器響應(yīng)
   if (xmlhttp_request.status == 200) {
    //HTTP服務(wù)器響應(yīng)的值OK
    document.getElementById(‘message‘).innerHTML = xmlhttp_request.responseText;
    //將服務(wù)器返回的字符串寫到頁面中ID為message的區(qū)域 }
   else {
    alert(http_request.status);
   }
  }
 } 

  在區(qū)域建立一個(gè)文本框,id為163id

  再建一個(gè)id為messsge的空白區(qū)域用來顯示返回字符串(也可以通過Javascript函數(shù)截取一部分字符串顯示):

  這樣,一個(gè)基于AJAX技術(shù)的用戶名檢測(cè)頁面就做好了,不過這個(gè)頁面將返回服務(wù)器響應(yīng)生成頁面的所有字符串,當(dāng)然還可以對(duì)返回的字符串進(jìn)行一些操作,便于應(yīng)用到不同的需要當(dāng)中。

  實(shí)例二: 以XMLDocument對(duì)象方式返回響應(yīng)來驗(yàn)證金山通行證賬號(hào)是否存在

  在上面的例子中,當(dāng)服務(wù)器對(duì)HTTP請(qǐng)求的響應(yīng)被收到后,我們會(huì)調(diào)用請(qǐng)求對(duì)象的reponseText屬性。該屬性包含了服務(wù)器返回響應(yīng)文件的 內(nèi)容?,F(xiàn)在我們以XMLDocument對(duì)象方式返回響應(yīng),此時(shí)將不再需要reponseText屬性而使用responseXML屬性。

  首先登陸金山通行證注冊(cè)頁面,我們發(fā)現(xiàn)金山通行證用戶名的檢測(cè)方式為: pass.kingsoft.com/ksgweb/jsp/login/uid.jsp?uid=用戶名,并且返回XML數(shù)據(jù):

isExistedUid -2 

  當(dāng)result值為-1時(shí)表示此用戶名已被注冊(cè),當(dāng)result值為-2時(shí)表示此用戶名尚未注冊(cè),因此通過對(duì)result值的判斷可以知道用戶名是否被注冊(cè)。

  對(duì)上例代碼進(jìn)行修改:

  首先找到

document.getElementById(‘message‘).innerHTML = xmlhttp_request.responseText;

  改為:

var response = xmlhttp_request.responseXML.documentElement;
var result = response.getElementsByTagName(‘result‘)[0].firstChild.data;//返回result節(jié)點(diǎn)數(shù)據(jù)
if(result ==-2){
 document.getElementById(‘message‘).innerHTML = "用戶名"+document.getElementById(‘163id‘).value+"尚未注冊(cè)";}
else if(result ==-1){
 document.getElementById(‘message‘).innerHTML = "對(duì)不起,用戶名"+document.getElementById(‘163id‘).value+"已經(jīng)注冊(cè)";}

  通過以上兩個(gè)實(shí)例說明了AJAX的客戶端基礎(chǔ)應(yīng)用,采用的是網(wǎng)易和金山現(xiàn)成的服務(wù)器端程序,當(dāng)然為了開發(fā)合適自己頁面的程序,還需要對(duì)自己編寫服務(wù)器端程序,這設(shè)計(jì)到程序語言及數(shù)據(jù)庫的操作,對(duì)于有一定程序基礎(chǔ)的讀者一定不是很難的事情。

本站僅提供存儲(chǔ)服務(wù),所有內(nèi)容均由用戶發(fā)布,如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊舉報(bào)。
打開APP,閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
Drunk Dream-AJAX基礎(chǔ)教程
ajax
Php
使用JavaScript 和Ajax 發(fā)出異步請(qǐng)求(一)
第 2 部分 使用 JavaScript 和 Ajax 發(fā)出異步請(qǐng)求(3)
AJAX 簡介
更多類似文章 >>
生活服務(wù)
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號(hào)成功
后續(xù)可登錄賬號(hào)暢享VIP特權(quán)!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服