1,阿贾克斯是什么?
简单来说AJAX是一个局部的刷新技术,通过向服务器发送并且获得请求来刷新某一个局部界面,而不是整个界面的刷新。
它是通过在HTML页面中使用的JavaScript的和的的XmlHttpRequest来向服务器发送和获取数据。它可以实现页面的局部刷新和异步刷新。
2,如果没有的Ajax的会怎么样
假如你在看网络视频的时候,如果没有AJAX这个局部刷新技术,那么每次你评论视频的时候都会刷新页面。
这样每次评论后,你都只能从重头开始播放了,是不是十分的麻烦。
3,通过页面的局部刷新加法来体验一下AJAX带来的好处
首先是小服务程序端,获取前端送来的我和Ĵ的值并计算后返回。
Servlet的的代码
package com.xyf.web6;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Ajax1Servlet extends HttpServlet
{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException
{
String action = req.getParameter("action");
if(action==null||action.length()<0)
{
req.getRequestDispatcher("/Ajax1.jsp").forward(req, resp);
}
else if(action.equals("add"))
{
int i = Integer.parseInt(req.getParameter("i"));
int j = Integer.parseInt(req.getParameter("j"));
resp.setContentType("text/html");
resp.getWriter().print(i+j);
System.out.println("数据已获取");
}
}
}
JSP端,通过getbyid来获得表单输入中添加的值,然后在JavaScript的的里取得我和Ĵ的值,并将它包装为AJAX请求后再发出,需要注意的是发送程序执行之后程序并没有结束
通过onreadystatechange的监听事件,当请求被发送到服务器时,才开始执行响应后结束。
代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function(){
var add = document.getElementById("add");
add.onclick=function(){
var i = document.getElementById("i").value;
var j = document.getElementById("j").value;
//XHR对象执行,发出Http请求,页面不用刷新
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性
xhr.open("POST","ajax1?action=add&i="+i+"&j="+j,true);
xhr.onreadystatechange=function(){
alert("onreadystatechange,readyState="+xhr.readyState);
if(xhr.readyState==4)//服务器返回了
{
if(xhr.status==200)//xhr.status http状态码
{
alert(xhr.responseText);//xhr.responseText返回的报文体
document.getElementById("result").innerText = xhr.responseText;
//根据服务器返回的内容更新需要更新的内容
}
else
{
alert("服务器返回错误");
}
}
};
alert("send之前");
xhr.send();//发出请求。并不会等服务器返回send方法才结束,因为我们需要提前监听xhr.onreadystatechange
// 事件,以便得知“服务器返回了”
alert("send之后");
};
};
</script>
</head>
<body>
<input type="text" id="i"/>+<input type="text" id="j"/>
<input type="button" id="add" value="="/><span id="result"></span>
</body>
</html>
它的加载顺序为,在表单提交按钮之后获得我状语从句Ĵ的值,并将他包装为AJAX请求传送到服务器(此时前端的AJAX事件处于监听状态),在服务器获取到后再将他传送回来时候,页面完成了局部的刷新。
最后别忘了web.xml文件中端的配置
<servlet>
<servlet-name>ajax1Servlet</servlet-name>
<servlet-class>com.xyf.web6.Ajax1Servlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ajax1Servlet</servlet-name>
<url-pattern>/ajax1</url-pattern>
</servlet-mapping>
在网络服务器启动后,在浏览器上输入3 + 4,然后点击等于发送AJAX请求
使用抓包工具可以看到请求的路径,还有请求的类型为XHR状态代码为200这就是一个AJAX请求了。使用抓包工具可以看到请求的路径,还有请求的类型为XHR状态代码为200.这就是一个AJAX请求了。
下面为数据为我为空,J为空的方式提交的,此时状态代码返回500服务器错误。
接下来提交数据,我为3,J 4为,服务器返回图7,此时页面完成局部刷新,AJAX请求成功,此时页面完成了局部刷新了。
4,自己去封装一个AJAX
如果每次去使用AJAX的操作都需要写以上代码的话会十分麻烦,那现在我们来把这个AJAX代码通过JS的方式来封装一下。
考虑到代码的复用性,我们只把主要的代码块儿进行封装。将可以修改的部分暴露给用户自己去做,这样就可以提高代码的效率。
首先创建一个JS的文件
JSP端代码
使用方法是
function rpajax(url,successFunc)
rpajax("ajax1?action=add&i="+i+"&j="+j,function(respTxt)
在successfunc里定义成功执行之后返回的功能,在第一个参数写出你要提交的URL即可,这样就简化了AJAX代码。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
window.onload=function(){
var add = document.getElementById("add");
add.onclick=function(){
var i = document.getElementById("i").value;
var j = document.getElementById("j").value;
rpajax("ajax1?action=add&i="+i+"&j="+j,function(respTxt){
alert(respTxt);
document.getElementById("result").innerText = respTxt;
});
};
};
</script>
</head>
<body>
<input type="text" id="i"/>+<input type="text" id="j"/>
<input type="button" id="add" value="="/><span id="result"></span>
</body>
</html>
下一篇将讲到AJAX在实际中的用法