javaAjax的应⽤
⼀.Ajax的使⽤步骤
步⼀：创建AJAX异步对象，例如：createAJAX()
步⼆：准备发送异步请求，例如：ajax.open(method,url)
步三：如果是POST请求的话，⼀定要设置AJAX请求头，例如：ajax.setRequestHeader()如果是GET请求的话，⽆需设置设置AJAX请求头
步四：真正发送请求体中的数据到服务器，例如：ajax.send()
步五：AJAX不断的监听服务端响应的状态变化，例如：adystatechange，后⾯写⼀个⽆名处理函数步六：在⽆名处理函数中，获取AJAX的数据后，按照DOM规则，⽤JS语⾔来操作Web页⾯
分析：
⼆.⽤⽤实例（状态的切换）当我们点击图⽚就切换到另⼀种状态，并且图⽚发⽣改变
1.当我们点击图⽚会进⼊到servlet的doGet⽅法
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//获取浏览器端的数据
String Parameter("lid");
String Parameter("isshow");
LinkService service=new LinkServiceImpl();
int flag=1;//1表⽰成功0表⽰失败
java xml是什么try{
//执⾏修改isshow的值
service.updateIsshow(Integer.parseInt(lid), Integer.parseInt(isshow));
}catch(Exception e){
flag=0;
}
//返回给浏览器
//response.setContentType("text/html");
PrintWriter out = Writer();
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 = Conn();
PreparedStatement ps = null;
try {
ps = conn.prepareStatement(sql);
ps.setInt(1, isshow==1?0:1);
ps.setInt(2, lid);
} 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("lhttp");
} 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监听状态
//a 服务器是否正确接收数据 readyState ==4
if (adyState == 4) {
//b 服务器是否正确返回数据给浏览器status==200
if (obAjax.status == 200) {
//接收服务器返回的数据,reponseText返回changeCity.jsp中out.println()中的所有⽂本信息 var riceive = sponseText;
if (riceive == 1) {
} 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>
原始状态如下图
改变之后的状态如下图
总结：
XMLHttpRequest(即：AJAX)对象常⽤事件，⽅法和属性
（1）事件：
是由服务器程序触发，不是程序员触发
（2）属性：
ajax.status==200：表⽰AJAX异步对象接收到响应码，如果是200的话，表⽰⼀切正常 sponseText：表⽰从AJAX异步对象中获取HTML载体中的数据
（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
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论