Ajax & Jquery

Ajax

数据请求 Get

数据请求 Post

校验用户名是否可用

1. 搭建环境

2. Servlet代码

3. Dao代码

jsp页面显示

JQuery

load

Get

赋值显示

load & get

使用JQuery去实现校验用户名

实现百度搜索提示

搭建环境

捕获键盘弹起

JS请求

Servlet代码

list.jsp

使用JQuery实现省市联动

环境准备

XStream的使用

JS代码

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

使用json格式数据显示省市联动效果

总结

Ajax

JQuery

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+, SafarixmlHttp=new XMLHttpRequest();}catch (e){try{// Internet ExplorerxmlHttp=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(){//前半段表示 已经能够正常处理。  再判断状态码是否是200if(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{@Overridepublic 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

是什么?

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"  , 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. 输出响应的数据到页面上。}

实现百度搜索提示

搭建环境

定义首页

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

定义数据库

捕获键盘弹起

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

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对象成 xmlXStream 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 , cnamevar 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 blocke.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数据

J2EE—AjaxJquery相关推荐

J2EE基础之JSP
J2EE基础之JSP 1.JSP简介 JSP是JavaServer的缩写,是由Sun Microsystems公司倡导.许多公司参与一起建立的一种动态网页技术标准.在HTML文件中加入Java程序代码 ...
有福了，J2EE面试题集锦(附答案)
一.基础问答 1.下面哪些类可以被继承? java.lang.Thread (T) java.lang.Number (T) java.lang.Double (F) java.lang.Math ...
关于对J2EE几点误解和错误认识的澄清
转自:http://www.jdon.com .Net和J2EE的争论一直没有停止,我也参加过"程序员"杂志主持的".Net和Java之争"之类的讨论,本来这两 ...
JDK6.0+Eclipse3.2+MyEclipse5.0GA+Tomcat5.0+Win2003搭建J2EE开发平台.
呼.........不容易啊.J2EE平台今天终于搭建起来了.... 1.先安装jdk-6-beta2-windows-i586.exe,安装目录:E:\Program Files\Java\jdk1 ...
J2EE的13种核心技术规范
J2EE主要用于创建可扩展的企业应用,包括13种核心技术规范: 1. JDBC(Java Database Connectivity,Java数据库连接) JDBC以一种统一的方式对各种各样的数据库进 ...
J2EE面试题集锦(附答案)
转自:http://blog.sina.com.cn/s/blog_4e8be0590100fbb8.html J2EE面试题集锦(附答案) 一.基础问答 1.下面哪些类可以被继承? java.lan ...
java se 与j2se_关于java：J2EE和J2SE项目之间的区别
本问题已经有最佳答案,请猛点这里访问. 我已经从github下载了一个开源项目. 这是一个基于Maven的项目. 我如何理解该项目是J2SE项目还是J2EE项目? 这两种项目在结构上有何不同? Jav ...
j2ee mysql 图片_实战 J2EE 开发购物网站二_MySQL
J2EE 第三步,安装配置jBuilder 7 这里我安装的是weblogic版安装jBuilder不要把它装到带有空格的目录里如Prograih Files,或是中文目录中,不然编译时会出错的.安 ...
Referenced file contains errors (http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_4.xsd).
项目导入后,一个tld文件提示以下错误: Referenced file contains errors (http://java.sun.com/xml/ns/j2ee/web-jsptaglibr ...

J2EE—AjaxJquery

Ajax & Jquery

Ajax

数据请求 Get

数据请求 Post

校验用户名是否可用

1. 搭建环境

2. Servlet代码

3. Dao代码

jsp页面显示

JQuery

load

Get

赋值显示

load & get

使用JQuery去实现校验用户名

实现百度搜索提示

搭建环境

捕获键盘弹起

JS请求

Servlet代码

list.jsp

使用JQuery实现省市联动

环境准备

XStream的使用

JS代码

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

使用json格式数据显示省市联动效果

总结

Ajax

JQuery

J2EE—AjaxJquery相关推荐

最新文章

热门文章

J2EE—AjaxJquery

Ajax & Jquery

Ajax

数据请求 Get

数据请求 Post

校验用户名是否可用

1. 搭建环境

2. Servlet代码

3. Dao代码

jsp页面显示

JQuery

load

Get

赋值显示

load & get

使用JQuery去实现校验用户名

实现百度搜索提示

搭建环境

捕获键盘弹起

JS请求

Servlet代码

list.jsp

使用JQuery实现 省市联动

环境准备

XStream的使用

JS代码

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

使用json格式数据显示省市联动效果

总结

Ajax

JQuery

J2EE—AjaxJquery相关推荐

最新文章

热门文章

使用JQuery实现省市联动