AJAX提交方法（GET）Demon

2019-11-15 01:02:54

字體：大中小

來源：轉載

供稿：網友

Ajax提交方法（GET）Demon

　　AJAX作為一種異步的javascript程序執行方法，極大的彌補了HTTP協議的不足（HTTP協議為無狀態協議），可以無需加載整個頁面，只需加載所需數據即可，瀏覽器內置的xmlHttp對象有open()方法，可以提供，JS的異步操作。

　　下面演示一個GET方法的小例子，GET與POST相比，當傳輸數據大時，有罕見字符時，建議使用POST；

　　首先我們創建一個.html文檔，名稱隨意，在里面輸入：

<body>        <script type="text/Javascript" src="1.js"></script>        用戶注冊：<br/>        用戶編號：<input type="text" name="str1" id="str1" /><br/>        用戶名稱：<input type="text" name="str2" id="str2" /><br />        <input type="button" value="注冊" onclick="test();" />        <p id="mydiv"  ></p>  </body>

　　這個是body之內的代碼，主要就是一個前端的界面，底下的<p></P>顯示從servlet里面的返回值。

　　創建一個1.js文件，代碼:

var xmlhttp = null;/** *  */function test(){    if(window.XMLHttPRequest){        xmlhttp = new XMLHttpRequest();    }else if(window.ActiveXObject){        xmlhttp = new ActiveXObject("Micorsoft.XMLHTTP");    }else{        alert("創建對象失敗");    }        str1 = document.getElementById("str1").value;    str2 = document.getElementById("str2").value;        xmlhttp.onreadystatechange = test2;    xmlhttp.open("GET", "servlet?str1="+str1+"&str2="+str2, true);    xmlhttp.send(null);    }function test2(){    if(xmlhttp.readyState == 4){        if(xmlhttp.status == 200){            var str3 = xmlhttp.responseText;            document.getElementById("mydiv").innerHTML =str3;        }    }else{        document.getElementById("mydiv").innerHTML = "耐心等待...";    }}

　　下面配置servlet代碼，創建一個sevlet類，在doGet()方法里面寫:

response.setContentType("text/html");        PrintWriter out = response.getWriter();        String str1 =new String(request.getParameter("str1").getBytes("ISO-8859-1"),"UTF-8");        String str2 =new String (request.getParameter("str2").getBytes("ISO-8859-1"),"UTF-8");        String responseText = "userNumber is:"+str1+",userName is:"+str2+"[Menthod is GET]";        out.println(responseText);        out.close();

　　很簡單的servlet,doGet()方法。創建好了之后，在web.xml將servlet的映射（<url-pattern>/servlet</url-pattern>）標簽之內，一樣。

　　點擊注冊之后便會顯示了。