ajax操作XML_牛客博客

注意html引用xml的路径加“”引号

注意getElementsByTagName 里面参数也加引号

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/xml;charset=gb2312">
    <title>Title</title>
    <script language="JavaScript">
        var xmlhttp;
        function createxmlrequest(){
            if(window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }
            else
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        function getxml(xmlUrl){
            var url="/ajax/chap103.xml";
            createxmlrequest();
            xmlhttp.onreadystatechange=HandleStateChange;
            xmlhttp.open("GET",url,true);
            xmlhttp.send(null);
        }
        function HandleStateChange(){
            if(xmlhttp.readyState==4&&xmlhttp.status==200){
                drawtable(xmlhttp.responseXML);
                return true;
            }
        }
        function drawtable(myxml){
            var objstudents=myxml.getElementsByTagName("student");
            var objstudent="",stuid="",stuname="",stuchinese="",stumaths="",stuenglish="";
            for(var i=0;i<objstudents.length;i++){
                objstudent=objstudents[i];
                stuid=objstudent.getElementsByTagName("id")[0].firstChild.nodeValue;
                stuname = objstudent.getElementsByTagName("name")[0].firstChild.nodeValue;
                stuchinese = objstudent.getElementsByTagName("chinese")[0].firstChild.nodeValue;
                stumaths = objstudent.getElementsByTagName("math")[0].firstChild.nodeValue;
                stuenglish = objstudent.getElementsByTagName("english")[0].firstChild.nodeValue;
                addrow(stuid,stuname,stuchinese,stumaths,stuenglish);
            }
        }
        function addrow(stuid,stuname,stuchinese,stumaths,stuenglish){
            var objtable=document.getElementById("score");
            var objrow=objtable.insertRow(objtable.rows.length);
            var stuinfo=new Array();
            stuinfo[0]=document.createTextNode(stuid);
            stuinfo[1]=document.createTextNode(stuname);
            stuinfo[2]=document.createTextNode(stuchinese);
            stuinfo[3]=document.createTextNode(stumaths);
            stuinfo[4]=document.createTextNode(stuenglish);
            for(var i=0;i<stuinfo.length;i++){
                var objcol=objrow.insertCell(i);
                objcol.appendChild(stuinfo[i]);
            }
        }

    </script>
</head>
<body>
<form>
    <p>
        <input type="button" id="btn" οnclick="getxml();">
    </p>
    <p>
    <table id="score">
        <tr>
            <th>id</th>
            <th>name</th>
            <th>chinese</th>
            <th>math</th>
            <th>english</th>
        </tr>
    </table>
    </p>
</form>
</body>
</html>

xml

<?xml version="1.0" encoding="gb2312" ?>
<list>
    <caption>scorelist</caption>
    <student>
        <id>001</id>
        <name>MissZhou</name>
        <chinese>99</chinese>
        <math>99</math>
        <english>99</english>
    </student>
</list>

下面的例子是关于使用request对象得到字符串ajax更新的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <title>Title</title>
    <script language="JavaScript">
        function createquerystring(otext){
            var sinput=document.getElementById(otext).value;
            var querystring="otext="+sinput;
            return querystring;
        }
        function getdata(oserver,otext,ospan){
            var xmlhttp;
            if(window.XMLHttpRequest)xmlhttp=new XMLHttpRequest();
            var querystring="http://localhost/ajax/chap104.php"+"?";
           querystring+=createquerystring(otext)+"×tamp="+new Date().getTime();
           // querystring+="?first="+document.getElementById('dosubmit').value;
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState==4&&xmlhttp.status==200){
                    var responsespan=document.getElementById(ospan);
                    responsespan.innerHTML=xmlhttp.responseText;
                    delete xmlhttp;
                    xmlhttp=null;
                    return true;
                }
            }
            xmlhttp.open("GET",querystring);
            xmlhttp.send(null);
        }
        function test(){
            getdata('chap104.php','first','firstspan');
            getdata('chap104.php','second','secondspan');
        }
    </script>
