原生js解析HTM文件,txt文件
ajax/ajax1.js
window.onload = function() {
//1.给第一个a标签添加onclick函数
document.getElementsByTagName('a')[0].onclick = function() {
// 2.创建一个XMLHttpRequest对象
var xmlHttp = null;
if (window.XMLHttpRequest) {
//IE6以上，google，火狐支持
xmlHttp = new XMLHttpRequest();
} else {
//支持IE5及以下
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//3.准备发送的数据url:
var url = this.href+"?time="+new Date() ;//时间戳
var method = "post" ;//post方式提交
//4.调用XMLHttpRequest对象open方法
xmlHttp.open(method,url) ;
//post
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); ;
//5.调用XMLHttpRequest对象的方法
xmlHttp.send("name='sdfs'") ;
//6.XMLHttRequest对象添加onreadystatechange响应函数
xmlHttp.onreadystatechange = function(){
alert(xmlHttp.readyState) ;
if(xmlHttp.readyState==4){//xmlHttp.readyState为4时响应完成
if(xmlHttp.status == 200){//响应是否可用
document.getElementsByTagName('a')[0].innerHTML
= xmlHttp.responseText ;//响应结果
}
}
}
//取消a节点onclick默认行为
return false ;
}
}
text/ajax1.html
<a href="aaa.html">hello world</a>
ajax1.jsp
<script type="text/javascript" src="ajax/ajax1.js" charset="UTF-8"></script>
</head>
<body>
<a href="text/ajax1.html">ajax1</a>
</body>
显示效果
<a href="text/ajax1.html"><a href="aaa.html">hello world</a></a>
jquery解析HTML文件，txt文件
ajax_jqurey/ajax-html-jquery.js
$(function(){
$('a').click(function(){
var url = this.href+" a" ;//当前路径下 并且选择a标签
var args = {"time":new Date()} ;//时间戳 (JSON格式)
$("#h3").load(url,args) ;//load 将内容直接加入到 id = h3 下
return false ;//取消a标签的默认行为
});
})
ajax-html-jquery.jsp
<a href="text/ajax-html-jquery.html">ajax-html-jquery</a>
<a href="text/ajax-html-jquery2.html">ajax-html-jquery2</a>
<h3 id="h3"></h3>
text/ajax-html-jquery.html
<h2><a href="#">我是a</a></h2>
<span>sdadjk</span>
<a>ppp</a>
原生js解析xml
ajax/ajax2.js
window.onload = function() {
var aNodes = document.getElementsByTagName('a');//所有的a标签
for (i = 0; i < aNodes.length; i++) {
aNodes[i].onclick = function() {//为每一个a标签添加onclick事件
var request = new XMLHttpRequest();//创建一个XMLHttpRequest对象
var method = "GET";//提交方式
var url = this.href + "?time=" + new Date();//时间戳
request.open(method,url);//调用open()方法
request.send(null);//调用send()方法
request.onreadystatechange = function() {//添加onreadystatechange方法 该方法在readyState每次修改都会调用
alert(request.readyState);//弹出当前的readyState值
if (request.readyState == 4) {//响应完成
if (request.status == 200 || request.status == 304) {//响应可用
var xml = request.responseXML;//接收 回应的xml格式文本
//解析xml
var name = xml.getElementsByTagName('name')[0].firstChild.nodeValue;//得到xml文本 标签名为name的第一个节点 的子节点 的文本值
var age = xml.getElementsByTagName('age')[0].firstChild.nodeValue;
var garde = xml.getElementsByTagName('garde')[0].firstChild.nodeValue;
var specialty = xml.getElementsByTagName('specialty')[0].firstChild.nodeValue;
// alert(name);//弹出内容
// alert(age);
// alert(garde);
// alert(specialty);
var ul = document.createElement('ul');//创建一个UL节点
var li1 = document.createElement('li');//创建一个li节点
var li2 = document.createElement('li');
var li3 = document.createElement('li');
var li4 = document.createElement('li');
li1.appendChild(document.createTextNode(name));创建一个文本节点 并将name的值添加到该文本节点中 并将该文本节点加入到li1下
li2.appendChild(document.createTextNode(age));
li3.appendChild(document.createTextNode(garde));
li4.appendChild(document.createTextNode(specialty));
var div1 = document.getElementById('div1');//获取di=div1的节点
div1.innerHTML = "";//将div内容清除
ul.appendChild(li1);//将li加入到ul下
ul.appendChild(li2);
ul.appendChild(li3);
ul.appendChild(li4);
div1.appendChild(ul);将ul加入到div1下
}
}
}
return false;//取消a的 onclick默认行为
}
}
}
ajax2.jsp
<a href="text/1.xml">xml解析1</a> <a href="text/2.xml">xml解析2</a> <div id="div1"></div>
text/1.xml
<?xml version="1.0" encoding="UTF-8"?>
<person>
<name>乐乐</name>
<age>20</age>
<garde>中</garde>
<specialty>音乐</specialty>
</person>
text/2.xml
<?xml version="1.0" encoding="UTF-8"?>
<person>
<name>八戒</name>
<age>10</age>
<garde>低</garde>
<specialty>结界</specialty>
</person>
jquery解析xml
ajax_jqurey/ajax-xml-jquery.js
$(function(){
$('a').click(function(){
var url = this.href ;
var args = {"time":new Date()} ;
//post将get改为post即可
//function:回掉函数 当响应结束时被触发 响应结果在data中
$.get(url,args,function(data){
var name = $(data).find("name").text() ;//将data包装成一个jqurery对象 调用find() 再调用text()获取name下的文本值
var age = $(data).find("age").text() ;
var garde = $(data).find("garde").text() ;
var specialty = $(data).find("specialty").text() ;
$("#h3").empty().append(""+name+"<a href='"+garde+".html'>"+garde+"</a>").append("age:"+age+"").append(""+specialty+"") ;
}) ;
return false ;
});
})
ajax2.jsp
<a href="text/1.xml">xml解析1</a>
<a href="text/2.xml">xml解析2</a>
<div id="div1"></div>
text/1.xml
<?xml version="1.0" encoding="UTF-8"?>
<person>
<name>乐乐</name>
<age>20</age>
<garde>中</garde>
<specialty>音乐</specialty>
</person>
text/2.xml
<?xml version="1.0" encoding="UTF-8"?>
<person>
<name>八戒</name>
<age>10</age>
<garde>低</garde>
<specialty>结界</specialty>
</person>
原生js解析json
ajax/json.js
window.onload = function() {
var aNodes = document.getElementsByTagName('a');
for (var i = 0; i < aNodes.length; i++) {
aNodes[i].onclick = function() {
var xmlHttp = new XMLHttpRequest();
var method = "GET";
var url = this.href + "?time=" + new Date();
xmlHttp.open(method,url);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function() {
alert(xmlHttp.readyState);
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
alert(0) ;
var jsonObject = xmlHttp.responseText;//用responseText
var jsonText = eval("(" + jsonObject + ")");//转换为json对象
var name = jsonText.person.name;
var age = jsonText.person.age ;
var garde = jsonText.person.garde;
var specialty = jsonText.person.specialty;
var ul = document.createElement('ul');
var li1 = document.createElement('li');
var li2 = document.createElement('li');
var li3 = document.createElement('li');
var li4 = document.createElement('li');
li1.appendChild(document.createTextNode(name));
li2.appendChild(document.createTextNode(age));
li3.appendChild(document.createTextNode(garde));
li4.appendChild(document.createTextNode(specialty));
var div1 = document.getElementById('div1');
div1.innerHTML = "";
ul.appendChild(li1);
ul.appendChild(li2);
ul.appendChild(li3);
ul.appendChild(li4);
div1.appendChild(ul);
}
}
}
return false;
}
}
}
text/json1.json
{"person":{
"name":"无先","age":10,"garde":"差","specialty" :"吉他"
}
}
text/json2.txt
{"person":{
"name":"丽丽","age":16,"garde":"高","specialty":"音乐"
}
}
json.jsp
<a href="text/json1.json">json1.json</a>
<a href="text/json2.txt">json.txt</a>
<div id="div1"></div>
jquery解析json
ajax_jqurey/ajax-json-jquery.js
$(function(){
$('a').click(function(){
var url = this.href ;
var args = {"time":new Date()} ;
//post将get改为post即可
//function:回掉函数 当响应结束时被触发 响应结果在data中
$.getJSON(url,function(data){//返回的data直接就是一个json对象
var name = data.person.name ;
var age = data.person.age ;
var garde =data.person.garde ;
var specialty = data.person.specialty ;
$("#h3").empty().append(""+name+"<a href='"+garde+".html'>"+garde+"</a>").append("age:"+age+"").append(""+specialty+"") ;
}) ;//如果用get不用getJson此处写为},"JSON") ; 同样是可以的
return false ;
});
})
text/json1.json
{"person":{ "name":"无先","age":10,"garde":"差","specialty" :"吉他" } }
text/json2.txt
{"person":{ "name":"丽丽","age":16,"garde":"高" ,"specialty":"音乐" } }
json.jsp
<a href="text/json1.json">json1.json</a>
<a href="text/json2.txt">json.txt</a>
<div id="div1"></div>