1. Steps for Ajax interaction
1.1 get to XMLHttpRequest
1.2 Setting onreadystatechange response events for XMLHttpRequest
1.3 Prepare to get Ajax request Xmlhttp.open ("Get", "Ajaxserverlet?age=18&name=zhang", true); The //ajax method is requested by the Get mode, and the parameter is carried by Xmlhttp.open ()
1.4 Send Ajax request Xmlhttp.send ();
1.5 processing the data obtained by Ajax interactions, the specific processing implemented in the onReadyStateChange response event of the XMLHttpRequest
2. A small example of the interaction between Ajax and Java servlet
2.1 html code
<body><button id= "MYBTN" > Click </button><div id= "Myajax" ></div></body>
<script type= "Text/javascript" >//1, gets to 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, get to XMLHttpRequest object var xmlhttp = Getxmlhttp ();//2, XMLHttpRequest response Event Xmlhttp.onreadystatechange = function () {if (xmlhttp.readystate = = 4 && Xmlhttp.status = = 200) {//5, the information obtained by the operation//5.1 the data returned by Ajax, converted to a JavaScript object//5.1.1 using Eval to achieve conversion var Ajaxresult = eval ("(" + XMLHTTP . ResponseText + ")");//5.1.2 using JQuery, for Jquery.parsejson (), the key value must be double quotes//var ajaxresult = Jquery.parsejson ( Xmlhttp.responsetext); *///5.2 gets the properties of a JavaScript object var age = Ajaxresult.age;var name = ajaxresult.name;//5.3 Gets the div to the page and sets the content var mydiv = document.getElementById ("Myajax"); mydiv.innerhtml = "Name:" + name + "," + "Age:" + Age;}} 3, prepare to get Ajax request//3.1 for Get requests, with parameters, directly in the Open function request address with the parameter Xmlhttp.open ("GET", "Ajaxserverlet?age=18&name=zhang", true); 4. Send Ajax request Xmlhttp.send ();};} </script>
2.3 Style Code
<style type= "Text/css" > #myAjax {width:400px;height:400px;border:1px dashed red;text-align:center;/* The text in the Div is centered in the horizontal direction to display */line-height:400px; /* This is the same height as the Div, and the text in the Div will be centered vertically */font-size:16px;font-weight:bold;} </style>3. Ajaxserverlet.java Code
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);}}<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, Ajax and Java through get mode interaction
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
