ajax java web_14.javaweb AJAX技术详解

一、简介

1,  ajax:在不重新加载网页的前提下,与服务器交换数据并更新部分网页的技巧,但其本身并不是一种新技术

ae7013034aa74583259e5513975205b0.png

2,  核心:XMLHttpRequest对象。AJAX技术主要是通过此对象完成的。

1f5a63658d5f3d2eb5e04d2f903e63e1.png

在创建此对象的时候一定要考虑浏览器的问题

XMLHttpRequest对象的创建

36bd90fe38e438c029d99c38e1ac40b9.png

XMLHttpRequest对象属性

7d9f0774d88ff6b05ba1a4daf092dda6.png

其中readyState有五种取值

06e93a6e0ff010c419dfaff26d80d8d7.png

XMLHttpRequest对象方法

b1b6fd0a1c1d8d8c76299c5d9a9f4e4f.png

3,  简单示例:利用ajax完成局部刷新功能:局部刷新,在中导入content.html内容

content.html内容

36e0554f2078f127a5445ec76d1181b6.png

Flush.html

13f903d9a40c175f53259b7946571777.png

xmlHttp.onreadystatechange=showMsgCallback;表示当xmlHttp的请求状态改变时,就会调用showMsgCallback()方法,事实上,当xmlHttp.send()发送请求到响应完成,readyState会经历”2“(请求正在处理)、”3”(请求已经处理)、”4“(响应完成)三次变化,如果回调函数在xmlHttp.send()之前设置,便会调用三次showMsgCallback()方法。我们设置readyState=4时执行操作,因为此时响应完成,服务器会把回应内容填充到xmlHttp.response***属性中

点击“调用ajax显示内容”则会动态的在中生成”取得数据”

6e4c7f4b8cbbe6b8a4ccdbd9638f10ba.png

二、ajax异步验证:当新用户注册信息时,输入ID后,异步验证ID是否可用

login.html

ab256662659fda6281bfb1f66acd3b28.png

注意此处用到的地址重写的方式

Checkservlet

packagecom.chen.ying;importjava.io.PrintWriter;importjava.sql.Connection;importjava.sql.DriverManager;importjava.sql.PreparedStatement;importjava.sql.ResultSet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;public class CheckId extendsHttpServlet {final String DBDIVRE="com.mysql.jdbc.Driver";final String URL="jdbc:mysql://localhost:3306/test";final String USER="root";final String PASSWORD="1995228";

Connection conn=null;

PreparedStatement pstmt=null;

ResultSet rs=null;public voiddoGet(HttpServletRequest req,HttpServletResponse res){int userid=Integer.parseInt(req.getParameter("userid"));try{

System.out.println(userid);

PrintWriter out=res.getWriter();//得到回应的输出流

Class.forName(DBDIVRE);

conn=DriverManager.getConnection(URL,USER,PASSWORD);

String sql="select userid from person where userid=?";

pstmt=conn.prepareStatement(sql);

pstmt.setInt(1, userid);

rs=pstmt.executeQuery();if(rs.next()){

System.out.println("用户ID重复");

out.print("true");

}else{

System.out.println("ID可用");

out.print("false");

}

}catch(Exception e){

System.out.println(e);

}

}public voiddoPost(HttpServletRequest req,HttpServletResponse res){this.doGet(req, res);

}

}

效果

当用户输入id,光标离开输出框后,利用ajax技术,异步验证输入的id是否重复

bfb9d446e5925f4d2586f6d6618cbb17.png

73b09f71a938760ade88c1857d2c8149.png

三、返回XML数据

1,  要求

cfb5cb4a85fb5cc92e2b48b0a1a28ab2.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值