AJAX学习整理二之简单实例

做了几个简单的实例，加载txt文本内容、加载xml文件内容，把xml文本内容转换成html表格显示。废话不多说，直接贴代码：

<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/html">
<head>
<title>通过ajax获取文本内容</title>
<Metacharset="utf-8">
<script>
//加载文件
varloadTextByAjax=function(type){
//第一步，创建XMLHttpRequest对象
varxmlhttp;
if(window.XMLHttpRequest){//Firefox,Opera8.0+,Safari,IE7
xmlhttp=newXMLHttpRequest();
}else{//OldIE
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
console.log("oldIE");
}
//第二步，编写回调函数
xmlhttp.onreadystatechange=functionload(){
if(xmlhttp.readyState===4&&xmlhttp.status===200){
document.getElementById('status').innerHTML=xmlhttp.status;
document.getElementById('readyState').innerHTML=xmlhttp.readyState;
if(type==='txt'){
document.getElementById("content").innerHTML=xmlhttp.responseText;
}
if(type==='xml'){
document.getElementById("content").innerHTML=xmlhttp.responseText;
}
if(type==='table'){
transform();
}
}
}
//第三步，使用open（）方法指定服务器地址
switch(type){
case'txt':
xmlhttp.open("GET","Resources/test.txt",true);
break;
case'xml':
xmlhttp.open("GET","Resources/xml.xml",true);
break;
case'table':
xmlhttp.open("GET",true);
break;
}

//第四步，发送请求
xmlhttp.send();

//xml转换html表格显示
vartransform=function(){
vartable="<tableborder='1'style='color:blue'>";//1
table=table+"<tr><td>书名</td><td>作者</td><td>出版时间</td><td>价格</td></tr>"
varcontent=xmlhttp.responseXML.documentElement.getElementsByTagName('book');//获取遍历循环的内容
vari=0;
for(i=0;i<content.length;i++){
table=table+"<tr>"//2
vartr=content[i].getElementsByTagName('title');
{
try{
table=table+"<td>"+tr[0].firstChild.nodeValue+"</td>";//3
}catch(er){
table=table+"<td></td>";//3
}
}
vartr=content[i].getElementsByTagName('author');
{
try{
table=table+"<td>"+tr[0].firstChild.nodeValue+"</td>";//3
}catch(er){
table=table+"<td></td>";//3
}
}
vartr=content[i].getElementsByTagName('year');
{
try{
table=table+"<td>"+tr[0].firstChild.nodeValue+"</td>";//3
}catch(er){
table=table+"<td></td>";//3
}
}
vartr=content[i].getElementsByTagName('price');
{
try{
table=table+"<td>"+tr[0].firstChild.nodeValue+"</td>";//3
}catch(er){
table=table+"<td></td>";//3
}
}
table=table+"</tr>";
}
table=table+"</table>";
document.getElementById('content').innerHTML=table;//把获取的转换后的table插入页面元素
}
}
</script>
</head>
<body>
<divstyle="border:1pxsolidblack;font:16px;font-family:黑体">
通过ajax方式改变内容哦：</br>
Status:<spanid="status"></span></br>
ReadyState:<spanid="readyState"></span></br>
responseText:<spanid="content">哈哈哈哈</span></br>

<buttononclick="loadTextByAjax('txt')">点我加载txt文本内容</button>
<buttononclick="loadTextByAjax('xml')">点我加载xml内容</button>
<buttononclick="loadTextByAjax('table')">点我xml转换成table</button>
</div>
</body>
</html>

下面是xml.xml文件内容，可直接复制粘贴内容：

<bookstore>
<bookcategory="children">
<titlelang="en">HarryPotter</title>
<author>JK.Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<bookcategory="cooking">
<titlelang="en">EverydayItalian</title>
<author>GiadaDeLaurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<bookcategory="web"cover="paperback">
<titlelang="en">LearningXML</title>
<author>ErikT.Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
<bookcategory="web">
<titlelang="en">XQueryKickStart</title>
<author>JamesMcGovern</author>
<author>PerBothner</author>
<author>KurtCagle</author>
<author>JamesLinn</author>
<author>VaidyanathanNagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
</bookstore>

文本内容test.txt文本内容：

theisafirstcontent，soeasy！

虽然例子比较简单，但是好记性不如烂笔头嘛，整理一下留个笔记，方便以后观看学习。

AJAX学习整理二之简单实例

猜你在找的Ajax相关文章