您的位置：首页 > 编程语言 > Java开发

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

2016-05-06 13:14 666 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航