AJAX:Asynchronous JavaScript AND XML
定义:浏览器向服务器发送的异步请求(不改变页面的情况下,发送的变化)
核心:浏览器向服务器发送异步请求,javascript中提供xmlHttpRequest对象,这个是核心对象,来发送异步请求
最简写法: jQuery
书写ajax的步骤:
1,创建对象: new xmlHttpRequest();
2,初始化参数 open("get/post","url","true")
3, 发送请求 send(data)
get/post
xmlHttpRequest存在不同的状态码
0-----4
0:创建(new)之后
1:连接初始化之后 open之后
2:发送请求之后
3,服务器正在处理
4,当服务器将结果响应到浏览器中
直接看例子
我们实现功能:注册账号时,检查账号在数据库中是否存在,并异步刷新出提示信息。(因为只是展示下Ajax,为了简便,直接在Servlet中写死账号为“aaa”,若注册账号为aaa,不能注册,其余情况可以注册)
一、最原始的写法:
jsp代码:
<%@ 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>注册账号(Ajax)</title>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
账号(get):<input type="text" name="username" id="username"/><span id="uinfo"> </span>
<br/><br/>
账号(post):<input type="text" name="username" id="username1"/><span id="uinfo1"> </span>
<br/><br/>
<input type="button" value="同步提交" id="button" />
<script type="text/javascript">
//同步提交
$("#button").click(function(){
window.location.href="ajax.do";
});
//get提交
$("#username").blur(function(){
//取到文本框里面的值(账号)
var username = $("#username").val();
//创建异步提交对象
var xhr= new XMLHttpRequest();
//初始化连接
xhr.open("GET","ajax.do?username="+username,true);
//发送请求
xhr.send(null);
//状态的改变事件
xhr.onreadystatechange=function(){
//处理响应结果
if(xhr.readyState==4){
//得到响应的结果
var result = xhr.responseText;
if (result=="0") {
//找到id=uinfo---加内容进去
$("#uinfo").html("该账号已经存在!")
//找到id=uinfo---改掉字体的颜色
$("#uinfo").css("color","red");
} else{
$("#uinfo").html("可以注册!")
$("#uinfo").css("color","green");
}
}
}
});
//post
$("#username1").blur(function(){
//取到文本框里面的值(账号)
var username1=$("#username1").val();
//创建异步提交对象
var xhr= new XMLHttpRequest();
//初始化连接
xhr.open("post","ajax.do",true);
//post提交,要添加请求头
xhr.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
//发送请求
xhr.send("username="+username1);
//状态的改变事件
xhr.onreadystatechange=function(){
//处理响应结果
if(xhr.readyState==4){
//得到响应的结果
var result= xhr.responseText;
if (result=="0") {
$("#uinfo1").html("该账号已经存在!")
$("#uinfo1").css("color","red");
} else{
$("#uinfo1").html("可以注册!")
$("#uinfo1").css("color","green");
}
}
}
});
</script>
</body>
</html>
java代码:
package com.ajia.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ajax.do")
public class AjaxServlet02 extends HttpServlet{
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username=request.getParameter("username");
//响应到页面中去
PrintWriter out=response.getWriter();
if ("aaa".equals(username)) {
out.print(0);
}else {
out.print(1);
}
}
}
Servlet中,账号存在返回0,否则返回1。jsp中根据返回值进行异步刷新。
jsp中使用的是blur事件,即输入后,用鼠标点击一下该输入框外(输入框失去焦点),信息立即刷新出来。
若是同步提交,则会直接跳转到Servlet的地址;异步提交的话地址不会变。
结果如下:
同步提交:
异步提交:
二、最常用的写法
jsp代码:
<%@ 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>注册账号(Ajax)</title>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
账号(get):<input type="text" name="username" id="username"/><span id="uinfo"> </span>
<br/><br/>
账号(post):<input type="text" name="username" id="username1"/><span id="uinfo1"> </span>
<br/><br/>
<script type="text/javascript">
//get方式
$("#username").blur(function(){
//取到文本框里面的值(账号)
var username = $("#username").val();
$.ajax({
type: 'GET',
url: 'ajax.do?username='+username,
success: function(data){
if (data=="0") {
//找到id=uinfo---加内容进去
$("#uinfo").html("该账号已经存在!")
//找到id=uinfo---改掉字体的颜色
$("#uinfo").css("color","red");
} else{
$("#uinfo").html("可以注册!")
$("#uinfo").css("color","green");
}
},
error: function(msg){
alert("提交失败!");
}
});
});
//post方式
$("#username1").blur(function(){
//取到文本框里面的值(账号)
var username = $("#username1").val();
$.ajax({
type: 'POST',
url: 'ajax.do',
data: {'username':username},
dataType:'json',
success: function(data){
if (data=="0") {
//找到id=uinfo---加内容进去
$("#uinfo1").html("该账号已经存在!")
//找到id=uinfo---改掉字体的颜色
$("#uinfo1").css("color","red");
} else{
$("#uinfo1").html("可以注册!")
$("#uinfo1").css("color","green");
}
},
error: function(msg){
alert("提交失败!");
}
});
});
</script>
</body>
</html>
java代码不变,还是之前那个。
运行结果:
这样的写法是不是简洁了很多呢,也很直观易懂。
多说一点,json的写法:
{key:value,key:value} (需要打引号)
可以看到,Ajax方法内就使用的json写法,同时data后面也是用的json。
如果要用到json数组,直接在最外面加中括号[]
三、最简单的写法
jsp代码:
<%@ 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>注册账号(Ajax)</title>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
账号(get):<input type="text" name="username" id="username"/><span id="uinfo"> </span>
<br/><br/>
账号(post):<input type="text" name="username" id="username1"/><span id="uinfo1"> </span>
<br/><br/>
<script type="text/javascript">
//get提交
$("#username").blur(function(){
//取到文本框里面的值(账号)
var username = $("#username").val();
$.get("ajax.do?username="+username, function(data) {
if (data=="0") {
//找到id=uinfo---加内容进去
$("#uinfo").html("该账号已经存在!")
//找到id=uinfo---改掉字体的颜色
$("#uinfo").css("color","red");
} else{
$("#uinfo").html("可以注册!")
$("#uinfo").css("color","green");
}
});
});
//post提交
$("#username1").blur(function(){
//取到文本框里面的值(账号)
var username = $("#username1").val();
$.post("ajax.do",{'username':username}, function(data) {
if (data=="0") {
//找到id=uinfo---加内容进去
$("#uinfo1").html("该账号已经存在!")
//找到id=uinfo---改掉字体的颜色
$("#uinfo1").css("color","red");
} else{
$("#uinfo1").html("可以注册!")
$("#uinfo1").css("color","green");
}
});
});
</script>
</body>
</html>
运行结果:
第三种写法实际上就是用$post或者$get,然后直接写入内容。
比较:第二种写法是以键值对方式写入参数,第三种就是直接写参数,语法如下:
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
总结:
最后总结一下,我们一般用第二种写法,看起来更直白易懂。
另外,后面两种要记得引入jQuery库哦
在jQuery里,如果不写type,默认均以get方式提交;dataType可以不用写,因为它默认执行智能判断(xml、json、script 或 html)。
还有,我们这里的Servlet写得比较简单,只是用PrintWriter的实例直接向前台输出,前台获取返回值进行处理。后续如果要从数据库读数据并进行处理的话,直接在Servlet中编写相应代码就行,前台需要进行一些处理的话也可以直接在回调函数success()中写入相应代码就行,整个Ajax的大体流程就是这样,非常简单,又十分好用。
注:jQuery提供的函数非常好用,但不要忘记Ajax的本源哦,它是使用xmlHttpRequest对象来发送请求的;
还有,后续可能会遇到跨域问题,jQuery中可以这样解决: dataType:"jsonp"
但是注意,解决跨域问题的是jsonp,不是Ajax,只是jQuery将其封装到了Ajax里。
----------------------------------------
欢迎关注公众号“编程江湖”,可以领取Java、Python、微信小程序等诸多学习资料和项目源码,还能查看精品技术文章,并给大家提供了CSDN资源下载服务。