Web 基础29 AJAX入门及其案例
2018-04-12 本文已影响28人
小熊先生很不开心
1.1 AJAX的概述
1.1.1概述
- AJAX是异步的JS和XML，
- AJAX并不是一种新的编程语言，AJAX是一种使用了现有标准的新方法，
- AJAX是一种JS与WEB服务器交互的技术，
- AJAX可以让页面在不需要重新加载的情况下，实现页面内容的更新。
- AJAX 分开就是 ---异步 js and xml
- 异步:开了一个线程,然后去发送请求,在这个请求回来之前,我该做什么做什么
1.1.2 学习AJAX必须掌握
- HTML
- CSS
- JS/DOM/jQuery
1.1.3 作用
- 动态的加载数据,按需取得数据
- 树形结构
- 联动菜单
- 地图
- 改善用户体验
- 输入内容会有提示(百度) 带进度条的文件上传(插件) 注册页面
- 电子商务的应用
- 购物车
1.2 同步和异步的区别
同步异步的区别.png
1.3 AJAX的入门案例
我对AJAX的底层原理没有了解，这里只能肤浅的讲解一下使用步骤
1.3.1 这里我先给一个入门案例，看着备注就明白使用步骤了
- 在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>Insert title here</title>
<script type="text/javascript">
function sendAJAX() {
//创建请求对象
var xmlHttp = new XMLHttpRequest();
//设置请求状态变化时所触发的事件
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4) {//请求处理完成
if(xmlHttp.status == 200) {//响应成功
alert("ajax???");
}
}
}
//创建连接
xmlHttp.open("POST","http://localhost:8080/myAJAX/AJAXServlet",true);//true 异步
//发送请求
xmlHttp.send();
};
</script>
</head>
<body>
<form enctype="application/x-www-form-urlencoded" > </form>
<input type="button" value="按钮" onclick="sendAJAX();" />
</body>
</html>
来来来 我总结一下
一共四个步骤
- 创建请求对象
- 设置请求状态变化时所触发的事件
- 创建连接
- 发送请求
- onreadystatechange
- 就是一个属性,
- 后面跟一个匿名的函数,
- 关键匿名的函数什么时候调用,关键(状态改变)
- xmlHttp.readyState 相当于属性readyState的值
| 值 | 描述 |
|---|---|
| 0 | 连接未创建 |
| 1 | 连接已经创建 |
| 2 | 请求已接收 |
| 3 | 请求处理中 |
| 4 | 请求处理完成，响应已经就绪 |
- 下面我举个例子
4种状态 让班花帮忙买水
刚开始 忙自己的事 状态0
叫 一声班花 四目相对 建立连接 状态1
我说 买瓶水 状态2
穿好衣服 打扮好 状态3
买水回来 推门进来 状态4
只关心回来的时候
买到 响应为 200
1.4 AJAX提交数据至服务器
这里直接修改上面的代码
- 首先get 请求 先写个客户端
//get请求
xmlHttp.open("GET","/myAJAX/AJAX2Servlet?username=张三&password=123456",true);//直接在URL里面提交
xmlHttp.send();
- 客户端 servlet
String username = request.getParameter("username");
String password = request.getParameter("password");
response.getWrite().println(username+"="+password);//ajax直接接受这里输出的字符串
- 然后是 post请求
post请求是要写要给form的
<form enctype="application/x-www-form-urlencoded" > </form>//这样就足够了不用写 action 我试了一下不行，因为个连接已经交给ajax 这里不需要你操作了
//enctype 这个很重要，要和ajax的统一
post请求
xmlHttp.open("POST","/myAJAX/AJAX2Servlet",true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//设置编码类型
xmlHttp.send("username=李四&password=qwerty");//发送请求
- 总结一下几个常我会写错的点
- 请求方式
- 请求资源路径
- 请求的参数
- 回调函数(匿名函数)
1.5 AJAX提交获取数据的乱码处理
对于乱码问题，其实已经遇到很多次了，其实都可以在过滤器里面一次性解决那我还是，总结一下乱码的问题吧。
-
客户端提交数据包含中文,服务器端获取出来是的乱码
-
get请求
-
原因:
- 客户端提交数据:UTF-8 --- url编码 %ED%SD
- 服务器获取数据:url解码---ISO-8859-1
-
处理方式:
- String username = new String(request.getParameter("username").getBytes("ISO-8859-1"),"UTF-8");
-
-
post请求
-
原因:
- 客户端提交数据:UTF-8
- 服务器获取数据:ISO-8859-1
-
处理方式:
- request.setCharacterEncoding("UTF-8");
-
-
-
服务器端发送数据中包含中文, 客户端(浏览器)获取出来的是乱码
-
原因:
- 服务器提交数据:ISO-8859-1
- 客户端获取数据:UTF-8
-
处理方式:
- response.setContentType("text/html;charset=UTF-8");
-
-
总结:不管是什么客户端,只要以http协议提交数据,我们获取乱码的处理方式是一样的，Filter统一解决
1.6 校验用户名是否重复（环境搭建）
1.6.1 步骤
- 导包
- 导入工具库
- 创建数据库和表
- 修改配置
<%@ 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>Insert title here</title>
<script type="text/javascript">
function checkUsername() {
var username = document.getElementsByName("username")[0].value;
var span01 = document.getElementsByTagName("span")[0];
if(username == "") {
//alert("用户名不能为空！");
span01.innerHTML = "用户名不能为空！";
return;
}
//创建请求对象
var xmlHttp = new XMLHttpRequest();
//设置事件
xmlHttp.onreadystatechange = function() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
//alert(xmlHttp.responseText);
var data = xmlHttp.responseText;
if(data == 0) {
//不重复，可以使用
span01.innerHTML = "用户名可以使用！";
}
else {
//重复不允许使用
span01.innerHTML = "用户名已经被注册！";
}
}
}
}
//创建连接
xmlHttp.open("GET","/myAJAX/RegisterAJAXServlet?username=" + username,true);
//发送请求
xmlHttp.send();
}
</script>
</head>
<body>
<h1>注册页面</h1>
<form action="${pageContext.request.contextPath}/RegisterServlet" method="post">
用户名：<input type="text" name="username" onblur="checkUsername();"/><span></span>
<br />
密码：<input type="password" name="password" />
<br />
<input type="submit" value="注册" />
</form>
</body>
</html>
