目录
前言 — 继续加油吧，争取完成每天的任务！
Ajax异步交互
什么是AJax
Asynchronous Javascript And XML”（异步JavaScript和XML），
并不是新的技术，只是把原有的技术，整合到一起而已。
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。
Ajax有什么作用
Ajax一种页面局部刷的技术，用户体验好，并且服务器压力小
传统的用户交互 是整体页面刷新，服务器压力大，用户体验不好
当发出请求的同时并想接收数据处理一些事情的时候使用AJAX异步交互
Ajax原理实现–> 用js代码实现
<script type="text/javascript">
function loadName(){
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange=function(){
//alert(xmlHttp.readyState+" "+xmlHttp.status);
if(xmlHttp.readyState==4 && xmlHttp.status==200){
alert(xmlHttp.responseText);
}
}
xmlHttp.open("get","getAjaxName",true);
xmlHttp.send(); //将请求发送到服务器
}
</script>
解析知识点 （get and post 提交）
- XMLHttpRequest对象：
- Ajax异步交互的核心，现在IE7 及以上浏览器都有内置的XMLHttpRequest对象，
- 老版本的IE5 IE6 使用 new ActiveXObject(“Microsoft.XMLHTTP”)对象
- xmlHttp.onreadystatechange 事件：
- 当请求发送到服务器的时候，我们需要执行一些基于响应的任务。
- 这个事件是监视我们的请求状态readyState（0-4），每当状态发生改变时候，就会触发该事件。
- 规定该事件是当请求完毕响应就绪的时候，触发该事件所调用的方法。
- 响应就绪值的是状态码 readyState 等于4 && status 等于 200
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState | 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 |
| status | 200: “OK” ，，，，，404: 未找到页面 |
- xmlHttp.open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method：使用get请求 或者是 post请求
url：请求的地址
async：true/false true表示异步请求 ，false表示同步请求
- xmlHttp.send(string)
向服务器提交数据
string：仅用于post请求
- 如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send()方法中规定您希望发送的数据：
<script>
//2. 发送请求
request.open( "POST", "/day16/DemoServlet01", true );
//如果不带数据，写这行就可以了
request.send();
//如果想带数据，就写下面的两行
//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//带数据过去 ， 在send方法里面写表单数据。
request.send("name=aobama&age=19");
</script>
对应案例：Ajax用户名校验
- 案例准备工作
查询数据库的用户是否存在，要使用数据库
- 数据库连接池的使用 c3p0
- 简化crud的JDBCUtils工具类的使用 jdbcUtils
这个地方查询数据库小技巧，count() 聚合函数，实现类ScalaHeadler- 连接数据库的jar包
需求：
- 当用户名失去焦点，进行判断，查询数据库该用户名是否存在，并返回给页面数据，不存在返回0，存在返回1
- 在页面进行判断，并向元素添加数据，用户名存在或用户名可用
- 代码实现
- jiaoyan.jsp 前端页面
<script type="text/javascript">
function cc() {
var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange = function (){
//我们规定当响应就绪执行该方法，响应就绪是：readyState==200，status == 200
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
//获取后台发过来的字符串形式的相应数据
var name = xmlHttp.responseText;
//判断用户名是否存在
if(name == 1){
//将数据插入到选定元素中去
document.getElementById("span1").innerHTML = "<font color='red'>用户名已存在</font>";
}else {
document.getElementById("span1").innerHTML="<font color='green'>用户名可用</font>";
}
}
}
xmlHttp.open("post","UserJiaoyanServlet",true);
//如果是post方式提交，并且要传递数据，就要添加头，告诉服务器，说明这是一个经过utl编码的form表单数据
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
var username = document.getElementById("name").name;
var value = document.getElementById("name").value;
xmlHttp.send(username+"="+value);
}
</script>
---------------------------------------------------------------------------
<tr>
<td>姓名</td>
<td>
<input type="text" id="name" name="username" onblur="cc()"><span id="span1"></span>
</td>
</tr>
- dao层实现代码
public class UserDaoImpl implements UserDao {
@Override
public int findUser(String name) throws SQLException {
DataSource dataSource = JDBCUtil.getDataSource();
QueryRunner queryRunner = new QueryRunner(dataSource);
Long aLong = (Long) queryRunner.query("select count(*) from user where username = ?", new ScalarHandler(), name);
int i = aLong.intValue();
return i;
}
}
UserJiaoyanServlet.java ------ servlet层
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
try {
//1、获取参用户名
String username = request.getParameter("username");
//2、查询数据库，看是否用户名已经存在，存在返回1，不存在返回2
UserService userService = new UserServiceImpl();
int i = userService.findUser(username);
//3、响应之前的页面传递数据，不需要重定向和服务器内部跳转，直接输入数据即可
PrintWriter writer = response.getWriter();
//注意使用println方法，能够直接输入整型等类型，前端接收的也是整型
//而使用write()方法就不可以，只能输出到前端字符串
writer.println(i);
} catch (SQLException e) {
e.printStackTrace();
}
}
Ajax实现原理–>jquery实现
对js代码进行了封装，使代码更少，使用更方便，要导入js文件。
使用js代码写Ajax原理太麻烦，直接使用jquery
解析知识点（get & post 提交 & load()加载）
常用三个方法：
- get请求 $get(url,collback)
- post请求 $post(url,collback)
- load加载 load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback);
- get 请求
- 语法格式：$.get(url,collback);
url(必须)：访问的地址（如果带数据就直接跟在URL后面，用 ? 隔开）
collback(可选)：访问成功后执行的函数的名字
- 实例
<script type="text/javascript">
$("#btn").click(function{
$get("url",function(data,status){
data:存有的请求页面的内容，返回的数据
status:请求是否成功的状态（true/false）
});
});
</script>
- post请求
- 请求语法：$.post(url,data,collback);
url(必须)：请求的地址
data(可选)：请求时候带上的数据,可以是json数据，也可以是单纯的字符串，可以是js对象
collback(可选)：访问成功后执行的函数的名字
- 实例
<script type="text/javascript">
$("#btn").click(function{
var data1 = {
name:"Donald Duck",
city:"Duckburg"
}
$post("url",data1,function(data,status){
data:存有的请求页面的内容，页面返回的数据
status:请求是否成功的状态（success/false）
});
});
</script>
- load() 加载
从服务器中加载数据，并把数据放到被选的元素中去
- 语法格式 $(“select”).load(url,data,collback)
url：请求的参数
data：与请求异同发给服务器的键值对
collback：函数执行成功后，调用的方法的名称
load() 方法，是将服务器发送过来的数据去赋给备选的元素上去，
用的是 text() ,方法赋值的
- 实例
<script type="text/javascript">
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
responseTxt:函数调用成功后返回的结果内容
statusTxt:执行是否成功的状态success
xhr:包含的XMLHttpRequest对象
if(statusTxt=="success")
alert("外部内容加载成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
</script>
- 扩展
val(“aa”); 只能放那些标签带有value属性
html(“aa”); —写html代码
text(“aa”);
其实与html(“aa”)没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()
jquery中的html()和text() 方法作用 在js中innerHTML自己全部可以实现