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

最新推荐文章于 2021-08-05 18:48:35 发布

Bwz_Learning

最新推荐文章于 2021-08-05 18:48:35 发布

阅读量955

点赞数 1

分类专栏： Ajax 文章标签： ajax ajax带加载图片 post get ajax与java交互

本文链接：https://blog.csdn.net/zbw18297786698/article/details/51330793

版权

Ajax 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>

Bwz_Learning

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3、在Ajax于Java的交互过程中,加入加载图片

1、在Ajax于Java的交互过程中,加入加载图片 1.1 html代码点击 1.2 JavaScript代码 //1、获取到xmlhttprequest function getXmlhttp() { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7
复制链接

扫一扫