Ajax & Jquery
Ajax
- 是什么?
“Asynchronous Javascript And XML” (异步JavaScript和XML),
并不是新的技术,只是把原有的技术,整合到一起而已。
1.使用CSS和XHTML来表示
2.使用DOM模型来交互和动态显示
3.使用xmlHttpRequest来和服务器进行异步通信
4.使用JavaScript来绑定和调用
- 有什么用?
咱们的网页如果想要刷新局部内容,那么需要重新载入整个网页,用户体验不是很好。所以是为了解决局部刷新的问题,而保持其他部分不动,只刷新某些地方。
数据请求 GET
1.创建对象
function ajaxFunction() {
var xmlhttp;
try {
xmlhttp = new XMLHttpRequest();
}catch (e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) {}
}
}
return xmlhttp;
}
2.发送请求
//执行get请求
function get() {
//1. 创建 xmlhttprequest 对象
var request = ajaxFunction();
//2. 发送请求
/**
* 参数一:请求类型 GET or POST
* 参数二:请求的路径
* 参数三:是否异步, true or false
*/
//request.open("GET", "demo01", true); 不带数据
request.open("GET", "demo01?name=aa&age=18", true); //带数据
request.send();
}
3.如果发送请求的同时,还行获取数据,那么代码如下:
//执行get请求
function get() {
//1. 创建 xmlhttprequest 对象
var request = ajaxFunction();
//2. 发送请求
request.open("GET", "demo01?name=aa&age=18", true);
//3. 获取响应数据 注册监听的意思。一会准备的状态发生了改变,那么就执行 = 号右边的方法
request.onreadystatechange = function () {
//前半段表示已经能够正常处理,再判断状态码是不是200
if(request.readyState == 4 && request.status == 200){
//弹出响应的信息
alert(request.responseText);
}
}
request.send();
}
数据请求 POST
//1.创建对象
function ajaxFunction() {
var xmlhttp;
try {
xmlhttp = new XMLHttpRequest();
}catch (e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) {
}
}
}
return xmlhttp;
}
//2.发送请求
//执行post请求
function post() {
//1. 创建 xmlhttprequest 对象
var request = ajaxFunction();
//2. 发送请求
request.open("POST", "demo01", true);
//如果需要获取服务器的响应数据,只需添加如下代码
//想要获取服务器传过来的数据,加一个状态的监听
request.onreadystatechange = function(){
if (request.readyState == 4 && request.status == 200){
alert("post:" + request.responseText);
}
}
//如果不带数据,只需要写这一行就可以
request.send();
//如果使用的是post方式带数据,那么这里要添加头,说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//带数据过去,在send()方法里面写表单数据
request.send("name=aobama&&age=19");
}
校验用户名是否可用
1.搭建环境
-
页面准备
<table border="1" width="500"> <tr> <td>用户名:</td> <td><input type="text" name="name" id="name" onblur="checkUserName()"><span id="span01"></span></td> </tr> <tr> <td>密码:</td> <td><input type="text" name=""></td> </tr> <tr> <td>邮箱:</td> <td><input type="text" name=""></td> </tr> <tr> <td>简介:</td> <td><input type="text" name=""></td> </tr> <tr> <td colspan="2"><input type="submit" value="注册"></td> </tr> </table>
-
数据库准备
2.Servlet代码
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
try {
req.setCharacterEncoding("UTF-8");
//1. 检测用户名是否存在
String name = req.getParameter("name");
System.out.println("name=" + name);
UserDao dao = new UserDaoImpl();
boolean isExist = dao.checkUserName(name);
//2. 通知页面,到底有还是没有
if (isExist){
resp.getWriter().println(1); //存在用户名
}else{
resp.getWriter().println(2); //不存在用户名
}
} catch (SQLException e) {
e.printStackTrace();
}
}
3.Dao代码
public boolean checkUserName(String username) throws SQLException {
QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
String sql = "select count(*) from user where username=?";
Long result = (Long)runner.query(sql, new ScalarHandler(), username);
return result > 0;
}
4.jsp页面显示
function ajaxFunction() {
var xmlhttp;
try {
xmlhttp = new XMLHttpRequest();
}catch (e) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) {
}
}
}
return xmlhttp;
}
function checkUserName() {
//获取输入框的值
var name = document.getElementById("name").value;
//1. 创建对象
var request = ajaxFunction();
//2. 发送请求
request.open("POST", "checkusername", true);
//注册状态改变监听,获取服务器传送过来的数据
request.onreadystatechange = function(){
if (request.readyState == 4 && request.status == 200){
//alert(request.responseText);
var data = request.responseText;
if(data == 1){
//alert("用户名已存在");
document.getElementById("span01").innerHTML = "<font color='red'>用户名已存在!</font>";
}else{
//alert("用户名可用");
document.getElementById("span01").innerHTML = "<font color='green'>用户名可用!</font>";
}
}
}
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("name=" + name);
}
JQuery
- 是什么?
javascript 的代码框架
- 有什么用?
简化代码,提高效率
- 核心
write less do more 写的更少,做得更多
load
<a href="#" onclick="load()">使用JQuery执行load方法</a>
有两次刷新,先走 onClick 方法,取到数据回来之后,赋值显示;接着走 href=“” 的路径,
若这个属性没有赋值,则会把当前页面重新刷新一次,导致看不见返回值
function load() {
//$("#text01") --- document.getElementById("text01");
//找到这个元素,去执行加载的动作,加载demo02,得到的数据,赋值显示 (statusTXT,xhr这两个属性为可选属性)
$("#text01").load("demo02", function (responseText, statusTXT, xhr) {
//alert("结果=" + responseText);
//找到id为text01的元素,并设置它的value属性值为responseText对应的值
$("#text01").val(responseText);
});
}
get
function get() {
$.get("demo02", function (data, status) {
alert("结果=" + data);
//$("#div01").val(data); val 用于设置元素里面有 values 的属性值
//$("#div01").html(data); 可以设置html标签
$("#div01").text(data);
});
}
赋值显示
- val(“aa”);
只能放那些标签带有 value 属性的
- html(“aa”); - - - 可以写html 代码
- text(“aa”);
这两个其实没什么区别,如果想针对这份数据做 html 样式,那么只能用 html()方式
load & get
-
load
$("#元素").load(URL地址) $("#div01").load(servlet); ---> 默认使用 get 请求,回来赋值的时候,使用的text()赋值
-
get
语法格式:$.get(URL, callback); 使用案例: $.get("demo02", function (data, status) { $("#div01").text(data); });
-
post
语法格式:$.post(url, data, callback); 使用案例: $.post("demo02", {name:"zhangsan", age:18}, function (data, status) { //alert("回来数据了=" + data); //想要放数据到 div 里面去,---找到div $("#div01").html(data); });
使用JQuery校验用户名是否可用
function checkUserName() {
//1. 获取输入框的内容
var name = $("#name").val();
//2. 发送请求
$.post("checkusername", {name:name}, function (data, status) {
//alert(data);
if (data == 1){
$("#span01").html("<font color='red'>用户名已存在!</font>");
}else {
$("#span01").html("<font color='green'>用户名可用!</font>");
}
});
//3. 输出响应的数据到页面
}