Web - 简单的开始 – Ajax + XML +DOM
技术交流,DH讲解.
本人不是搞web的,所以今天做的东西应该也挺简单的.
正好有个朋友需要实现这样的功能
点击更多按钮后从服务端获得数据,然后把数据显示在表格中了
我花了一个小时写了一个例子.这里献丑一下:
<script language="JavaScript">
//清空table,传入table变量(DOM)
function ClearTable(T){
while (T.rows.length){
T.deleteRow(0);
}
}
//将字符串S,加载到表T中去
function loadXML2Table(S,T){
try{//IE
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = "false";
xml.loadXML(S);
}catch(e){
try{//FF
parser = new DOMParser();
xml = parser.parseFromString(S,"text/xml");
}catch(e){
alert("不能加载XML");
return;
}
}
//
ClearTable(T);
//插入
var x = xml.getElementsByTagName("hh")
for(i=0;i<x.length;i++){
newRow = T.insertRow(i);
newRow.id = i;
//x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue
newCell = newRow.insertCell(0);
newCell.innerHTML = x[i].getElementsByTagName("a")[0].childNodes[0].nodeValue;
newCell = newRow.insertCell(1);
newCell.innerHTML = x[i].getElementsByTagName("b")[0].childNodes[0].nodeValue;
}
}
var xmlhttp = null;//ajax
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}
function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"
if (xmlhttp.status==200)
{// 200 = OK
T = document.getElementById("huangjacky");
if(T==null)return;
S = xmlhttp.responseText;
alert(S);
loadXML2Table(S, T);
}
else
{
alert("Problem retrieving XML data");
}
}
}
</script>
给个演示地址吧.哈哈
http://thefiend.210131.0-168.net/1.html
好就这么点儿东西了.
我是DH,今天就到这里,
浙公网安备 33010602011771号