l AJAX的基础与案例:

1.1 AJAX:

1.1.1 AJAX的概述:

什么是AJAX:

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
AJAX完成的是页面的局部刷新的效果!!!

软件的结构:

C/S结构 :Client / Server :客户端与服务器.安装到本地电脑这种软件.如:QQ,迅雷,360…
优点:减轻服务器端的压力.用户体检比较好.
缺点:服务器端更新,客户端需要跟着更新.

B/S结构 :Browser /Server :浏览器与服务器.本地有一个浏览器即可.如:WebQQ.Web迅雷.网银…
优点:服务器端更新,客户端不需要跟着更新.
缺点:服务器端压力比较大.用户体验不是特别的好.

AJAX:
逐渐的来重视的JS.
JS中有一个XMLHttpRequest.
* 减轻服务器压力.RIA(Rich Internet Application).可以使用户体验得到增强.

异步加载:

1.1.2 AJAX中核心对象:XMLHttpRequest对象的介绍

XMLHttpRequest的对象的属性:

onreadystatechange : 用于指定XMLHttpRequest对象状态改变时的事件处理函数
readyState : XMLHttpRequest对象的处理状态
0 : XMLHttpRequest对象还没有完成初始化
1 : XMLHttpRequest对象开始发送请求
2 : XMLHttpRequest对象的请求发送完成
3 : XMLHttpRequest对象开始读取服务器的响应
4 : XMLHttpRequest对象读取服务器响应完成
responseText : 用于获取服务器的响应文本
responseXML : 用于获取服务器的响应的XML文档
status : 服务器返回的状态码，只有服务器的响应已经完成时，才会有该状态码
statusText : 服务器返回的状态文本信息，只有当服务器的响应已经完成时，才会有该状态文本信息

XMLHttpRequest的对象的方法:

open : 打开链接.
open(请求方式,请求路径,true);

send : 发送数据
send(数据);

setRequestHeader : 设置请求的头信息.
* setRequestHeader(“头”,”值”);

XMLHttpRequest的对象的创建:

IE浏览器创建XMLHttpRequest的时候:
将对象封装到浏览器的ActiveXObject组件中.

Firefox浏览器创建XMLHttpRequest的时候:
直接创建.

1.1.3 AJAX的入门案例:

AJAX的GET请求的入门:

步骤一:创建一个Web项目.
步骤二:创建一个页面:
步骤三:在页面中编写AJAX的代码:(使用JS.JS都会由事件触发.)
AJAX的代码的编写:
** 1.创建异步的XMLHttpRequest对象.
* 2.设置监听:监听对象的状态的变化,触发一个函数.
* 3.打开链接:
* 4.发送数据:

* 代码的编写:*
function ajax_get(){
// 1.创建异步的XMLHttpRequest对象.
var xmlHttp = createXMLHttpRequest();
// 2.设置监听:监听对象的状态的变化,触发一个函数.
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
var data = xmlHttp.responseText;
// 获得div:
var div1 = document.getElementById(“div1”);
div1.innerHTML = data;
}
}
}
// 3.打开链接:
xmlHttp.open(“GET”,”${pageContext.request.contextPath}/ajaxServletDemo1”,true);
// true 表示是异步请求
// 4.发送数据:
xmlHttp.send(null);
}
步骤四:编写一个Servlet:
public class AjaxServletDemo1 extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
System.out.println(“GET请求:执行doGet方法…”);
// 向页面输出内容:
response.getWriter().println(“Hello Ajax Get…”);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

doGet(request, response);
}

}

GET方式需要向后台传递参数:
* 需要在路径的后面拼接这些参数.不要将参数写到send方法中.

AJAX的POST请求的入门:

步骤一:创建一个页面:
步骤二:编写页面中AJAX的代码:
代码编写:
function ajax_post() {
// 1.创建异步的XMLHttpRequest对象.
var xmlHttp = createXMLHttpRequest();
// 2.设置监听:监听对象的状态的变化,触发一个函数.
xmlHttp.onreadystatechange = function(){

if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
// 获得响应的数据:
var data = xmlHttp.responseText;
// 获得div1:
var div1 = document.getElementById(“div1”);
div1.innerHTML = data;
}
}

}
// 3.打开链接:
xmlHttp.open(“POST”,”${ pageContext.request.contextPath }/ajaxServletDemo1”,true);
// 设置请求头:
xmlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
// 4.发送数据: // POST请求传递参数:需要将参数写到send方法中.
xmlHttp.send(“id=3&name=李四”);

}

1.1.4 案例一:AJAX异步校验用户名是否存在:

异步校验用户名的准备工作:

