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>
时间: 2024-10-20 00:36:36

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

Java 从Jar文件中动态加载类

由于开发的需要,需要根据配置动态加载类,所以简单测试了一下JAVA动态加载类 定义接口 package loader; public interface HelloIface {     public String hello();          public String sayHi(); } 实现接口 在其他插件类实现此接口,并导出为jar,如D:/tmp/test.jar package loader; public class HelloImpl implements HelloIf

7、jQuery的Ajax与Java交互带加载图片

1.jQuery的Ajax与Java交互带加载图片 1.1 html代码 <body> <div id="main"> <button id="myBut">Ajax获取数据</button> <div id="container"> <img src="./img/load.jpg" id="myimg"> </div>

Java抓取利用JS动态加载的网页

最近实验室项目涉及到很多爬虫相关的东西,在此做个整理,爬虫最难的问题应该是javascript和ajax的处理.现在很多网站使用大量ajax,普通爬虫无法获取js生成的内容. 对于普通的静态网页,HttpClient是Java中抓取网页的利器,然而针对像京东商品页面这样的页面却无能为力,例如:http://item.jd.com/10875285.html 主要原因是页面中的一部分信息比如商品评论是通过JavaScript异步加载的,如果直接通过HttpClient直接抓取只会得到其中的js代码

java的热部署和热加载

ps:热部署和热加载其实是两个类似但不同的概念,之前理解不深,so,这篇文章重构了下. 一.热部署与热加载 在应用运行的时升级软件,无需重新启动的方式有两种,热部署和热加载. 对于Java应用程序来说,热部署就是在服务器运行时重新部署项目,热加载即在在运行时重新加载class,从而升级应用. 二.实现原理 热加载的实现原理主要依赖java的类加载机制,在实现方式可以概括为在容器启动的时候起一条后台线程,定时的检测类文件的时间戳变化,如果类的时间戳变掉了,则将类重新载入. 对比反射机制,反射是在运

Java中动态加载jar文件和class文件

概述 诸如tomcat这样的服务器,在启动的时候会加载应用程序中lib目录下的jar文件以及classes目录下的class文件,另外像spring这类框架,也可以根据指定的路径扫描并加载指定的类文件,这个技术可以实现一个容器,容纳各类不同的子应用. Java类由于需要加载和编译字节码,动态加载class文件较为麻烦,不像C加载动态链接库只要一个文件名就可以搞定,但JDK仍提供了一整套方法来动态加载jar文件和class文件. 动态加载jar文件 // 系统类库路径 File libPath =

java用户界面——加载图片 jpg GIF

java用户界面--加载图片 jpg GIF 代码如下: package day08; import java.awt.GridLayout; import javax.swing.Icon;import javax.swing.ImageIcon;import javax.swing.JFrame;import javax.swing.JLabel; public class Testdongyaidujiazai extends JFrame { private Icon image1 =

Ajax中主页加载分页面后,分页面js脚本不执行的解决办法

没看懂,稍后再看 Ajax中主页加载分页面后,分页面js脚本不执行的解决办法 最近捣鼓JQuery,其中强大的Ajax系列函数令人印象深刻,所以做项目时毫不犹豫地采用了一下该技术,在主页中动态加载分页面进来,咋看效果 不错,都能实现了第一层次的加载,但深入下去问题就出来了:动态加载进来的页面中外联了js文件,其中的脚本却没有在加载后运行! (脚本在单独浏览该分页面时运行是正常的) 我郁闷了,打开Firefox中的Firebug查看了加载后的主页面中的DOM,所有元素的加载都是正常的啊~ 自己改来

android listview 滑动过程中不加载图片,停止时加载图片

今天闲来无事, 就测试了一下listview加载图片优化的功能, 在我们使用新浪微博的时候,细心的同学一定发现了,在滑动的过程中,图片是没有被加载的, 而是在滑动停止时,才加载图片了. 我们今天就做一个这样的效果吧. 我们先考虑两个问题: 1.在滑动停止的时候,如何获得需要加载的图片控件? 2.因为listiew在初始化完成的时候,OnScrollListener的onScrollStateChanged与onScroll并未被触发,如何初始化第一页的图片? package com.test.l

Java日志组件logback使用:加载非类路径下的配置文件并设置定时更新

Java日志组件logback使用:加载非类路径下的配置文件并设置定时更新 摘自: https://blog.csdn.net/johnson_moon/article/details/78874499 2017年12月22日 16:20:29 阅读数:868 标签: javalogback日志配置文件logback-xm 更多 个人分类: Java日志 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/johnson_moon/article/d