</head>
<body>
    <form>
        first：<input type="text" id="first" name="fi">
        <span id="firstspan"></span>
        <br>
        second：<input type="text" id="second" name="se">
        <span id="secondspan"></span>
        <br>
        <br>
        <input type="button" id="dosubmit" οnclick="test();">
    </form>
</body>
</html>

php

<?php
header('Content-Type:text/html;charset=gb2312');
/**
 * Created by PhpStorm.
 * User: admin-pc
 * Date: 2016/6/5
 * Time: 10:17
 */
/**
foreach($_REQUEST as $value){
    var_dump($value);
}
$tmp=$_REQUEST["fi"];
var_dump($tmp);*/
//$des=$_GET['first'];
foreach ($_REQUEST as  $value)
{
    var_dump($value);
}

效果图

再写一个关于动态树状菜单的

效果图

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <script language="javascript">
        function $(id){return document.getElementById(id);}
        var request;
        var obj;
        var response1;
        var pid;
        function showmenu(){
            if(request.readyState==4&&request.status==200)
            {
                var pid=obj.parentNode.id;
                var newnode=document.createElement("UL");
                response1=request.responseText;
                newnode.innerHTML=response1;
              //  alert(pid);
                $(pid).parentNode.insertBefore(newnode,document.getElementById(pid).nextSibling);
                var img=$(pid).id;
                $("img"+img.substr(2)).src="img/sync.gif";
            //    delete xmlhttp;
              //  xmlhttp=null;
            }
            else if(request.readyState==4)
            {
                obj=document.getElementById("content");
                obj.innerHTML="wrong";
            }return true;
        }
        function onclickmenu(url,destination,object)
        {
            obj=object;
            var dest=destination;
            var pid=obj.parentNode.id;
            if($(pid).nextSibling&&$(pid).nextSibling.tagName=="UL")
            {
                if($(pid).nextSibling.style.display=="none")
                {
                    $(pid).nextSibling.style.display="";
                    $("img"+dest.substr(2)).src="img/sync.gif";
                }
                else
                {
                    $("img"+dest.substr(2)).src="img/folder.gif";
                    $(pid).nextSibling.style.display="none"
                }
            }
            else
            {
                var u=url+"&dest="+dest;
                if(window.XMLHttpRequest)
                {
                    request=new XMLHttpRequest();
                    request.onreadystatechange=showmenu;
                    request.open("GET",u,true);
                    request.send(null);
                }
                else if(window.ActiveXObject){
                    request=new ActiveXObject("Microsoft.XMLHTTP");
                }
             /**  if(request)
                {
                    request.onreadystatechange=showmenu;
                    request.open("GET",u,true);
                    request.send(null);
                }*/
            }
        }
    </script>

</head>
<body>
    <UL id="menu">
        <li id='li1'>
            <a href=# οnclick=onclickmenu('chap115.php?panel_id=0','li1',this)>
                <img id='img1' src='img/folder.gif' border="0">books
            </a>
        </li>
        <li id='li2'>
            <a href=# οnclick=onclickmenu('chap115.php?panel_id=0','li2',this)>
                <img id='img2' src='img/folder.gif' border="0">notepad
            </a>
        </li>
    </UL>
    <div id="content"></div>
</body>
</html>

php

<?php
/**
 * Created by PhpStorm.
 * User: admin-pc
 * Date: 2016/6/5
 * Time: 21:03
 */
header('Content-Type:text/html;charset=gb2312');
$aa=$_GET['panel_id'];
$des=$_GET['dest'];
$pathaa=$des.$aa;
$pathbb=$des."1";
$imgaa="img".substr($des,2).$aa;
$imgbb="img".substr($des,2)."1";
$str="<li id='$pathaa'>
        <a href=# οnclick=onclickmenu('chap115.php?panel_id=$aa','$pathaa',this)>
        <img id='$imgaa' src='img/folder.gif' border='0'>book".$pathaa."</a>
     </li>
    <li id='$pathbb'>
        <a href=# οnclick=onclickmenu('chap115.php?panel_id=$aa','$pathaa',this)>
          <img id='$imgbb' src='img/folder.gif' border='0'>notepad".$aa."</a>
        </a>
    </li>
