java软件开发会ajax和jquery_JavaWeb基础Ajax 和Jquery

Ajax

什么是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/yyy/demo01.jsp

//http://localhost/yyy/DemoServlet01

/*

参数一： 请求类型 GET or POST

参数二： 请求的路径

参数三： 是否异步， true or false

*/

request.open("GET" ,"/yyy/DemoServlet01" ,true );

request.send();

}

如果发送请求的同时，还想获取数据，那么代码如下

//执行get请求

function get() {

//1. 创建xmlhttprequest 对象

var request = ajaxFunction();

//2. 发送请求

request.open("GET" ,"/yyy/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);

}

JQuery

什么是JQuery?

javascript 的代码框架。

有什么用?

简化代码，提高效率。

核心

write less do more , 写得更少，做的更多。

load

使用JQuery执行load方法

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

//找到这个元素， 去执行加载的动作， 加载/yyy6/DemoServlet02 ， 得到的数据，赋值显示

$("#aaa").load("/yyy/DemoServlet02" , function(responseText , statusTXT , xhr) {

//找到id为text01的元素， 设置它的value属性值为 responseText 对应的值

$("#aaa").val(responseText);

});

Get

$.get("/yyy/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("/yyy/DemoServlet02" , function(data ,status) {

$("#div01").text(data);

});

post

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

function post() {

$.post("/yyy/DemoServlet02", {name:"zhangsan",age:18},function(data,status) {

//想要放数据到div里面去。 --- 找到div

$("#div01").html(data);

});

}

使用JQuery去实现校验用户名

function checkUserName() {

//1. 获取输入框的内容

var name = $("#name").val();

//2. 发送请求

$.post("/yyy/CheckUserNameServlet" , {name:name} , function(data , status){

//alert(data);

if(data == 1){//用户名存在

//alert("用户名存在");

$("#span01").html("用户名已被注册");

}else{

//alert("用户名可用");

$("#span01").html("用户名可以使用");

}

} );

//3. 输出响应的数据到页面上。

}

实现百度搜索提示

搭建环境

定义首页

百度

定义数据库

捕获键盘弹起

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

pageEncoding="UTF-8"%>

​

{wordBean.words}

使用JQuery实现 省市联动

环境准备

准备数据库

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("-请选择-")

//遍历：

//从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(""+cname)

});

} );

});

});

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

xml

1

1

深圳

2

1

东莞

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("-请选择-");

//再遍历，追加

$(data).each(function(index , c) {

$("#city").append(""+c.cname)

});

},"json" );

});

});

总结

Ajax

发送get请求

发送post请求

都要求带数据 + 获取数据＋　放置到元素上。

JQuery

发送get请求

发送post请求

1. 服务器返回xml数据

2. 服务器返回json数据