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

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

1.1 html代码

点击

1.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() {

//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");

};

}

1.3 style代码

/*模拟网络不好的等待的图片 */

#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;

}

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代码

AjaxServerlet

com.ajax.com.AjaxServerlet

AjaxServerlet

/AjaxServerlet

index.html

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