首页 > 代码库 > java Ajax的应用
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=http://www.mamicode.com/images/edit.gif width=14 height=14>"; }else{ info = " 显示 <IMG onclick=changeIsshow(" + lid + ",1) border=0 align=absMiddle src=http://www.mamicode.com/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="http://www.mamicode.com/js/jquery.js" ></script><script>function changeIsshowTwo(lid, isshow){ if (isshow == 1){ info = " 不显示 <IMG onclick=changeIsshowTwo(" + lid + ",0) border=0 align=absMiddle src=http://www.mamicode.com/images/edit.gif width=14 height=14>"; }else{ info = " 显示 <IMG onclick=changeIsshowTwo(" + lid + ",1) border=0 align=absMiddle src=http://www.mamicode.com/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=http://www.mamicode.com/=1){"#isshowInfo"+lid).html( info ); }else{ alert(‘失败‘); } }); }</script><c:forEach items="${pageModel.list}" var="link" varStatus="vs">
4.赋值
<div id="isshowInfo${link.lid}"> ${link.isshow==0?"不显示":"显示"} <IMG onclick="changeIsshowTwo(${link.lid},${link.isshow})"border=0 align=absMiddle src=http://www.mamicode.com/${link.isshow==0?"../images/edit.gif":"../images/XiuGai.gif"} width=14 height=14> </div>
原始状态如下图
改变之后的状态如下图
总结：
XMLHttpRequest(即：AJAX)对象常用事件，方法和属性 （1）事件： ajax.onreadystatechange：表示AJAX异步对象不断监听服务端的响应， 是由服务器程序触发，不是程序员触发
（2）属性： ajax.readyState==0：表示AJAX异步对象已创建好，但还没有调用open()方法
ajax.readyState==1：表示AJAX异步对象已调用open()方法，但还没有调用send()方法
ajax.readyState==2：表示AJAX异步对象已调用send()方法，但请求还没有到达服务器端
ajax.readyState==3：表示服务端已接收到AJAX异步对象的请求，正在处理响应中。。。
ajax.readyState==【4】：表示AJAX异步对象已经完完全全接收到了服务器的响应信 息，但接收到的数据不一定都正确 上述5种状态不是所有浏览器都相同，但状态4每种浏览器都相同
ajax.status==200：表示AJAX异步对象接收到响应码，如果是200的话，表示一切正常
ajax.responseText：表示从AJAX异步对象中获取HTML载体中的数据
ajax.responseXML：表示从AJAX异步对象中获取XML载体中的数据
（3）方法： ajax.open(method,url,可选的boolean值) AJAX异步对象准备发送异步请求 参数一：以什么方式发送，常用的用GET或POST，大小写不敏感 参数二：发送到什么地方去，常用Servlet或Struts2或SpringMVC来接收， 这里只限于JavaEE学科 参数三：默认值为true，表示AJAX对象以【异步】的方式提交到服务端 如果设置为false，表示AJAX对象以【同步】的方式提交到服务端
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded") 表示将请求体中的内容，按照UTF-8的方式进行编码，只针对POST请求有效
ajax.send(content) AJAX异步对象真正发送异步请求 参数一：表示HTTP【请求体】中的内容 如果是GET方式：content = null，如果强行传值到服务器，服务端收不到，返回NULL 如果是POST方式：content != null，例如：username=jack&password=123&role=admin
|
java Ajax的应用