AJAX 原生js以及Jquery解析html,xml,txt,json格式文本
2017-09-14 19:19
896 查看
| 面向对象面向君，不负代码不负卿。 *^o^* |
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"> 104e5 </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,args,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>
| 大牛，别默默看了。快登陆帮我评论吧！ *^o^* |
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Ajax解析html、xml、json、js原生方式、jquery方式
- Ajax请求Servlet返回文本 json html和XML数据并解析xml及responseText和responseXML的区别
- 通过AJAX的JS、JQuery两种方式解析XML
- 原生js，jquery ajax请求以及jsonp的调用
- html中通过js获取接口JSON格式数据解析以及跨域问题
- Ajax——jquery快速实现html、json、xml的ajax应用
- JQuery的ajax获取数据后的处理总结(html,xml,json)
- Ajax与jQuery-利用$.get()和$.post()方法传递html,xml,json数据
- 用原生js,json解析ajax传回来的数据
- SAX解析，DOM解析以及XML HTML JSON之间区别
- 使用原生Ajax处理HTML,XML,JSON数据
- 通过AJAX的JS、JQuery两种方式解析XML示例介绍
- 习惯了使用jQuery的ajax方法，看看原生js使用xmlhttpRequest实现ajax请求
- 原生js，jquery通过ajax获得后台json数据动态新增页面元素
- JQuery的ajax获取数据后的处理总结(html,xml,json)
- jquery中ajax如何返回值到上层函数的方法以及对于js处理json对象方法的记录
- 通过AJAX的JS、JQuery两种方式解析XML示例介绍
- Ajax请求Servlet返回文本 json html和XML数据并解析xml及responseText和responseXML的区别
- JQuery解析HTML、JSON和XML实例详解
- 网络爬虫之php抓取json，xml，js，html示例分析及数据解析