3、在Ajax于Java的交互过程中,加入加载图片
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>