2、Ajax与Java通过POST方式交互

来源：互联网发布：战舰世界mac版国服编辑：程序博客网时间：2024/06/05 17:55

1、关于Ajax交互的步骤

1.1 获取到xmlhttprequest

1.2 设置xmlhttprequest的onreadystatechange响应事件

1.3 准备获取ajax请求 xmlhttp.open("POST", "AjaxServerlet", true);

1.4 设置消息头为表单形式,模仿表单的POSt提交xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

1.5 发送ajax请求xmlhttp.send("age=18&name=zhang"); //Ajax的POST请求,参数是通过xmlhttp.send()方法携带的

1.6 处理Ajax交互获取到的数据,具体的处理在xmlhttprequest的onreadystatechange响应事件中实现

2、Ajax与Java的Servlet通过POSt交互

2.1 html代码

<body><button id="mybtn">点击</button><div id="myAjax"></div></body>

2.2 JavaScript代码

<script type="text/javascript">//1、获取到xmlhttprequestfunction getXmlhttp() {var xmlhttp;if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp = new XMLHttpRequest();} else { // code for IE6, IE5xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}return xmlhttp;}window.onload = function() {document.getElementById('mybtn').onclick = function() {//1、获取到xmlhttprequest 对象var xmlhttp = getXmlhttp();//2、xmlhttprequest的响应事件xmlhttp.onreadystatechange = function() {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {//5、操作获取到的信息//5.1ajax返回的数据,转换为javascript对象// 5.1.1 利用eval实现转换var ajaxResult = eval("(" + xmlhttp.responseText + ")");//5.1.2 利用jquery的方法,对于jQuery.parseJSON(),键值必须为双引号/* var ajaxResult = jQuery.parseJSON(xmlhttp.responseText); */alert(ajaxResult)//5.2获取JavaScript对象的属性var age = ajaxResult.age;var name = ajaxResult.name;//5.3获取到页面的DIV,并设置内容var mydiv = document.getElementById("myAjax");mydiv.innerHTML = "name:" + name + "," + "age:" + age;}}//3、准备获取ajax请求//3.1 对于get请求,带参数的方式,直接在open函数的请求地址带上参数xmlhttp.open("POST", "AjaxServerlet", true);//4、发送ajax请求xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlhttp.send("age=18&name=zhang");};}</script>

2.3 style代码

<style type="text/css">#myAjax {width: 400px;height: 400px;border: 1px dashed red;text-align: center; /* div中的文字水平方向居中显示 */line-height: 400px; /*这个和div的高度相同,div中的文字就会垂直方向居中显示  */font-size: 16px;font-weight: bold;}</style>

2.4 AjaxServerlet.java代码

public class AjaxServerlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String age = request.getParameter("age");String name = request.getParameter("name");Person person = new Person(name, age);String personJSON = "{\"name" + "\":\"" + name + "\"," + "\"age"+ "\":" + age + "}";System.out.println(personJSON);response.getWriter().write(personJSON);}public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {doGet(request, response);}}

2.5 web.xml代码

<servlet><servlet-name>AjaxServerlet</servlet-name><servlet-class>com.ajax.com.AjaxServerlet</servlet-class></servlet><servlet-mapping><servlet-name>AjaxServerlet</servlet-name><url-pattern>/AjaxServerlet</url-pattern></servlet-mapping><welcome-file-list><welcome-file>index.html</welcome-file></welcome-file-list>

1 0