1.Ajax
1.1Ajax的get请求
1.在js中创建对象,固定格式
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
2.页面点击
<a href="" onclick="get()">使用ajax请求</a>
2.执行get请求
function get(){
//1.创建xmlhttprequest对象请求
var request = ajaxFunction();
/* 2.发送请求
参数1:请求的类型
参数2:请求的路径
参数3:true代表异步
*/
//传参
request.open("GET","DemoServlet01?name=zhangsan&&age=18",true);
request.send();
//2.3接收数据
request.onreadystatechange=function()
{
if (request.readyState==4 && request.status==200)
{
alert(request.responseText);
}
}
}
4.Servlet如下
public class DemoServlet01 extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("收到了请求name==="+name+"===age==="+age);
//响应
//传到显示页面的数据
response.getWriter().write("收到的姓名是"+name);
}
}
显示效果
控制台会输出接收到的结果
1.2Ajax的post请求
1.页面点击
<a href="" onclick="post()">使用ajax的post请求</a>
2.js处理【post方法】
ajaxFunction()为get请求里的第一步固定写法
function post(){
//创建对象
var request = ajaxFunction();
//发送请求
request.open("post","DemoServlet01",true);
//传数据过去:需要首先设置这个响应头
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=post&&age=101");
//接收数据
request.onreadystatechange=function(){
if(request.readyState==4 && request.status==200){//准备就绪
alert(request.responseText);//页面上弹出数据
}
}
}
3.DemoServlet01里传参的处理及响应内容
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("收到了请求name==="+name+"===age==="+age);
//响应
response.setContentType("text/html;charset=UTF-8");
response.getWriter().write("收到的姓名是"+name+"and 年龄是"+age);
}
注意post和get带数据的方式不同;post带数据放在request.send()里
1.3案例:校验用户名
步骤1:搭建一个Servlet
checkServlet.java
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
String name = request.getParameter("name");
UserDao dao = new UserDaoImpl();
boolean isExit = dao.checkUser(name);
if(isExit){
response.getWriter().print(0);
}else{
response.getWriter().print(1);
}
} catch (SQLException e) {
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
步骤2:创建Dao及Dao的实现
public interface UserDao {
/**
* @param 用于检测用户名是否存在
* @return
* @throws SQLException
*/
boolean checkUser(String name) throws SQLException;
}
public class UserDaoImpl implements UserDao {
@Override
public boolean checkUser(String name) throws SQLException {
QueryRunner runner = new QueryRunner(JDBCUtils.getDataSource());
String sql = "select count(*) from t_user where username=?";
Long query = (Long) runner.query(sql, new ScalarHandler(),name);
//若大于0就是true
return query>0;
}
}
步骤3:创建demo.jsp
扫描二维码关注公众号,回复:
4138614 查看本文章
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function ajaxFunction(){
var xmlHttp;
try{ // Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
try{// Internet Explorer
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){}
}
}
return xmlHttp;
}
function post(){
var req = ajaxFunction();
//获取输入框的值
var name = document.getElementById("name").value;
//发送请求
req.open("post","checkServlet",true);
//传数据过去
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
req.send("name="+name);
//接收数据
req.onreadystatechange=function(){
if(req.readyState==4 && req.status==200){
/* alert(req.responseText); */
if(req.responseText==0){
alert("用户名存在");
document.getElementById("span01").innerHTML="<font color='red'>用户名存在</font>"
}else{
document.getElementById("span01").innerHTML="<font color='blue'>用户名可以使用</font>"
}
}
}
}
</script>
</head>
<body>
<form action="SubmitServlet" method="post">
<table border="1" cellspacing="0" width="500">
<tr>
<td>用户名:</td>
<td>
<input type="text" name="name" id="name" onblur="post()">
<span id="span01"></span>
</td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="passwd"></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" name="mail"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</body>
</html>
2.JQuery
1.load的用法
$("#元素id").load(URL地址);//语法格式
$("#div").load(servlet的地址);
2.get写法
$.get(URL,callback);//语法格式
$.get("day/demoServlet",function(data,status){
$("#div1".text(data));//或者$("#div").html(data);
})
3.post语法格式
$.post(url,data,callback);//后两个为可选项
function post(){
$.post("day/servlet",{name:"张三",age:23},function(data,status){
${"#div"}.html(data);
})
}
4.使用jquery改良1.3案例中用户名校验的代码
1.servlet代码
public class checkServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=utf-8");
String name = request.getParameter("name");
UserDao dao = new UserDaoImpl();
boolean isExit = dao.checkUser(name);
if(isExit){
response.getWriter().print(0);
}else{
response.getWriter().print(1);
}
} catch (SQLException e) {
e.printStackTrace();
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
2.jsp页面的js处理
*****body页面
<table border="1" cellspacing="0" width="500">
<tr>
<td>用户名:</td>
<td>
<input type="text" name="name" id="name" onblur="checkUserName()">
<span id="span01"></span>
</td>
</tr>
</table>
****js处理
function checkUserName(){
//1.获取输入框的内容
var name = $("#name").val();
//2.发送请求
$.post("/HEIMA_Ajax_JQuery/checkServlet",{name:name},function(data,status){
if(data==0){
//3.传输数据
$("#span01").html("<font color='red'>用户名存在</font>");
}else{
$("#span01").html("<font color='green'>用户名可用</font>");
}
});
}