05 ajax,jquery,xstream,json解析
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. 发送请求。
/*
参数一: 请求类型 GET or POST
参数二: 请求的路径
参数三: 是否异步, true or false
*/
request.open("GET" ,"DemoServlet01" ,true );
request.send();
}
获取数据:
//执行get请求
function get() { //1. 创建xmlhttprequest 对象
var request = ajaxFunction(); //2. 发送请求
request.open("GET" ,"DemoServlet01?name=aa&age=18" ,true ); //3. 获取响应数据 注册监听的意思。 一会准备的状态发生了改变,那么就执行 = 号右边的方法
request.onreadystatechange = function(){ //前半段表示 已经能够正常处理。 再判断状态码是否是200
if(request.readyState == 4 && request.status == 200){
//弹出响应的信息
alert(request.responseText);
}
}
request.send();
}e=19");
}
注意:servlet
request.setCharacterEncoding("UTF-8"); //无效
String name = request.getParameter("name");
String age = request.getParameter("age");
name = new String(name.getBytes("ISO-8859-1"),"UTF-8");
age = new String(age.getBytes("ISO-8859-1"),"UTF-8");
数据请求 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", "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", "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");
}t.send("name="+name);
}
JQuery
javascript 的代码框架简化代码,提高效率
load
<a href="" onclick="load()">使用JQuery执行load方法</a> 有两次刷新, 先走 onClick的方法,取到数据回来之后,赋值显示。 接着 走 href=""的路径,但是这个属性没有给值,所以会把当前的页面重新再刷新一次。所以导致看不见值。 //找到这个元素, 去执行加载的动作, 加载DemoServlet02 , 得到的数据,赋值显示
$("#aaa").load("DemoServlet02" , function(responseText , statusTXT , xhr) {
//找到id为text01的元素, 设置它的value属性值为 responseText 对应的值
$("#aaa").val(responseText);
});
Get
$.get("DemoServlet02" , function(data ,status) {
$("#div01").text(data);
});
* val("aa"); 只能放那些标签带有value属性
* html("aa"); 写html代码
* text("aa");
* load $("#元素id").load(url地址); $("#div1").load(serlvet); ---> 使用的get请求,回来赋值的时候, 使用text();去赋值
* get
语法格式 : $.get(URL,callback);
使用案例: $.get("DemoServlet02" , function(data ,status) {
$("#div01").text(data);
});
* post
语法格式:$.post(URL,data,callback);
function post() {
$.post("DemoServlet02", {name:"zhangsan",age:18},function (data,status) {
//想要放数据到div里面去。 --- 找到div
$("#div01").html(data);
});
}
使用JQuery去实现校验用户名:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
function checkname() {
var username = $("#username").val();
$.post("CheckNameServlet",{"username":username},function(data,status){
if(data==1){
$("#s_name").html("<font color='red'>用户名已存在! </font>");
}else{
$("#s_name").html("<font color='green'>用户名可用! </font>");
}
});
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>用户名</td>
<td><input type="text" name="username" id="username" onblur="checkname()"><span id="s_name"></span></td>
</tr>
</table>
</body>
</html>
实现百度搜索提示
html
<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); 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实现 省市联动
<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的使用
// 返回数据。手动拼 ---> 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(); $.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
* json
阅读性更好 、 容量更小。
{"name":"aaa" , "age":19}
把javaBean 转化成 json数据
//把list ---> json数据
//JSONArray ---> 变成数组 , 集合 []
//JSONObject ---> 变成简单的数据 { name : zhangsan , age:18} JSONArray jsonArray = JSONArray.fromObject(list);
String json = jsonArray.toString();
05 ajax,jquery,xstream,json解析的更多相关文章
- struts2 ajax jquery返回json类型
三个页面, <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC & ...
- jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调 问题描述:jquery通过ajax方法获取json数据不执行success回调方法 问题原因:json格式存在问题或不符合标准 ...
- [Javascript,JSON] JQuery处理json与ajax返回JSON实例
转自:http://www.php100.com/html/program/jquery/2013/0905/5912.html [导读] json数据是一种经型的实时数据交互的数据存储方法,使用到最 ...
- (转)JQuery处理json与ajax返回JSON实例
son数据是一种经型的实时数据交互的数据存储方法,使用到最多的应该是ajax与json配合使用了,下面我来给大家介绍jquery处理json数据方法. 一.JSON的一些基础知识. JSON中对象通过 ...
- 转载:Struts2+Jquery实现ajax并返回json类型数据
摘要: 主要实现步骤如下: 1.JSP页面使用脚本代码执行ajax请求 2.Action中查询出需要返回的数据,并转换为json类型模式数据 3.配置struts.xml文件 4.页面脚本接受并处理数 ...
- Ajax的三种实现及JSON解析
本文为学习笔记,属新手文章,欢迎指教!! 本文主要是比较三种实现Ajax的方式,为以后的学习开个头. 准备: 1. prototype.js 2. jquery1.3.2.min.js 3. j ...
- (转)springMVC框架下JQuery传递并解析Json数据
springMVC框架下JQuery传递并解析Json数据 json作为一种轻量级的数据交换格式,在前后台数据交换中占据着非常重要的地位.Json的语法非常简单,采用的是键值对表示形式.JSON 可以 ...
- Javaweb学习笔记——(二十三)——————AJAX、XStream、JSON
AJAX概述 1.什么是AJAX ajax(Asynchronous JavaScript and xml) 翻译成中文就是"异步JavaScript和xml&quo ...
- Jquery Json解析
JSON的优点: 1.基于纯文本,跨平台传递极其简单: 2.Javascript原生支持,后台语言几乎全部支持: 3.轻量级数据格式,占用字符数量极少,特别适合互联网传递: 4.可读性较强,虽然比不上 ...
随机推荐
- Java Web(二) Servlet详解
什么是Servlet? Servlet是运行在Web服务器中的Java程序.Servlet通常通过HTTP(超文本传输协议)接收和响应来自Web客户端的请求.Java Web应用程序中所有的请求-响应 ...
- 微信小程序web-view使用测试总结
1.后台配置业务域名. 2.在开发者工具的web-view组件中绑定业务域名. 3.点击开发者工具的详情按钮,选择调试基础库高版本,如果不设置,有可能绑定的业务域名内容不显示. 4.如果是公众号上的内 ...
- 服务消费和负载(Feign)
Spring Cloud Feign Spring Cloud Feign是一套基于Netflix Feign实现的声明式服务调用客户端.它使得编写Web服务客户端变得更加简单.我们只需要通过创建接口 ...
- HashMap与TreeMap按照key和value排序
package com.sort; import java.util.ArrayList; import java.util.Collections; import java.util.Compara ...
- DBProxy 读写分离使用说明
美团点评DBProxy读写分离使用说明 目的 因为业务架构上需要实现读写分离,刚好前段时间美团点评开源了在360Atlas基础上开发的读写分离中间件DBProxy,关于其介绍在官方文档已经有很详细 ...
- day056 多表增加和查询
今日总结: 多表的增删改查操作 多表操作 增 book id title book_detail publish author onetoone manytoone manytomany book_o ...
- leetcode python 004
## 已知l1,l2均为升序数组,## 在两数组l1,l2中寻找第n位数,## 两数组中位数中,前者大于后者,说明后者中位数以下的成员必定在真正中位数之下## 可以将其剔除,剔除a个元素后的两 ...
- L1-053 电子汪
据说汪星人的智商能达到人类 4 岁儿童的水平,更有些聪明汪会做加法计算.比如你在地上放两堆小球,分别有 1 只球和 2 只球,聪明汪就会用“汪!汪!汪!”表示 1 加 2 的结果是 3. 本题要求你为 ...
- python的条件判断
条件判断 计算机之所以能做很多自动化的任务,因为它可以自己做条件判断. 比如,输入用户年龄,根据年龄打印不同的内容,在Python程序中,用if语句实现: age = 20 if age >= ...
- 关于urls 的基础
1 普通正则 2 分组正则 url(r'/blog/(\d+)/(\d+)',views.blog) blog(request,arq1,arq2) 按照位置传参 3 分组命名 url(r'/ ...