Java Web（八） -- Ajax & Jquer

Ajax & Jquery
Ajax
1、是什么?
　　“Asynchronous Javascript And XML”（异步JavaScript和XML），
　　并不是新的技术，只是把原有的技术，整合到一起而已。 
　　　　① 使用CSS和XHTML来表示。
　　　　② 使用DOM模型来交互和动态显示。
　　　　③ 使用XMLHttpRequest来和服务器进行异步通信。
　　　　④ 使用javascript来绑定和调用。
2、有什么用?
　　咱们的网页如果想要刷新局部内容。 那么需要重新载入整个网页。用户体验不是很好。  就是为了解决局部刷新的问题。 保持其他部分不动，只刷新某些地方。 

数据请求 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, 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;
　　　　}
    
　　　　function post() {
　　　　　　// 1、创建对象
　　　　　　var request = ajaxFunction();
        
　　　　　　// 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>

　　// 需要获取数据
　　function post() {
　　　　// 1、创建对象
　　　　var request = ajaxFunction();
            
　　　　// 2、发送请求
　　　　request.open( "POST", "/day16/DemoServlet01", 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、搭建环境
　　页面准备

　　<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、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, new  ScalarHandler(), 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
1、是什么?
　　javascript 的代码框架。  
2、有什么用?
　　简化代码，提高效率。  
3、核心 
　　write less do more , 写得更少，做的更多。 

load

　　<a href="" onclick="load()">使用JQuery执行load方法</a>

　　<script>
　　　　// 有两次刷新，  先走 onClick的方法，取到数据回来之后，赋值显示。 接着 走 href=""的路径，但是这个属性没有给
　　　　// 值，所以会把当前的页面重新再刷新一次。所以导致看不见值。

　　　　// 找到这个元素， 去执行加载的动作， 加载/day16/DemoServlet02 ， 得到的数据，赋值显示
　　　　$("#aaa").load("/day16/DemoServlet02" , function(responseText , statusTXT  , xhr) {
　　　　　　// 找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
　　　　　　$("#aaa").val(responseText);
　　　　}); 
　　</script>

Get

　　$.get("/day16/DemoServlet02"  , function(data ,status) {
　　　　$("#div01").text(data);
　　});

赋值显示
val("aa"); 
　　只能放那些标签带有value属性
html("aa"); ---写html代码, html 标签会被解析
text("aa");
　　其实没有什么区别，如果想针对这分数据做html样式处理，那么只能用html()


load & get
　　load
　　　　$("#元素id").load(url地址);
　　　　$("#div1").load(serlvet); ---> 使用的get请求，回来赋值的时候， 使用text（）;去赋值
　　get
　　　　语法格式 ： $.get(URL,callback);

　　// 使用案例： 
　　$.get("/day16/DemoServlet02"  , function(data ,status) {
　　　　$("#div01").text(data);
　　});

　　post
　　　　语法格式：$.post(URL,data,callback);

　　function post() {
　　　　$.post("/day16/DemoServlet02", {name:"zhangsan",age:18},function(data,status) {
　　　　// 想要放数据到div里面去。 --- 找到div
　　　　　　$("#div01").html(data);
　　　　});
　　}

使用JQuery去实现校验用户名

　　function checkUserName() {
　　　　// 1、获取输入框的内容
　　　　var name = $("#name").val();
            
　　　　// 2、发送请求
　　　　$.post("/day16/CheckUserNameServlet" , {name:name} , function(data , status){
　　　　　　// alert(data);
　　　　　　if(data == 1){//用户名存在
　　　　　　　　// alert("用户名存在");
　　　　　　　　$("#span01").html("<font color='red'>用户名已被注册</font>");
　　　　　　}else{
　　　　　　　　// alert("用户名可用");
　　　　　　　　$("#span01").html("<font color='green'>用户名可以使用</font>");
　　　　　　}
　　　　});
　　　　　　// 3、输出响应的数据到页面上。
　　}

实现百度搜索提示
搭建环境
1、定义首页

　　<body>
　　　　<center>
　　　　　　<h2>黑马</h2>
　　　　　　　　<input type="text" name="word" id="word" style="width: 600px ; height: 50px  ;font-size: 20px;">
　　　　　　　　<input type="button" value="黑马一下"  style="height: 55px ; width: 100px ; ">
           
　　　　　　　　<div id="div01" style="position:relative; left : -54px; width: 600px; height: 200px ; border:  1px solid blue; display: none">
　　　　　　　　</div>
　　　　</center>
　　</body>

2、定义数据库
3、捕获键盘弹起

　　$(function(){
　　　　$("#word").keyup(function() {
　　　　　　alert("键盘弹起了..");
　　　　})
　　});

4、JS请求

　　$(function(){
　　　　$("#word").keyup(function() {
　　　　　　// 2、获取输入框的值 
　　　　　　// var word = $("#word").val();
　　　　　　// this  对应就是执行这个方法的那个对象， $("#word")
　　　　　　var word = $(this).val();
    
　　　　　　if(word == ""){
　　　　　　　　$("#div01").hide();
　　　　　　}else{
　　　　　　　　// 3、请求数据。
　　　　　　　　$.post("find",{word:word} ,function(data , status){
　　　　　　　　　　// alert(data);
　　　　　　　　　　$("#div01").show();
　　　　　　　　　　$("#div01").html(data);
　　　　　　　　});
　　　　　　}
　　　　})
　　});

Servlet代码

　　protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

　　　　request.setCharacterEncoding("utf-8");
　　　　try {
　　　　　　// 1、先获取参数
　　　　　　String word = request.getParameter("word");
　　　　　　System.out.println("word="+word);
                
　　　　　　// 2、让dao执行查询
　　　　　　WordsDao dao = new WordsDaoImpl();
　　　　　　List<WordBean> list = dao.findWords(word);
                
　　　　　　for (WordBean wordBean : list) {
　　　　　　　　System.out.println("==="+wordBean.toString());
　　　　　　}
                
　　　　　　request.setAttribute("list", list);
                
　　　　　　// 3、返回数据
　　　　　　response.setContentType("text/html;charset=utf-8");
　　　　　　// response.getWriter().write("数据是：");
　　　　　　request.getRequestDispatcher("list.jsp").forward(request, response);
　　　　} catch (SQLException e) {
　　　　　　e.printStackTrace();
　　　　}
　　}

list.jsp

　　<%@ page language="java" contentType="text/html; charset=UTF-8"
　　 pageEncoding="UTF-8"%>
　　<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>

　　<table style="width: 100%">
　　　　<c:forEach items="${list }" var="wordBean">
　　　　　　<tr>
　　　　　　　　<td>${wordBean.words}</td>
　　　　　　</tr>
　　　　</c:forEach>
　　</table>

使用JQuery实现 省市联动

###环境准备
1、准备数据库
2、准备页面

　　　　<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
　　　　<script type="text/javascript" src="js/city.js"></script>
　　</head>
　　<body>
　　　　省份: <select name="province" id ="province">
　　　　　　<option value="" >-请选择 -
　　　　　　<option value="1" >广东
　　　　　　<option value="2" >湖南
　　　　　　<option value="3" >湖北
　　　　　　<option value="4" >四川
　　　　</select>
　　　　城市:<select name="city" id="city">
　　　　　　<option value="" >-请选择 -
　　　　</select>
　　</body>

XStream的使用

　　// 3、返回数据。手动拼  ---> XStream  转化 bean对象成 xml
　　XStream xStream = new XStream();
            
　　// 想把id做成属性
　　xStream.useAttributeFor(CityBean.class, "id");
            
　　// 设置别名
　　xStream.alias("city", CityBean.class);

　　// 转化一个对象成xml字符串
　　String xml = xStream.toXML(list);

JS代码

　　$(function() {
　　　　// 1、找到省份的元素
　　　　$("#province").change(function() {
　　　　　　// 2、一旦里面的值发生了改变，那么就去请求该省份的城市数据
　　　　　　// $("#province").varl();
　　　　　　var pid = $(this).val();
            
　　　　　　/*<list>
　　　　　　　　<city>
　　　　　　　　　　<id>1<id>
　　　　　　　　　　<pid>1</pid>
　　　　　　　　　　<cname>深圳</cname>
　　　　　　　　</city>
　　　　　　　　<city >
　　　　　　　　　　<id>2<id>
　　　　　　　　　　<pid>1</pid>
　　　　　　　　　　<cname>东莞</cname>
　　　　　　　　</city>
　　　　　　 </list>*/
            
　　　　　　$.post( "CityServlet",{pid:pid} ,function(data,status){
　　　　　　　　// alert("回来数据了:"+data);
                
　　　　　　　　// 先清空以前的值：
　　　　　　　　$("#city").html("<option value='' >-请选择-")
　　　　　　　　// 遍历： 
　　　　　　　　// 从data数据里面找出所有的city  ， 然后遍历所有的city。
　　　　　　　　// 遍历一个city，就执行一次function方法
　　　　　　　　$(data).find("city").each(function() {
                    
　　　　　　　　　　// 遍历出来的每一个city，取它的孩子。 id , cname
　　　　　　　　　　var id = $(this).children("id").text();
　　　　　　　　　　var cname = $(this).children("cname").text();
                    
　　　　　　　　　　$("#city").append("<option value='"+id+"' >"+cname)
　　　　　　　　});
　　　　　　});
　　　　});
　　});

服务器和客户端数据传输的方式
xml

　　<list>
　　　　<city>
　　　　　　<id>1<id>
　　　　　　<pid>1</pid>
　　　　　　<cname>深圳</cname>
　　　　</city>
　　　　<city >
　　　　　　<id>2<id>
　　　　　　<pid>1</pid>
　　　　　　<cname>东莞</cname>
　　　　</city>
　　</list>

json
　　阅读性更好 、 容量更小。
　　{"name":"aaa" , "age":19}

　　// 把javaBean  转化成 json数据

　　// 3、把list ---> json数据
　　// JSONArray ---> 变成数组 ， 集合  []
　　// JSONObject ---> 变成简单的数据  { name : zhangsan , age:18}
            
　　JSONArray jsonArray = JSONArray.fromObject(list);
　　String json = jsonArray.toString();

使用json格式数据显示省市联动效果
　　serlvet代码：

　　protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

　　　　try {
　　　　　　// 1、获取参数
　　　　　　int pid = Integer.parseInt(request.getParameter("pid"));
            
　　　　　　// 2、找出所有的城市
　　　　　　CityDao dao = new CityDaoImpl();
　　　　　　List<CityBean> list = dao.findCity(pid);
            
　　　　　　// 3、把list ---> json数据
　　　　　　// JSONArray ---> 变成数组 ， 集合  []
　　　　　　// JSONObject ---> 变成简单的数据  { name : zhangsan , age:18}
            
　　　　　　JSONArray jsonArray = JSONArray.fromObject(list);
　　　　　　String json = jsonArray.toString();

　　　　　　response.setContentType("text/html;charset=utf-8");
　　　　　　response.getWriter().write(json);
　　　　} catch (SQLException e) {
　　　　　　// TODO Auto-generated catch block
　　　　　　e.printStackTrace();
　　　　};
　　}

　　js代码

　　$(function() {
　　　　// 1、找到省份的元素
　　　　$("#province").change(function() {
　　　　　　// 2、一旦里面的值发生了改变，那么就去请求该省份的城市数据
　　　　　　// $("#province").varl();
　　　　　　var pid = $(this).val();
                
　　　　　　/*[
　　　　　　　　{
　　　　　　　　　　"cname": "深圳",
　　　　　　　　　　"id": 1,
　　　　　　　　　　"pid": 1
　　　　　　　　},
　　　　　　　　{
　　　　　　　　　　"cname": "东莞",
　　　　　　　　　　"id": 2,
　　　　　　　　　　"pid": 1
　　　　　　　　}
　　　　　　　　...
　　　　　　 ]*/
　　　　　　$.post( "CityServlet02",{pid:pid} ,function(data,status){          
　　　　　　　　// 先清空
　　　　　　　　$("#city").html("<option value='' >-请选择-");
　　　　　　　　// 再遍历，追加
　　　　　　　　$(data).each(function(index , c) {
　　　　　　　　　　$("#city").append("<option value='"+c.id+"' >"+c.cname)
　　　　　　　　});
　　　　　　},"json" );
　　　　});
　　});

总结
　　Ajax  
　　　　发送get请求
　　　　发送post请求
　　　　都要求带数据 + 获取数据＋　放置到元素上。

　　JQuery
　　　　发送get请求
　　　　发送post请求
　　　　都要求带数据 + 获取数据＋　放置到元素上。
　　　　---------------------------------------
　　　　1、服务器返回xml数据
　　　　2、服务器返回json数据

Java Web（八） -- Ajax & Jquer

猜你喜欢