Java Web（八） -- Ajax & Jquer-白红宇

Java Web（八） -- Ajax & Jquer

阅读量：5342 次

发布时间：2019-06-15

本文共 11507 字，大约阅读时间需要 38 分钟。

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

　　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

　　// 需要获取数据　　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、搭建环境　　页面准备

　　数据库准备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 = "用户名已存在!";　　　　　　}else{　　　　　　　　document.getElementById("span01").innerHTML = "用户名可用!";　　　　　　　　// alert("用户名未存在");　　　　　　}　　　　}　　　　request.setRequestHeader("Content-type","application/x-www-form-urlencoded");　　　　request.send("name="+name);　　}

JQuery1、是什么?　　javascript 的代码框架。  2、有什么用?　　简化代码，提高效率。  3、核心 　　write less do more , 写得更少，做的更多。 load

　　使用JQuery执行load方法

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("用户名已被注册");　　　　　　}else{　　　　　　　　// alert("用户名可用");　　　　　　　　$("#span01").html("用户名可以使用");　　　　　　}　　　　});　　　　　　// 3、输出响应的数据到页面上。　　}

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

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
     
       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"%>　　
     
      　　　　　　
     
     
      　　　　
        　　　　　　　　
　　　　　　
　　　　　　
                     ${wordBean.words}

使用JQuery实现 省市联动###环境准备1、准备数据库2、准备页面

　　　　　　　　　　　　　　　　省份: 　　　　城市:

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();            　　　　　　/*
     
      　　　　　　　　
      
       　　　　　　　　　　
       
        1
        
         　　　　　　　　　　
         
          1
         　　　　　　　　　　
         
          深圳
         　　　　　　　　
        
       
      　　　　　　　　
      
       　　　　　　　　　　
       
        2
        
         　　　　　　　　　　
         
          1
          　　　　　　　　　　
         
          东莞
         　　　　　　　　
        
       
      　　　　　　 
     */            　　　　　　$.post( "CityServlet",{pid:pid} ,function(data,status){　　　　　　　　// alert("回来数据了:"+data);                　　　　　　　　// 先清空以前的值：　　　　　　　　$("#city").html("

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

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
     
       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("

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

转载于:https://www.cnblogs.com/xifengbuqi/p/9236204.html

你可能感兴趣的文章

CQRS之旅——旅程6(我们系统的版本管理)