#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{ // 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.?发送请求
???? //执行get请求
????function get() {
????????
????????//1. 创建xmlhttprequest 对象
????????var request = ajaxFunction();
????????
????????//2. 发送请求。
????????// http://localhost:8080/day16/demo01.jsp
????????//http://localhost:8080/day16/DemoServlet01
????????
????????/*????
????????????参数一： 请求类型??GET or??POST
????????????参数二： 请求的路径
????????????参数三： 是否异步， true??or false
????????*/
????????request.open("GET","/day16/DemoServlet01",true );
????????request.send();
????}
????如果发送请求的同时，还想获取数据，那么代码如下
????//执行get请求
????function get() {
????????
????????//1. 创建xmlhttprequest 对象
????????var request = ajaxFunction();
????????
????????//2. 发送请求
????????request.open("GET","/day16/DemoServlet01?name=aa&age=18",true );
????????
????????//3. 获取响应数据 注册监听的意思。??一会准备的状态发生了改变，那么就执行 = 号右边的方法
????????request.onreadystatechange = function(){
????????????
????????????//前半段表示 已经能够正常处理。??再判断状态码是否是200
????????????if(request.readyState == 4 && request.status == 200){
????????????????//弹出响应的信息
????????????????alert(request.responseText);
????????????}
????????}
????????request.send();
????}
##数据请求 Post
???????
<script type="text/javascript">
????//1. 创建对象
????function??ajaxFunction(){
???????var xmlHttp;
???????try{ // Firefox,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() {
????????//1. 创建对象
????????var request = ajaxFunction();
????????
????????//2. 发送请求
????????request.open( "POST",true );
????
????????//如果不带数据，写这行就可以了
????????//request.send();
????????
????????//如果想带数据，就写下面的两行
????????
????????//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
????????request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
????????
????????//带数据过去??， 在send方法里面写表单数据。?
????????request.send("name=aobama&age=19");
????}
</script>
????需要获取数据
????????function post() {
????????????//1. 创建对象
????????????var request = ajaxFunction();
????????????
????????????//2. 发送请求
????????????request.open( "POST",true );
????????????
????????????//想获取服务器传送过来的数据， 加一个状态的监听。?
????????????request.onreadystatechange=function(){
????????????????if(request.readyState==4 && request.status == 200){
????????????????????
????????????????????alert("post："+request.responseText);
????????????????}
????????????}
????????????
????????????//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
????????????request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
????????????
????????????//带数据过去??， 在send方法里面写表单数据。?
????????????request.send("name=aobama&age=19");
????????}
##校验用户名是否可用
###1. 搭建环境
1.?页面准备
???????<body>
???????<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>
???</body>
2.?数据库准备
###2. Servlet代码
????????protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
????????try {
????????????
????????????request.setCharacterEncoding("UTF-8");
????????????
????????????//1. 检测是否存在
????????????String name = request.getParameter("name");
????????????System.out.println("name="+name);
????????????
????????????UserDao dao = new UserDaomImpl();
????????????boolean isExist = dao.checkUserName(name);
????????????
????????????//2.??通知页面，到底有还是没有。
????????????if(isExist){
????????????????response.getWriter().println(1);??//存在用户名
????????????}else{
????????????????response.getWriter().println(2); //不存在该用户名
????????????}
????????????
????????} catch (SQLException e) {
????????????e.printStackTrace();
????????}
????}
###3. Dao代码
????????public class UserDaomImpl implements UserDao{
????????????@Override
????????????public boolean checkUserName(String username) throws SQLException {
????????????????QueryRunner runner = new QueryRunner(JDBCUtil02.getDataSource());
????????????????
????????????????String sql = "select count(*) from t_user where username =?";
????????????????runner.query(sql,new??ScalarHandler(),username);
????????????????Long result = (Long) runner.query(sql,username);?
????????????????return result > 0 ;
????????????}
????????
????????}
###jsp页面显示
????function checkUserName() {
????????//获取输入框的值 document 整个网页
????????var name = document.getElementById("name").value; // value??value() val val()
????????//1. 创建对象
????????var request = ajaxFunction();
????????
????????//2. 发送请求
????????request.open("POST"??,"/day16/CheckUserNameServlet",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{
????????????????????document.getElementById("span01").innerHTML = "<font color=‘green‘>用户名可用!</font>";
????????????????????//alert("用户名未存在");
????????????????}
????????????}
????????????
????????}???????
????????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=""的路径，但是这个属性没有给值，所以会把当前的页面重新再刷新一次。所以导致看不见值。
????//找到这个元素， 去执行加载的动作， 加载/day16/DemoServlet02 ， 得到的数据，赋值显示
????$("#aaa").load("/day16/DemoServlet02",function(responseText,statusTXT??,xhr) {
????????????//找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
????????????$("#aaa").val(responseText);
????????});?
###Get
????$.get("/day16/DemoServlet02"??,function(data,status) {
????????????$("#div01").text(data);
????????});
#赋值显示
*?val("aa");?
> 只能放那些标签带有value属性
*?html("aa"); ---写html代码
*?text("aa");
> 其实没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()
###load & get
*?load
??????$("#元素id").load(url地址);
??????$("#div1").load(serlvet); ---> 使用的get请求，回来赋值的时候， 使用text（）;去赋值
*?get
??????语法格式 ： $.get(URL,callback);????
????????使用案例： $.get("/day16/DemoServlet02"??,status) {
????????????$("#div01").text(data);
????????});
*?post
??????语法格式：$.post(URL,data,callback);
????????function post() {
????????????$.post("/day16/DemoServlet02",{name:"zhangsan",age:18},status) {
????????????????//想要放数据到div里面去。 --- 找到div
????????????????$("#div01").html(data);
????????????});
????????}
###使用JQuery去实现校验用户名
????????function checkUserName() {
????????????//1. 获取输入框的内容
????????????var name = $("#name").val();
????????????
????????????//2. 发送请求
????????????$.post("/day16/CheckUserNameServlet",{name:name},status){
????????????????//alert(data);
????????????????if(data == 1){//用户名存在
????????????????????//alert("用户名存在");
????????????????????$("#span01").html("<font color=‘red‘>用户名已被注册</font>");
