3、在Ajax于Java的交互过程中,加入加载图片

来源：互联网发布：编制图片软件编辑：程序博客网时间：2024/05/16 08:57

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、获取到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() {//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>

1 0