java ajax from post_2、Ajax与Java通过POST方式交互

标签：

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代码

点击

     2.2 JavaScript代码

//1、获取到xmlhttprequest

function getXmlhttp() {

var xmlhttp;

if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp = new XMLHttpRequest();

} else { // code for IE6, IE5

xmlhttp = 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");

};

}

       2.3  style代码

#myAjax {

width: 400px;

height: 400px;

border: 1px dashed red;

text-align: center; /* div中的文字水平方向居中显示 */

line-height: 400px; /*这个和div的高度相同,div中的文字就会垂直方向居中显示 */

font-size: 16px;

font-weight: bold;

}

     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.5web.xml代码

AjaxServerlet

com.ajax.com.AjaxServerlet

AjaxServerlet

/AjaxServerlet

index.html

标签：