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

原文：http://blog.csdn.net/zbw18297786698/article/details/51330357

總結

以上是生活随笔為你收集整理的java ajax post_2、Ajax与Java通过POST方式交互的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。