1.创建数据库和表:
create database ajax_db1;
use ajax_db1;
create table users(
id int primary key auto_increment,
username varchar(20),
password varchar(20)
);
insert into user values (null,’aaa’,’123’);
insert into user values (null,’bbb’,’123’);
insert into user values (null,’ccc’,’123’);
2.引入jar包:
Mysql的驱动包:
DBUtils的包:
C3P0连接池:
jstl
3.引入工具类:
4.引入配置文件:

注册页面设计:

用户注册的页面

编码实现异步校验用户名是否存在:

编写AJAX的代码:
代码实现:
function checkUsername(){
// 获得文本框的值:
var username = document.getElementById(“username”).value;
// 获得span元素:
var span1 = document.getElementById(“span1”);
// 获得按钮元素:
var but1 = document.getElementById(“but1”);
// 1.创建异步的对象XMLHttpRequest.
var xmlHttp = createXMLHttpRequest();
// 2.设置监听:
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status ==200){
var data = xmlHttp.responseText;
// alert(data);
if(1 == data){
// 用户名可以使用
span1.innerHTML = “用户名可以使用“;
but1.style.display = “block”;
}else{
// 用户名不能使用.
span1.innerHTML = “用户名已经被占用“;
but1.style.display = “none”;
}
}
}
}
// 3.打开链接:
xmlHttp.open(“GET”,”${ pageContext.request.contextPath }/ajaxServletDemo2?username=”+username,true);
// 4.发送数据:
xmlHttp.send(null);
}
编写Servlet:
代码实现:
public class AjaxServletDemo2 extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
/*
1.接收用户名.
2.调用业务层根据用户名查询用户是否存在.
3.判断用户是否存在:
用户存在:
说明用户名已经存在.
用户不存在:
说明用户名可以使用.
*/
// 接收参数:
String username = request.getParameter(“username”);
// 调用业务层:
UserService userService = new UserService();
User existUser = userService.findByUsername(username);
// 判断:
if(existUser == null){
// 说明用户名可以使用的.
response.getWriter().println(1);
}else{
// 说明用户名已经被占用了.
response.getWriter().println(2);
}
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {

doGet(request, response);
}

}

1.1.5 案例二:AJAX完成仿百度效果:

AJAX完成仿百度效果的准备工作:

创建表:
create table words(
id int primary key auto_increment,
words varchar(20)
);
添加一些数据:
引入jar包:
JSTL:

创建页面:

AJAX完成仿百度效果的代码实现:

AJAX的代码实现:
function search(){
// 获得文本框的值:
var content = document.getElementById(“content”).value;
// 1.创建异步对象XMLHttpRequest:
var xmlHttp = createXMLHttpRequest();
// 2.设置监听:
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
var data = xmlHttp.responseText;
// alert(data);
// 获得div:
var div1 = document.getElementById(“div1”);
if(content == “” || content == null){
div1.style.display = “none”;
}else{
div1.style.display=”block”;
div1.innerHTML = data;
}
}
}
}
// 3.打开链接:
xmlHttp.open(“GET”,”${ pageContext.request.contextPath }/ajaxServletDemo3?content=”+content,true);
// 4.发送数据:
xmlHttp.send(null);
}

1.1.6 AJAX完成二级联动:(使用XML作为响应数据)

完成AJAX的二级联动的准备工作:创建页面

二级联动的页面

使用AJAX完成二级联动的效果:

