Ajax 和 Servlet 联动

Posted java小小小小栈

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax 和 Servlet 联动相关的知识，希望对你有一定的参考价值。



        AJAX, Asynchronous javascript and XML。

        通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。


        简单封装 Ajax 工具类。


// ajax.jsfunction getXmlhttpRequset() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {
 try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("您的浏览器不支持AJAX！"); return false; } } } return xmlHttp;}

function ajax(param) {
 // 1.获取xmlHttpRequset var xmlHttp = getXmlhttpRequset();
 // 2.设置请求参数 xmlHttp.open(param.method, param.url);
 // 设置请求头 xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 // 3.发送请求 if (param.method == "POST") { xmlHttp.send(param.data); } else if (param.method == "GET") { xmlHttp.send(); }
    // 4.监听请求状态    xmlHttp.onreadystatechange = function () {     // readyState，Ajax响应状态；status，服务端响应状态。 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
 // 接收 xml 数据。 console.log("XML: " + xmlHttp.responseXML)
 // 6、调用回调函数 param.callback(xmlHttp.responseText); } }}


        服务端接收数据和响应。（部分代码）


@WebServlet("/AjaxServlet/*")public class AjaxServlet extends DispacherServlet {
 public void hello(HttpServletRequest request, HttpServletResponse response) {
 // 接收服务端原数据 try { BufferedReader reader = request.getReader(); System.out.println(reader.readLine()); } catch (IOException e) { e.printStackTrace(); }
 // 接收服务端数据，application/x-www-form-urlencoded String username = request.getParameter("username"); String age = request.getParameter("age"); System.out.println(username + "\t" + age);
 // 响应文本信息到客户端 try { response.getWriter().write("响应文本。"); // response.getWriter().write("<html><body><p>Hello</p> <div>Ajax</div></body></html>"); } catch (IOException e) { e.printStackTrace(); } }}


        index.jsp。


<%@ page contentType="text/html;charset=UTF-8" language="java" %><html> <head> <title>$Title$</title>
 <script type="text/javascript" src="js/ajax.js"></script> <script type="text/javascript">
 window.onload = function () { document.getElementById("button1").addEventListener("click", function () {
 var param = { // method: "GET", // url:"AjaxServlet/hello?username=zs&age=23", method: "POST", url:"AjaxServlet/hello", data:"username=zs&age=23", callback: function (res) { console.log(res); document.getElementById("div1").innerText = res; } };
 ajax(param);
 }) }</script>
 </head> <body>
 <button id="button1">异步访问AjaxServlet</button> <div id="div1" style="border: antiquewhite solid 1px;width: 100px;height: 100px;"></div>
 </body></html>


以上是关于Ajax 和 Servlet 联动的主要内容，如果未能解决你的问题，请参考以下文章

jquery，ajax实现二级省市联动

ajax省市区三级联动

登陆验证和二级联动

struts2.1 和ajax实现二级下拉框联动，使用jquery、json，代码怎么实现。

三级联动 省市 ajax的代码

三级联动 省市 ajax的代码