";
print($str);
?>

附上一份jsp实验作业的报告

效果图

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <title>Title</title>
    <style type="text/css">
        input{color: blue}
    </style>
    <style>
        @import url('mycss.css');
    </style>
    <link rel="stylesheet" type="text/css" href="mycss.css">
    <script language="JavaScript">
        function createquerystring(otext){
            var sinput=document.getElementById(otext).value;
            var querystring="otext="+sinput;
            return querystring;
        }
        function getdata(oserver,otext,ospan){
            var xmlhttp;
            if(window.XMLHttpRequest)xmlhttp=new XMLHttpRequest();
            var querystring="http://localhost/ajax/chap104.php"+"?";
            querystring+=createquerystring(otext);//+"×tamp="+new Date().getTime();
            // querystring+="?first="+document.getElementById('dosubmit').value;
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState==4&&xmlhttp.status==200){
                    var responsespan=document.getElementById(ospan);
                    //if(xml.responseText[0]=="")responsespan.innerHTML="none";
                    responsespan.innerHTML="";
                    var s=xmlhttp.responseText.toString();
                  //  responsespan.innerHTML=s;
                   // responsespan.innerHTML+=s.length;
                    if(ospan=='firstspan')responsespan.innerHTML+="用户名";
                    if(ospan=='secondspan'){
                        responsespan.innerHTML+="密码";
                        if(s.length!=10)responsespan.innerHTML+="必须8位";
                        else if(s.length==2)responsespan.innerHTML+="不能为空";
                        else responsespan.innerHTML+="可以";
                    }
                    if(ospan=='thirdspan')responsespan.innerHTML+="真实姓名";
                    if(ospan=='forthspan')
                    {
                        responsespan.innerHTML+="年龄";//+eval(ss[2].toString());
                        var number=0;
                        for(var i=2;i<=s.length-1;i++)
                        {
                            number+=(eval(s.charCodeAt(i))-48);
                            number*=10;
                        }
                        number/=10;
                        //responsespan.innerHTML+=number.toString();
                        if(number<0||number>120)responsespan.innerHTML+="年龄应在0-120之间";
                        else responsespan.innerHTML+="可以";
                    }
                    if(s.length==2&&ospan!='forthspan'&&ospan!='secondspan')responsespan.innerHTML+="不能为空";
                    else if(ospan!='forthspan'&&ospan!='secondspan')responsespan.innerHTML+="可以";
                    delete xmlhttp;
                    xmlhttp=null;
                    return true;
                }
            }
            xmlhttp.open("GET",querystring);
            xmlhttp.send(null);
        }
        function test(){
            getdata('chap104.php','first','firstspan');
            getdata('chap104.php','second','secondspan');
            getdata('chap104.php','third','thirdspan');
            getdata('chap104.php','forth','forthspan');
        }
    </script>
</head>
<body>
<form style="font-size: 18px">
    用户名：<input type="text" id="first" name="用户名" οnchange="test();">
    <span id="firstspan"></span>
    <br>
    密码：<input type="password" id="second" name="密码" οnchange="test();">
    <span id="secondspan"></span>
    <br>
    真实姓名：<input type="text" id="third" name="真实姓名" οnchange="test();">
    <span id="thirdspan"></span>
    <br>
    年龄：<input type="text" id="forth" name="年龄" οnchange="test();">
    <span id="forthspan"></span>
    <br>
</form>
</body>
</html>

php

<?php
header('Content-Type:text/html;charset=gb2312');
/**
 * Created by PhpStorm.
 * User: admin-pc
 * Date: 2016/6/5
 * Time: 10:17
 */
/**
foreach($_REQUEST as $value){
    var_dump($value);
}
$tmp=$_REQUEST["fi"];
var_dump($tmp);*/
//$des=$_GET['first'];
foreach ($_REQUEST as  $value)
{
    echo $value;
}