* 将XML文档中的标签中的name属性的值获得到,添加到第一个下拉列表中:
function load(){
// 1.创建异步对象:
var xmlHttp = createXMLHttpRequest();
// 2.设置监听:
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
// 获得第一个省份的下拉列表:
var pSelect = document.getElementById(“province”);
// 获得响应的XML文档.
var xmlDocument = xmlHttp.responseXML;
// 获得文档中的标签:
var pXmlElements = xmlDocument.getElementsByTagName(“province”);
// 遍历所有的标签:
for(var i = 0;i // 获得该标签中的name属性的值:
var pXmlElement = pXmlElements[i];
var pValue = pXmlElement.getAttribute(“name”);
// alert(pValue);
// 创建一个option元素:
var optionElement = document.createElement(“option”);
optionElement.setAttribute(“value”, pValue);
// 创建一个文本节点:吉林省
var textNode = document.createTextNode(pValue);
// 将文本添加到option中.湖北省
optionElement.appendChild(textNode);
// 将option添加到中 pSelect.appendChild(optionElement); } } } } // 3.打开链接: xmlHttp.open(“GET”,”${pageContext.request.contextPath}/ajaxServletDemo4”,true); // 4.发送数据: xmlHttp.send(null);} * 解析XML获得标签中的值,写入到第二个下拉列表中.// 向第二个下拉列表中添加内容: pSelect.onchange = function(){ // 获得第二个下拉列表的元素: var cSelect = document.getElementById(“city”); // 先清空掉原有的内容: cSelect.length = 1; // 获得XML文档: var pElements = xmlDocument.getElementsByTagName(“province”); // 获得选中的省份的值. // alert(this.value); // 解析XML:获得所有的标签的name属性的值: for(var i = 0;i<pElements.length;i++){ var pElement = pElements[i]; var pValue = pElement.getAttribute(“name”); // 比较:如果这两个值相等. if(pValue == this.value){ // 获得这个下面的所有的标签 var cElements = pElement.getElementsByTagName(“city”); for(var j = 0 ;j<cElements.length;j++){ // 获得所有标签中的文本内容. var cElement = cElements[j]; var cValue = cElement.firstChild.nodeValue; // 创建option元素. var optionElement = document.createElement(“option”); // 创建文本节点. var textNode = document.createTextNode(cValue); // 将文本节点写入到option中. optionElement.appendChild(textNode); // 将option元素添加到第二个下拉列表中. cSelect.appendChild(optionElement); } } } } 1.1.7 XStream的技术的使用: 什么是XStream:将对象,集合转成XML格式. 使用XStream:步骤一:引入XStream的开发包: xpp3_min-1.1.4c.jar xstream-1.4.4.jar步骤二:使用XStream将对象或者集合转成XML:@Test/ 将对象转成XML: /public void demo1() { List cities1 = new ArrayList(); cities1.add(new City(1, “武汉”)); cities1.add(new City(2, “荆州”)); cities1.add(new City(3, “十堰”)); cities1.add(new City(4, “孝感”)); Province province1 = new Province(1, “湖北省”, cities1); XStream xStream = new XStream(); // 不使用类的全路径作为标签名称: xStream.alias(“province”, Province.class); xStream.alias(“city”, City.class); // 使用类的属性作为标签的属性而不是子标签形式: xStream.useAttributeFor(Province.class, “id”); xStream.useAttributeFor(Province.class, “name”); xStream.useAttributeFor(City.class, “id”); xStream.useAttributeFor(City.class, “name”); // 使用去掉属性中的集合的属性作为其子标签: xStream.addImplicitCollection(Province.class, “cities”); String xml = xStream.toXML(province1); System.out.println(xml);} @Test/ 将集合转成XML格式 /public void demo2() { List cities1 = new ArrayList(); cities1.add(new City(1, “武汉”)); cities1.add(new City(2, “荆州”)); cities1.add(new City(3, “十堰”)); cities1.add(new City(4, “孝感”)); Province province1 = new Province(1, “湖北省”, cities1); List cities2 = new ArrayList(); cities2.add(new City(1, “长沙”)); cities2.add(new City(2, “株洲”)); cities2.add(new City(3, “岳阳”)); cities2.add(new City(4, “常德”)); Province province2 = new Province(2, “湖南省”, cities2); List cities3 = new ArrayList(); cities3.add(new City(1, “合肥”)); cities3.add(new City(2, “安庆”)); cities3.add(new City(3, “马鞍山”)); cities3.add(new City(4, “黄山”)); Province province3 = new Province(3, “安徽”, cities3); List provinces = new ArrayList(); provinces.add(province1); provinces.add(province2); provinces.add(province3); XStream xStream = new XStream(); // 不使用类的全路径作为标签名称: xStream.alias(“province”, Province.class); xStream.alias(“city”, City.class); // 使用类的属性作为标签的属性而不是子标签形式: xStream.useAttributeFor(Province.class, “id”); xStream.useAttributeFor(Province.class, “name”); xStream.useAttributeFor(City.class, “id”); xStream.useAttributeFor(City.class, “name”); // 使用去掉属性中的集合的属性作为其子标签: xStream.addImplicitCollection(Province.class, “cities”); String xml = xStream.toXML(provinces); System.out.println(xml);} 1.1.8 JSON的数据交换格式: 什么是JSON:JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于ECMAScript的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C、C++、C#、Java、JavaScript、Perl、Python等）。这些特性使JSON成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成(网络传输速率)。 JSON的语法:JSON 语法规则JSON 语法是 JavaScript 对象表示语法的子集。数据在键值对中数据由逗号分隔花括号保存对象方括号保存数组 JSON 名称/值对JSON 数据的书写格式是：名称/值对。名称/值对组合中的名称写在前面（在双引号中），值对写在后面(同样在双引号中)，中间用冒号隔开：“{‘firstName’:’John’}”[{“name”:”湖北省”},{“name”:”湖南省”},{“id”:1}]JSON 值JSON 值可以是：数字（整数或浮点数）字符串（在双引号中）逻辑值（true 或 false）数组（在方括号中）对象（在花括号中）null JSON和XML表示数据:XML:一个省份:1湖北省[{“id”:1,“name”:”湖北省”}]多个省份:1湖南省2安徽省 JSON:{“id”:1,”name”:”湖北省”}[{“id”:1,”name”:” 湖南省”},{“id”:2,”name”:” 安徽省”}] 1.1.9 使用JSON改写二级联动的案例:function load(){ // 获得第一个下拉列表: var pSelect = document.getElementById(“province”); // 1.创建异步对象: var xmlHttp = createXMLHttpRequest(); // 2.设置监听: xmlHttp.onreadystatechange = function(){ if(xmlHttp.readyState == 4){ if(xmlHttp.status == 200){ var data = xmlHttp.responseText; // alert(data); // 一段JSON的字符串,本身就是JS中支持的一种数据的格式. // 将一段字符串被JS识别为自身代码. var json = eval(“(“+data+”)”);// JSON的格式在JS中当做数组使用. for(var i = 0 ;i // 创建option元素: var optionElement = document.createElement(“option”); // 创建文本节点: var textNode = document.createTextNode(json[i].province); // 将文本节点添加到option的元素上: optionElement.appendChild(textNode); // 将option添加到第一个下拉列表中: pSelect.appendChild(optionElement); } } } } // 3.打开链接: xmlHttp.open(“GET”,”${ pageContext.request.contextPath }/ajaxServletDemo5”,true); // 4.发送数据: xmlHttp.send(null);} 1.1.10JSONLIB的使用: 什么是JSONLIB:JSONLIB是一个工具类:将对象,数组,List,MAP集合转换成JSON的串. 使用JSONLIB:步骤一:引入JSONLIB的开发包: 核心包: 依赖包:步骤二:了解JSONLIB中的API:* JSONObject :主要用于将对象和MAP集合转成JSON的.* JSONArray :主要用于将数组和List集合转成JSON的. 步骤三:JSONLIB的案例的使用: @Test/* 将对象转成JSON: */public void demo1(){ City city = new City(1, “武汉市”); // 将对象和Map集合转成JSON使用JSONObject JSONObject jsonObject = JSONObject.fromObject(city); System.out.println(jsonObject);} @Test/* 将List集合转成JSON: */public void demo2(){ List cities = new ArrayList(); cities.add(new City(1,”杭州市”)); cities.add(new City(2,”绍兴市”)); // 将数组和List转成JSON使用JSONArray对象. JSONArray jsonArray = JSONArray.fromObject(cities); System.out.println(jsonArray);} @Test/* 将数组转成JSON: */public void demo3(){ City[] cities = new City[2]; cities[0]=new City(1,”武汉市”); cities[1]=new City(2,”黄冈市”); JSONArray jsonArray = JSONArray.fromObject(cities); System.out.println(jsonArray);} @Test/* 将Map集合转成JSON: */public void demo4(){ Map map = new HashMap(); map.put(“wh”, new City(1,”武汉市”)); map.put(“hs”, new City(2,”黄石市”)); map.put(“xn”, new City(3,”咸宁市”)); JSONObject jsonObject = JSONObject.fromObject(map); System.out.println(jsonObject);} @Test/* 去掉多余的属性 */public void demo5(){ List cities1 = new ArrayList(); cities1.add(new City(1, “武汉”)); cities1.add(new City(2, “荆州”)); cities1.add(new City(3, “十堰”)); cities1.add(new City(4, “孝感”)); Province province1 = new Province(1, “湖北省”, cities1); List cities2 = new ArrayList(); cities2.add(new City(1, “长沙”)); cities2.add(new City(2, “株洲”)); cities2.add(new City(3, “岳阳”)); cities2.add(new City(4, “常德”)); Province province2 = new Province(2, “湖南省”, cities2); List cities3 = new ArrayList(); cities3.add(new City(1, “合肥”)); cities3.add(new City(2, “安庆”)); cities3.add(new City(3, “马鞍山”)); cities3.add(new City(4, “黄山”)); Province province3 = new Province(3, “安徽”, cities3); List provinces = new ArrayList(); provinces.add(province1); provinces.add(province2); provinces.add(province3); JsonConfig jsonConfig = new JsonConfig(); jsonConfig.setExcludes(new String[]{“cities”,”id”}); JSONArray jsonArray = JSONArray.fromObject(provinces, jsonConfig); System.out.println(jsonArray);}