首页 > 代码库 > AJAX学习整理二之简单实例
AJAX学习整理二之简单实例
做了几个简单的实例，加载txt文本内容、加载xml文件内容，把xml文本内容转换成html表格显示。废话不多说，直接贴代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<title>通过ajax获取文本内容</title>
<meta charset="utf-8">
<script>
//加载文件
var loadTextByAjax = function(type){
//第一步，创建XMLHttpRequest对象
var xmlhttp;
if(window.XMLHttpRequest){// Firefox, Opera 8.0+, Safari, IE7
xmlhttp = new XMLHttpRequest();
}else{// Old IE
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
console.log("old IE");
}
//第二步，编写回调函数
xmlhttp.onreadystatechange = function load(){
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","Resources/xml.xml",true);
break;
}
//第四步，发送请求
xmlhttp.send();
//xml转换html表格显示
var transform = function(){
var table = "<table border=‘1‘ style=‘color: blue‘>";//1
table = table +"<tr><td>书名</td><td>作者</td><td>出版时间</td><td>价格</td></tr>"
var content = xmlhttp.responseXML.documentElement.getElementsByTagName(‘book‘);//获取遍历循环的内容
var i = 0;
for(i = 0; i<content.length; i++){
table = table + "<tr>"//2
var tr = content[i].getElementsByTagName(‘title‘);
{
try{
table = table + "<td>"+tr[0].firstChild.nodeValue+"</td>";//3
}catch(er) {
table = table + "<td> </td>";//3
}
}
var tr = content[i].getElementsByTagName(‘author‘);
{
try{
table = table + "<td>"+tr[0].firstChild.nodeValue+"</td>";//3
}catch(er) {
table = table + "<td> </td>";//3
}
}
var tr = content[i].getElementsByTagName(‘year‘);
{
try{
table = table + "<td>"+tr[0].firstChild.nodeValue+"</td>";//3
}catch(er) {
table = table + "<td> </td>";//3
}
}
var tr = 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>
<div style="border:1px solid black;font: 16px;font-family: 黑体">
通过ajax方式改变内容哦：</br>
Status:<span id="status"></span></br>
ReadyState:<span id="readyState"></span></br>
responseText:<span id="content">哈哈哈哈</span></br>
<button onclick="loadTextByAjax(‘txt‘)">点我加载txt文本内容</button>
<button onclick="loadTextByAjax(‘xml‘)">点我加载xml内容</button>
<button onclick="loadTextByAjax(‘table‘)">点我xml转换成table</button>
</div>
</body>
</html>下面是xml.xml文件内容，可直接复制粘贴内容：
<bookstore> <book category="children"> <title lang="en">Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book> <book category="cooking"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="web" cover="paperback"> <title lang="en">Learning XML</title> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </book> <book category="web"> <title lang="en">XQuery Kick Start</title> <author>James McGovern</author> <author>Per Bothner</author> <author>Kurt Cagle</author> <author>James Linn</author> <author>Vaidyanathan Nagarajan</author> <year>2003</year> <price>49.99</price> </book> </bookstore>
文本内容test.txt文本内容：
the is a first content，so easy ！
虽然例子比较简单，但是好记性不如烂笔头嘛，整理一下留个笔记，方便以后观看学习。
本文出自 “Do、IT” 博客，请务必保留此出处http://yangscto.blog.51cto.com/8374342/1426913
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。