1、在Ajax于Java的交互过程中,加入加载图片
1.1 html代码
<body> <button id="mybtn">点击</button> <div id="myAjax"> <img src="./img/load2.jpg" id="myimg"> </div> <!-- 模拟等待的图片 --> </body>
1.2 JavaScript代码
<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() { //6.1在点击获取ajax请求的时候,设置等待的缓冲图片,改变其为显示 var myimg = document.getElementById("myimg"); myimg.style.display = "block"; //1、获取到xmlhttprequest 对象 var xmlhttp = getXmlhttp(); //2、xmlhttprequest的响应事件 xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //6.2 在点击获取ajax请求成功的时候,设置等待的缓冲图片,改变其为隐藏 myimg.style.display = "none"; //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("GET", "AjaxServerlet?age=18&name=zhang", true); */ xmlhttp.open("POST", "AjaxServerlet", true); //4、发送ajax请求 //4.1对于post的请求方式,在send方法里面传输参数,传输的参数必须为字符串 //4.2对于post请求提交的参数,要设置请求头为表单提交,模仿表单的post提交 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send("age=18&name=zhang"); }; } </script>
1.3 style代码
<style type="text/css"> /*模拟网络不好的等待的图片 */ #myAjax { position: relative; width: 400px; height: 400px; border: 1px solid red; text-align: center; font-size: 16; line-height: 400px; font-weight: bold; } #myimg { position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px; display: none; } </style>
1.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); // 模拟网络延迟 try { Thread.sleep(2000); } catch (InterruptedException e) { e.printStackTrace(); } 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); } }
1.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>
时间: 2024-10-20 00:36:36