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()"><spanid="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解析
原文地址：https://www.cnblogs.com/fly-book/p/9936552.html