java Ajax的应用

Posted 2020-08-26 lemon

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了java Ajax的应用相关的知识，希望对你有一定的参考价值。

一.Ajax的使用步骤

　步一：创建AJAX异步对象，例如：createAJAX()

步二：准备发送异步请求，例如：ajax.open(method,url)

步三：如果是POST请求的话，一定要设置AJAX请求头，例如：ajax.setRequestHeader()

如果是GET请求的话，无需设置设置AJAX请求头

步四：真正发送请求体中的数据到服务器，例如：ajax.send()

　步五：AJAX不断的监听服务端响应的状态变化，例如：ajax.onreadystatechange，后面写一个无名处理函数

步六：在无名处理函数中，获取AJAX的数据后，按照DOM规则，用JS语言来操作Web页面

　　　　分析：

二.用用实例（状态的切换）当我们点击图片就切换到另一种状态，并且图片发生改变

　　　　1.当我们点击图片会进入到servlet的doGet方法

public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		//获取浏览器端的数据
		String lid=request.getParameter("lid");  
		String isshow=request.getParameter("isshow"); 
		LinkService  service=new LinkServiceImpl();
	
		int flag=1;//1表示成功0表示失败
		try{
		//执行修改isshow的值
		service.updateIsshow(Integer.parseInt(lid), Integer.parseInt(isshow));
		}catch(Exception e){
			flag=0;
		}
		
		
		
		//返回给浏览器
		//response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		if(flag==1)
		out.print("1");
		else
		out.print("0");	
		out.close();
	}

　　2.调用service层的修改方法

	public void updateIsshow(int lid,int isshow) {
		String sql = "UPDATE Link SET    isshow=?   WHERE  lid=?";
		Connection conn = JdbcUtil.getConn();
		PreparedStatement ps = null;
		try {
			ps = conn.prepareStatement(sql);
			ps.setInt(1, isshow==1?0:1);
			ps.setInt(2, lid);
			ps.execute();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		JdbcUtil.closeAll(null, ps, conn);

	}

　　3.进入页面调用ajax中的方法，并传入id和当前状态isshow

　<script type="text/javascript">
//1获取ajax内置对象

function createAjax() {
	var ajax = null;
	try {
		ajax = new ActiveXObject("microsoft.xmlhttp");
	} catch (e) {
		ajax = new XMLHttpRequest();
	}
	return ajax;
}
var obAjax = createAjax();
var info = "";
var vlid = "";
function changeIsshow(lid, isshow) {
	vlid = lid;
	if (isshow == 1){
		info = " 不显示  <IMG  onclick=changeIsshow("
				+ lid
				+ ",0)    border=0 align=absMiddle src=../images/edit.gif  width=14 height=14>";
	}else{
		info = " 显示  <IMG  onclick=changeIsshow("
				+ lid
				+ ",1)    border=0 align=absMiddle src=../images/XiuGai.gif  width=14 height=14>";
				}

	//2  准备发送异步请求  method请求方式 get,post, 请求地址 url
	var url = "LinkChangeServlet?lid=" + lid + "&isshow=" + isshow+ "&dates="+new Date();
	
	obAjax.open("get", url);
	//4发送请求体中的数据
	obAjax.send(null);
	//5监听状态
	obAjax.onreadystatechange = function  (){ 
	   	//a  服务器是否正确接收数据 readyState ==4
	     if (obAjax.readyState == 4) {
		//b  服务器是否正确返回数据给浏览器status==200
		if (obAjax.status == 200) {
			//接收服务器返回的数据,reponseText返回changeCity.jsp中out.println()中的所有文本信息
			var riceive = obAjax.responseText;
			if (riceive == 1) {
				document.getElementById("isshowInfo" + vlid).innerHTML = info;
			} else {
				alert(\'修改失败\');
			}
			
		}
	}
	};
}
</script>


//jquery当中的ajax
<script src="../js/jquery.js" ></script>
<script>
function changeIsshowTwo(lid, isshow){

	if (isshow == 1){
		info = " 不显示  <IMG  onclick=changeIsshowTwo("
				+ lid
				+ ",0)    border=0 align=absMiddle src=../images/edit.gif  width=14 height=14>";
	}else{
		info = " 显示  <IMG  onclick=changeIsshowTwo("
				+ lid
				+ ",1)    border=0 align=absMiddle src=../images/XiuGai.gif  width=14 height=14>";
				}
	//调用jquery的ajax中的get方式
		var url = "LinkChangeServlet?lid=" + lid + "&isshow=" + isshow+ "&dates="+new Date();

		$.get(url,null,function(data){
			if(data==1){
				$("#isshowInfo"+lid).html( info  );
			}else{
				alert(\'失败\');
			}
			
		});
  
	
	
}
</script>

　　　4.赋值

	<div id="isshowInfo${link.lid}">
	   ${link.isshow==0?"不显示":"显示"}  
	   <IMG onclick="changeIsshowTwo(${link.lid},${link.isshow})"border=0 align=absMiddle
	   src=${link.isshow==0?"../images/edit.gif":"../images/XiuGai.gif"} width=14 height=14>
　　　　</div>

原始状态如下图