Java基础 ajax异步操作json

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 xhr = createXMLHttpRequest();

     // * 2. 设置监听: 监听对象的状态的变化, 触发一个函数.

     xhr.onreadystatechange = function(){

         if(xhr.readyState == 4){

             if(xhr.status == 200){

                 var data = xhr.responseText;

                 // 获得 div:

                 var div1 = document.getElementById("div1");

                 div1.innerHTML = data;

             }

         }

     }

     // * 3. 打开链接:

     xhr.open("GET","${pageContext.request.contextPath}/ajaxServletDemo1",true);

     // * 4. 发送数据:

     xhr.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 xhr = createXMLHttpRequest();

     // * 2. 设置监听: 监听对象的状态的变化, 触发一个函数.

     xhr.onreadystatechange = function(){

        

         if(xhr.readyState == 4){

             if(xhr.status == 200){

                 // 获得响应的数据:

                 var data = xhr.responseText;

                 // 获得div1:

                 var div1 = document.getElementById("div1");

                 div1.innerHTML = data;

             }

         }

        

     }

     // * 3. 打开链接:

     xhr.open("POST","${ pageContext.request.contextPath }/ajaxServletDemo1",true);

     // 设置请求头 :

     xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

     // * 4. 发送数据: // POST 请求传递参数: 需要将参数写到send 方法中.

     xhr.send( "id=3&name= 李四 ");

    

}

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

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

1. 创建数据库和表:

create database web023;

use web023;

create table user(

id int primary key auto_increment,

username varchar(20),

password varchar(20)

);

insert into user values (null,'aaa','aaa');

insert into user values (null,'bbb','bbb');

insert into user values (null,'ccc','ccc');

2. 引入jar 包:

Mysql 的驱动包:

DBUtils 的包:

C3P0 连接池:

3. 引入工具类:

4. 引入配置文件:

注册页面设计 :

<h1> 用户注册的页面</h1>

<form action="" method="post">

用户名:<input type="text" name="username"/><span id="span1"></span><br/>

密码:<input type="password" name="password"><br/>

<input type="submit" value=" 用户注册"/>

</form>

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

编写 AJAX 的代码 :

代码实现:

function checkUsername(){

     // 获得文本框的值:

     var username = document.getElementById("username").value;

     // 获得span 元素:

     var span1 = document.getElementById("span1");

     // 获得按钮元素:

     var but1 = document.getElementById("but1");

     // 1. 创建异步的对象XMLHttpRequest.

     var xhr = createXMLHttpRequest();

     // 2. 设置监听:

     xhr.onreadystatechange = function(){

         if(xhr.readyState == 4){

             if(xhr.status ==200){

                 var data = xhr.responseText;

                 // alert(data);

                 if(1 == data){

                     // 用户名可以使用

                     span1.innerHTML = "<font color='green'> 用户名可以使用</font>";

                     but1.style.display = "block";

                 }else{

                     // 用户名不能使用.

                     span1.innerHTML = "<font color='red'> 用户名已经被占用</font>";

                     but1.style.display = "none";

                 }

             }

         }

     }

     // 3. 打开链接:

     xhr.open("GET","${ pageContext.request.contextPath }/ajaxServletDemo2?username="+username,true);

     // 4. 发送数据:

     xhr.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,

content varchar(20)

);

* 添加一些数据:

引入jar 包:

* JSTL:

创建页面 :

<center><h1> 百度</h1></center>

<form action="" method="post">

<center><input type="text" name="content" style="width:400px;"/><input type="submit" value=" 百度一下"></center>

<div id="div1" style="display:none;position:absolute;width:405px;height:200px;top:110px;left:442px;border:1px solid blue"></div>

</form>

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

AJAX 的代码实现:

function search(){

     // 获得文本框的值:

     var content = document.getElementById("content").value;

     // 1. 创建异步对象XMLHttpRequest:

     var xhr = createXMLHttpRequest();

     // 2. 设置监听:

     xhr.onreadystatechange = function(){

         if(xhr.readyState == 4){

             if(xhr.status  == 200){

                 var data = xhr.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. 打开链接:

     xhr.open("GET","${ pageContext.request.contextPath }/ajaxServletDemo3?content="+content,true);

     // 4. 发送数据:

     xhr.send(null);

}

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

JSON 值

JSON 值可以是：

数字（整数或浮点数）

字符串（在双引号中）

逻辑值（true 或 false ）

数组（在方括号中）

对象（在花括号中）

null

 

JSON 和 XML 表示数据 :

XML:

一个省份:

<provice>

<id>1</id>

<name> 吉林省</name>

</province>

 

多个省份:

<provice>

<id>1</id>

<name> 吉林省</name>

</province>

<provice>

<id>2</id>

<name> 辽宁省</name>

</province>

 

 

JSON:

{“id”:1,”name”:” 吉林省”}

[{“id”:1,”name”:” 吉林省”},{“id”:2,”name”:” 辽宁省”}]

1.1.7     使用 JSON 实现二级联动的案例 :

function load(){

     // 获得第一个下拉列表:

     var pSelect = document.getElementById("province");

     // 1. 创建异步对象:

     var xhr = createXMLHttpRequest();

     // 2. 设置监听:

     xhr.onreadystatechange =  function(){

         if(xhr.readyState == 4){

             if(xhr.status == 200){

                 var data = xhr.responseText;

                 // alert(data);

                 // 一段JSON 的字符串, 本身就是JS 中支持的一种数据的格式.

                 // 将一段字符串被JS 识别为自身代码.

                 var json = eval("("+data+")");// JSON 的格式在 JS 中当做数组使用 .

                 for(var i = 0 ;i<json.length;i++){

                     // 创建 option 元素 :

                     var optionElement  = document.createElement("option");

                     // 创建文本节点 :

                     var textNode = document.createTextNode(json[i].province);

                     // 将文本节点添加到 option 的元素上 :

                     optionElement.appendChild(textNode);

                     // 将 option 添加到第一个下拉列表中 :

                     pSelect.appendChild(optionElement);

                 }

             }

         }

     }

     // 3. 打开链接:

     xhr.open("GET","${ pageContext.request.contextPath }/ajaxServletDemo5",true);

     // 4. 发送数据:

     xhr.send(null);

}

1.1.8     JSONLIB 的使用 :

什么是 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<City> cities = new ArrayList<City>();

     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<String,City> map = new HashMap<String,City>();

     map.put("sy", new City(1," 沈阳市"));

     map.put("dl", new City(2," 大连市"));

     map.put("hld", new City(3," 葫芦岛"));

    

     JSONObject jsonObject = JSONObject.fromObject(map);

     System.out.println(jsonObject);

}

@Test

/**

 * 去掉多余的属性

 */

public void demo5(){

     List<City> cities1 = new ArrayList<City>();

     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<City> cities2 = new ArrayList<City>();

     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<City> cities3 = new ArrayList<City>();

     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<Province> provinces = new ArrayList<Province>();

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

}

------------------------------------------------------------------------------

----------------------------------------------------------------------------------

 

介绍 JSON

---

JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机器解析和生成。 它基于 JavaScript Programming Language ,  Standard ECMA-262 3rd Edition - December 1999 的一个子集。 JSON 采用完全独立于语言的文本格式，但是也使用了类似于 C 语言家族的习惯（包括 C, C++, C#, Java, JavaScript, Perl, Python 等）。 这些特性使 JSON 成为理想的数据交换语言。

JSON 建构于两种结构：

·          “ 名称 / 值 ” 对的集合（ A collection of name/value pairs ）。不同的语言中，它被理解为 对象（ object ） ，纪录（ record ），结构（ struct ），字典（ dictionary ），哈希表（ hash table ），有键列表（ keyed list ），或者关联数组 （ associative array ）。

·          值的有序列表（ An ordered list of values ）。在大部分语言中，它被理解为数组（ array ）。

这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。

JSON 具有以下这些形式：

对象是一个无序的 “‘ 名称 / 值 ’ 对 ” 集合。一个对象以 “{” （左括号）开始， “}” （右括号）结束。每个 “ 名称 ” 后跟一个 “:” （冒号）； “‘ 名称 / 值 ’ 对 ” 之间使用 “,” （逗号）分隔。

数组是值（ value ）的有序集合。一个数组以 “[” （左中括号）开始， “]” （右中括号）结束。值之间使用 “,” （逗号）分隔。

值（ value ）可以是双引号括起来的字符串（ string ）、数值 (number) 、 true 、 false 、   null 、对象（ object ）或者数组（ array ）。这些结构可以嵌套。

字符串（ string ）是由双引号包围的任意数量 Unicode 字符的集合，使用反斜线转义。一个字符（ character ）即一个单独的字符串（ character string ）。

字符串（ string ）与 C 或者 Java 的字符串非常相似。

数值（ number ）也与 C 或者 Java 的数值非常相似。除去未曾使用的八进制与十六进制格式。除去一些编码细节。

空白可以加入到任何符号之间。 以下描述了完整的语言。