2. Ajax 와 자바 는 POST 방식 으로 상호작용 한다.
4081 단어 Ajaxpostajax 와 자바 의 대화
1.1 xml. httprequest 가 져 오기
1.2 xml. httprequest 의 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 상호작용 으로 얻 은 데 이 터 를 처리 하고 xml. httprequest 의 onready statechange 응답 이벤트 에서 구체 적 으로 처리 합 니 다.
2. Ajax 와 자바 의 Servlet 는 POST 를 통 해 상호작용 을 한다.
2.1 html 코드
<body>
<button id="mybtn"> </button>
<div id="myAjax"></div>
</body><script type="text/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");
};
}
</script><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>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
웹. 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>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
원생 Ajax와 jQuery Ajax의 차이점 예시 분석선언: 이번에 소개한 것은 aax와 백그라운드를 이용하여 데이터 교환을 하는 작은 예이기 때문에 demo는 서버를 통해 열어야 합니다.서버 환경은 구축하기 매우 좋다. 인터넷에서wamp나xampp를 다운로드하여 한 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
