📄 17-6.htm

📁 php 和 ajax 开发的一些资料
💻 HTM
字号:
<html>
<head>
<title>
动态编辑页面内容
</title>
<script language="javascript">
var xmlHttp;									//定义变量
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");		//创建对象
function process()
{
  xmlHttp.open("GET","17-6.xml",true);					//打开请求
  xmlHttp.onreadystatechange=handle_f;					//定义句柄函数
  xmlHttp.send(null);								//向服务器发送请求
}
function handle_f()
{
  if(xmlHttp.readyState==4)							//如果传递完成
  {
    if(xmlHttp.status==200)							//如果服务器返回OK
    {
      clearpreviousr();
	  parser();
    }
    else											//如果服务器没有返回200
    {
      alert("执行过程中出现问题，服务器返回："+xmlHttp.statusText);
    }
  }
}
function clearpreviousr()
{
  var tablebody=document.getElementById("resultbody");
  while(tablebody.childNodes.length>0)
  {
    tablebody.removeChild(tablebody.ChildNodes[0]);
  }
}
function parser()
{
  var result=xmlHttp.responseXML;
  var wood=null;
  var name="";
  var cost="";
  var number="";
  var woods=result.getElementsByTagName("wood");
  for(var i=0;i<woods.length;i++)
  {
    wood=woods[i];
	name=wood.getElementsByTagName("name")[0].firstChild.nodeValue;
	cost=wood.getElementsByTagName("cost")[0].firstChild.nodeValue;
	number=wood.getElementsByTagName("number")[0].firstChild.nodeValue;
	addtablerow(name,cost,number);
  }
  document.getElementById("resulttable").setAttribute("border","1");
}
function addtablerow(name,cost,number)
{
  var row=document.createElement("tr");
  var cell=document.createElement("td");
  var textNode=document.createTextNode(name);

  cell.appendChild(textNode);
  row.appendChild(cell);
  var cell=document.createElement("td");
  var textNode=document.createTextNode(cost);
  cell.appendChild(textNode);
  row.appendChild(cell);
  var cell=document.createElement("td");
  var textNode=document.createTextNode(number);
  cell.appendChild(textNode);
  row.appendChild(cell);
  document.getElementById("resultbody").appendChild(row);
}
</script>
</head>
<body>
<h1>为页面动态添加内容</h1><p>
<input type="button" value="显示内容" onclick="process()">
<p>
<span id="header">
</span>
<p>
<table id="resulttable">
  <tbody id="resultbody">
  </tbody>
</table>
</body>
</html>
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -