Ajax解析html、xml、json、js原生方式、jquery方式

来源：互联网发布：儿童电脑画图软件编辑：程序博客网时间：2024/04/30 18:36

ajax之helloWorld

这里写图片描述

myjsp.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><html><head><script type="text/javascript">        window.onload = function(){        // 获取a节点，添加响应函数        document.getElementsByTagName("a")[0].onclick = function(){        // 创建一个XMLHttpRequest对象        var request = new XMLHttpRequest();        // 准备发送请求的url，及其发送方式(多用时间戳)        var url = this.href+"?time"+new Date();        var method = "POST";        // 调用对象的open方法        request.open(method,url);        //如果需要post则需要下面这行告诉符合编码方式        request.setRequestHeader("ContentType","application/x-www-form-urlencoded");        // 调用send方法        request.send("name='atguigu'");     // 对对象添加响应函数-该函数由服务器触发，不是用户触发，通知客户端当前的通讯状态        request.onreadystatechange = function(){        // 判断响应是否完成        if(request.readyState == 4){        // 判断响应是否可用        if(request.status == 200 || request.status == 304){                // 打印响应结果                alert(request.responseText);                }            }        }        // 取消a节点的默认行为        return false;        }    }   </script>  </head>  <body>    <a href="helloAjax.txt">HelloAjax</a>  </body></html>

不通过超链接的方式获取文本，而是通过打印的方式获取—这个案例手敲代码

html数据交互格式

andy.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title></head><body><h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2><a href="http://andybudd.com/">http://andybudd.com/</a></body></html>

myjsp.jsp

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <script type="text/javascript">    window.onload = function(){        var aNodes = document.getElementsByTagName("a");        for(var i = 0;i < aNodes.length;i++){        aNodes[i].onclick = function(){            var request = new XMLHttpRequest();            var method = "GET";            var url = this.href;            request.open(method,url);            request.send(null);            request.onreadystatechange = function(){        if(request.readyState == 4){        if(request.status == 200 || request.status == 304){                         document.getElementById("details").innerHTML = request.responseText;                    }                }            }                return false;            }        }    }  </script></head><body>  <h1>People</h1>  <ul>    <li>      <a href="andy.html">Andy</a>    </li>  </ul>  <div id="details"></div></body></html>

这里写图片描述

xml数据交互格式

andy.xml

<?xml version="1.0" encoding="utf-8"?><details>  <name>Andy Budd</name>  <website>http://andybudd.com/</website>  <email>andy@clearleft.com</email></details>

myjsp.jsp

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <script type="text/javascript">    window.onload = function(){        var aNodes = document.getElementsByTagName("a");        for(var i = 0;i < aNodes.length;i++){        aNodes[i].onclick = function(){            var request = new XMLHttpRequest();            var method = "GET";            var url = this.href;            request.open(method,url);            request.send(null);            request.onreadystatechange = function(){                    if(request.readyState == 4){                    if(request.status == 200 || request.status == 304){                        var result = request.responseXML;                        var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;                        var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;                        var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;                        alert(name);                        alert(website);                        alert(email);                        /**                        <h2><a href="mailto:andy@clearleft.com">Andy Budd</a></h2>                        <a href="http://andybudd.com/">http://andybudd.com/</a>                        */                        var aNode = document.createElement("a");                        aNode.appendChild(document.createTextNode(name));                        aNode.href = "mailto" + email;                        var h2Node = document.createElement("h2");                        h2Node.appendChild(aNode);                        var aNode2 = document.createElement("a");                        aNode2.appendChild(document.createTextNode(website));                        aNode2.href = website;                        var detailsNode = document.getElementById("details");                        detailsNode.innerHTML = "sss";                        detailsNode.appendChild(h2Node);                        detailsNode.appendChild(aNode2);                    }                }            }                return false;            }        }    }  </script></head><body>  <h1>People</h1>  <ul>    <li>      <a href="andy.xml">Andy</a>    </li>    <li>      <a href="richard.xml">Richard</a>    </li>    <li>      <a href="jeremy.xml">Jeremy</a>    </li>  </ul>  <div id="details"></div></body></html>

这里写图片描述

gson字符串转为对象

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <script type="text/javascript">    var jsonObject = {        "name":"atguigu",        "age":"12",        "address":{"city":"BeiJing","school":"尚硅谷"},        "teaching":function(){            alert("javaee,android");        }    };    alert(jsonObject.name);    alert(jsonObject.address.city);    jsonObject.teaching();    //eval可以把一个字符串转为js代码来执行    var testStr = "alert('hello eval')";    eval(testStr);    //json字符串转为对象    var jsonStr = "{'name':'atguigu'}";    var testObject = eval("("+jsonStr+")");    alert(testObject.name);  </script></head><body></body></html>

gson数据交互格式

andy.js

{"person":{  "name":"Andy Buddddd",  "website":"http://andybudd.com/",  "email":"andy@clearleft.com"}  }

myjsp.jsp

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>  <meta http-equiv="content-type" content="text/html; charset=utf-8" />   <script type="text/javascript">    window.onload = function(){        var aNodes = document.getElementsByTagName("a");        for(var i = 0;i < aNodes.length;i++){        aNodes[i].onclick = function(){            var request = new XMLHttpRequest();            var method = "GET";            var url = this.href;            request.open(method,url);            request.send(null);            request.onreadystatechange = function(){                    if(request.readyState == 4){                    if(request.status == 200 || request.status == 304){                        var result = request.responseText;                        var object = eval("(" + result + ")");                        var name = object.person.name;                        var website = object.person.website;                        var email = object.person.email;                        alert(name);                        alert(website);                        alert(email);                        var aNode = document.createElement("a");                        aNode.appendChild(document.createTextNode(name));                        aNode.href = "mailto" + email;                        var h2Node = document.createElement("h2");                        h2Node.appendChild(aNode);                        var aNode2 = document.createElement("a");                        aNode2.appendChild(document.createTextNode(website));                        aNode2.href = website;                        var detailsNode = document.getElementById("details");                        detailsNode.innerHTML = "";                        detailsNode.appendChild(h2Node);                        detailsNode.appendChild(aNode2);                    }                }            }                return false;            }        }    }  </script></head><body>  <h1>People</h1>  <ul>    <li>      <a href="andy.js">Andy</a>    </li>  </ul>  <div id="details"></div></body></html>

提示：andy.js在javaee编译器上报红叉，运行结果异常

js原生同步、异步

    function fn1(){        //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象        var xmlHttp = new XMLHttpRequest();        //2、绑定监听 ---- 监听服务器是否已经返回相应数据        xmlHttp.onreadystatechange = function(){            if(xmlHttp.readyState==4&&xmlHttp.status==200){                //5、接受相应数据                var res = xmlHttp.responseText;                document.getElementById("span1").innerHTML = res;            }        }        //3、绑定地址        xmlHttp.open("GET","/WEB22/ajaxServlet?name=lisi",true);        //4、发送请求        xmlHttp.send();    }    function fn2(){        //1、创建ajax引擎对象 ---- 所有的操作都是通过引擎对象        var xmlHttp = new XMLHttpRequest();        //2、绑定监听 ---- 监听服务器是否已经返回相应数据        xmlHttp.onreadystatechange = function(){            if(xmlHttp.readyState==4&&xmlHttp.status==200){                //5、接受相应数据                var res = xmlHttp.responseText;                document.getElementById("span2").innerHTML = res;            }        }        //3、绑定地址        xmlHttp.open("POST","/WEB22/ajaxServlet",false);        //4、发送请求        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");        xmlHttp.send("name=wangwu");    }

servlet代码如下：

protected void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        String parameter = request.getParameter("name");        response.getWriter().write(Math.random()+parameter);    }

query的get、post、ajax方法

    function fn1(){        //get异步访问        $.get(            "/WEB22/ajaxServlet2", //url地址            {"name":"张三","age":25}, //请求参数            function(data){ //执行成功后的回调函数                //{\"name\":\"tom\",\"age\":21}                alert(data.name);            },            "json"        );    }    function fn2(){        //post异步访问        $.post(            "/WEB22/ajaxServlet2", //url地址            {"name":"李四","age":25}, //请求参数            function(data){ //执行成功后的回调函数                alert(data.name);            },            "json"        );    }    function fn3(){        $.ajax({            url:"/WEB22/ajaxServlet2",            async:true,            type:"POST",            data:{"name":"lucy","age":18},            success:function(data){                alert(data.name);            },            error:function(){                alert("请求失败");            },            dataType:"json"        });    }

servlet代码如下：

    protected void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        request.setCharacterEncoding("UTF-8");        String name = request.getParameter("name");        String age = request.getParameter("age");        System.out.println(name+"  "+age);        //java代码只能返回一个json格式的字符串        response.setContentType("text/html;charset=UTF-8");        response.getWriter().write("{\"name\":\"汤姆\",\"age\":21}");    }

0 0