AJAX 原生js以及Jquery解析html,xml,txt,json格式文本

最新推荐文章于 2023-11-03 15:08:44 发布

GardenerHan

最新推荐文章于 2023-11-03 15:08:44 发布

阅读量6.9k

点赞数 1

分类专栏： jsp jquery js 文章标签： jquery html ajax xml 函数

本文链接：https://blog.csdn.net/hgx_suiyuesusu/article/details/77984195

版权

jsp 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

面向对象面向君，不负代码不负卿。 *^o^*

原生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,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^*

GardenerHan

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录