.net中ajax技術實現(自我總結,也許不對)

iDotNetSpace發表於2009-07-14

1.用js實現前臺無重新整理,讀取資料,主要實現方法大概如下:

    首先根據瀏覽器型別建立1個適合的xmlHttp物件

    然後開啟xmlHttp.open("get",url,true);url可帶所需引數

    接著設定處理伺服器響應的函式為一屬性為:onreadystatechange=方法名;

    接著在方法裡寫下當xmlHttp.readyState==4(即非同步完成時的操作)

    如讀取返回的xml檔案,var xmlDoc=xmlHttp.responseXML.documentElement;

    程式碼是從別處找來,自己只做了點簡單的總結,非原創如下:

 

.net中ajax技術實現(自我總結,也許不對)
/*AJAX 例項解釋
上面的例子包含一個 HTML 表單，若干個保留所返回資料的  元素，以及指向一段 JavaScript 的連結：*/

<html>
<head>
<script src="selectcustomer_xml.js">script>
head>
<body>

<form action=""> 
<label>選擇客戶：
<select name="customers" onchange="showCustomer(this.value)">
<option value="ALFKI">Alfreds Futterkisteoption>
<option value="NORTS ">North/Southoption>
<option value="WOLZA">Wolski Zajazdoption>
select>label>
form>

<b><span id="companyname">span>b><br />
<span id="contactname">span><br />
<span id="address">span>
<span id="city">span><br/>
<span id="country">span>

body>
html>
/*上面的例子包含了一個 HTML 表單，該表單帶有一個名為 "customers" 下拉框。

當使用者選取下拉框中的客戶時，函式 "showCustomer()" 就會被執行。事件 "onchange" 會觸發該函式執行。換句話說，每當使用者改變下拉框中的值時，函式 showCustomer() 就會被呼叫。

下面列出了 JavaScript 程式碼。
AJAX JavaScript
這是儲存在檔案 "selectcustomer_xml.js" 中的 JavaScript 程式碼：
*/

var xmlHttp

function showCustomer(str)
{ 
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="getcustomer_xml.asp";
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)
{
var xmlDoc=xmlHttp.responseXML.documentElement;
document.getElementById("companyname").innerHTML=
xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue;
document.getElementById("contactname").innerHTML=
xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue;
document.getElementById("address").innerHTML=
xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue;
document.getElementById("city").innerHTML=
xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;
document.getElementById("country").innerHTML=
xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue;
}
}

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

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-609079/，如需轉載，請註明出處，否則將追究法律責任。

相關文章