JAVA学习日志——Ajax和Json

# JAVA学习日志——Ajax和Json #

Ajax和Json在一个web项目中可以说是经常用到了,Ajax是一种用于创建快速动态网页的技术,而Json则是一种与语言无关的数据交换的格式。以下是个人在学习过程中的总结。

一、Ajax

1.同步与异步

在学习Ajax之前我们要先知道什么是同步,什么是异步。

同步现象:客户端发送请求到服务器端,当服务器返回响应之前,客户端都处于等待卡死状态。

异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随    意做其他事情,不会被卡死。

2.Ajax介绍

Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),可以使网页实现异步更新,就是不重新加载整个网页的情况下,对网页的某部分进行更新(局部刷新)。Ajax = 异步 JavaScript 和 XML(标准通用标记语言的子集),是一种新的思想,整合之前的多种技术(不是一个新技术),用于创建快速交互式网页应用的网页开发技术。

对于什么是局部刷新,个人理解就是为了不引起整个整个页面的回发,由某一事件触发ajax根据需要从服务器获取某一部分数据。

3.Ajax的优点

1)用户:无需刷新更新页面,减少用户等待的时间内,提升用户体验

2)服务器:减少服务器负担,ajax"按需取数据",减轻了服务器的压力

3)成本:最大限度的减少冗余请求,节省了宽带,降低了成本

如下图说明原始访问方式和Ajax访问方式区别

4.Ajax编程过程(js原生Ajax技术)

<script type="text/javascript">
    function fn1(){
        //1.创建Ajax引擎对象
        var xmlHttp = new XMLHttpRequest();
        //2.绑定监听---监听服务器是否返回对应的数据
        xmlHttp.onreadstatechange = function (){
            if(xmlHttp.readState==4&&xmlHttp.status==200){
                //5.接受相应的数据
                var res = xmlHttp.responseText;
                document.getElementById("span1").innerHTML = res;
            }
        }
        ///3.绑定地址
        xmlHttp.open("GET","${pageContext.request.contextPath}/ajax/ajaxServlet",true);
        //4.发送请求
        xmlHttp.send();
    }
</script>
<body>
    <input type="button" value="异步访问" onclick="fn1()"><span id="span1"></span>
</body>

5.Ajax引擎对象的方法和属性

1)XMLHttpRequest就是Ajax引擎对象

2)open()----准备请求

3)send()----发送请求

4)readyState----对象的的生命周期状态

5)onreadstatechange----生命周期事件属性

6)status----代表HTTP响应状态码,如200,404,500等

7)responseText----得到普通的字符串响应

6.Ajax的生命周期

有5个属性值,对应5种状态

1)创建XMLHttpRequest对象(readyState值为0)

2)装备请求(readyState值为1)

3)发送请求(readyState值为2)

4)接受响应(readyState值为3)

5)响应结束(readyState值为4)

注:每次readyState值的改变,都会触发readystatechange事件。

7.Ajax的运行原理

1)使用js获得浏览器内置的ajax引擎,通过Ajax引擎确定请求路径和请求参数并通知ajax引擎发送请求

2)Ajax引擎会在不刷新浏览器地址栏的情况下,发送请求

3)服务器获得请求参数并处理数据,之后将处理结果响应给浏览器

4)Ajax获得服务器响应数据,并调用浏览器,执行js的回掉函数将数据传递给浏览器页面

注:Ajax是事件驱动的,当生命周期状态改变时,监听器就会被触发,在监听器中我们通过判断当前生命周期状态码做不同的事情。

二.Json

1.Json是一种与语言无关的数据交换的格式,作用:

1)使用ajax进行前后台数据交换

2)移动端与服务端的数据交换

2.Json的格式

json有两种格式:

1)对象格式:{"key1":obj,"key2":obj,"key3":obj...}

2)数组/集合格式:[obj,obj,obj...]

例:user对象 用json数据格式表示

{"username":"zhangsan","age":28,"password":"123","addr":"北京"}

List<Product> 用json数据格式表示

[{"pid":"10","pname":"iphonex"},{},{}]

注:

1)对象格式和数组格式可以互相嵌套

2)json的key是字符串  json的value是Object

3.Json的转换插件

json的转换插件是通过java的一些工具,直接将java对象或集合转换成json字符串。

常用的json转换工具有如下几种:

1)jsonlib

2)Gson:google

3)fastjson:阿里巴巴

三.Jquery的Ajax技术

jquery是一个js框架,内部封装了很多函数和对象,自然也对js原生的ajax进行了封装,封装后的ajax的操作方法更简洁,功能更强大,与ajax操作相关的jquery方法有如下几种,但经常使用的有三种

1)$.get(url, [data], [callback], [type])

2)$.post(url, [data], [callback], [type])

其中:

url:代表请求的服务器端地址

data:代表请求服务器端的数据(可以是key=value形式也可以是json格式)

callback:表示服务器端成功响应所触发的函数(只有正常成功返回才执行)

type:表示服务器端返回的数据类型(jquery会根据指定的类型自动类型转换)

常用的返回类型:text、json、html等

例:

(1)页面请求并接受返回值

<script type="text/javascript">
    function fn1(){
        //get异步访问
        $.get(
            //url地址
            "/WEB05/ajaxServlet",
            //请求参数
            {"uname":"小明","age":18},
            //执行成功后的回掉函数
            function(data){//内部接收响应的参数
                console.log(data.name);
            },
            //返回参数的额类型
            "json"
        );
    }
    function fn2(){
        //post异步访问
        $.post(
            //url地址
            "/WEB05/ajaxServlet",
            //请求参数
            {"name":"小红","age":16},
            //执行成功后的回掉函数
            function(data){//内部接收响应的参数
                console.log(data.name);
            },
            //返回参数的额类型
            "json"
        );
    }
</script>
<body>
    <input type="button" value="get访问服务器端" onclick="fn1()"><span id="span1"></span>
    <br>
    <input type="button" value="post访问服务器端" onclick="fn2()"><span id="span2"></span>
    <br>
</body>

(2)服务器接受请求并返回值

protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");
        //获得请求参数
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        //打印请求参数
        System.out.println(name+"  "+age);

        //java代码只能返回一个json格式的字符串
        response.setContentType("text/html;charset=UTF-8");
        response.getWriter().write("{\"name\":\"呵呵\",\"age\":21}");

    }

3)$.ajax( { option1:value1,option2:value2... } );

常用的option有如下:

async:是否异步,默认是true代表异步

data:发送到服务器的参数,建议使用json格式

dataType:服务器端返回的数据类型,常用text和json

success:成功响应执行的函数,对应的类型是function类型

type:请求方式,POST/GET

url:请求服务器端地址

<script type="text/javascript">
    function fn3(){
        $.ajax({
            //请求地址
            url:"/WEB05/ajaxServlet",
            //是否异步
            async:true,
            //请求方式
            type:"POST",
            //请求参数
            data:{"name":"小芳","age":18},
            //成功响应后执行的函数
            success:function(data){
                console.log(data.name);
            },
            //响应失败后执行的函数
            error:function(){
                console.log("请求失败");
            },
            //返回的数据类型
            dataType:"json"
        });
    }
</script>
<body>
    <input type="button" value="ajax访问服务器端" onclick="fn3()"><span id="span3"></span>
    <br>
</body>

4.Ajax编程过程(js原生Ajax技术)

<script type="text/javascript">

function fn1(){

//1.创建Ajax引擎对象

var xmlHttp = new XMLHttpRequest();

//2.绑定监听---监听服务器是否返回对应的数据

xmlHttp.onreadstatechange = function (){

if(xmlHttp.readState==4&&xmlHttp.status==200){

//5.接受相应的数据

var res = xmlHttp.responseText;

document.getElementById("span1").innerHTML = res;

}

}

///3.绑定地址

xmlHttp.open("GET","${pageContext.request.contextPath}/ajax/ajaxServlet",true);

//4.发送请求

xmlHttp.send();

}

</script>

<body>

<input type="button" value="异步访问" onclick="fn1()"><span id="span1"></span>

</body>

5.Ajax引擎对象的方法和属性

1)XMLHttpRequest就是Ajax引擎对象

2)open()----准备请求

3)send()----发送请求

4)readyState----对象的的生命周期状态

5)onreadstatechange----生命周期事件属性

6)status----代表HTTP响应状态码,如200,404,500等

7)responseText----得到普通的字符串响应

6.Ajax的生命周期

有5个属性值,对应5种状态

1)创建XMLHttpRequest对象(readyState值为0)

2)装备请求(readyState值为1)

3)发送请求(readyState值为2)

4)接受响应(readyState值为3)

5)响应结束(readyState值为4)

注:每次readyState值的改变,都会触发readystatechange事件。

7.Ajax的运行原理

1)使用js获得浏览器内置的ajax引擎,通过Ajax引擎确定请求路径和请求参数并通知ajax引擎发送请求

2)Ajax引擎会在不刷新浏览器地址栏的情况下,发送请求

3)服务器获得请求参数并处理数据,之后将处理结果响应给浏览器

4)Ajax获得服务器响应数据,并调用浏览器,执行js的回掉函数将数据传递给浏览器页面

注:Ajax是事件驱动的,当生命周期状态改变时,监听器就会被触发,在监听器中我们通过判断当前生命周期状态码做不同的事情。

二.Json

1.Json是一种与语言无关的数据交换的格式,作用:

1)使用ajax进行前后台数据交换

2)移动端与服务端的数据交换

2.Json的格式

json有两种格式:

1)对象格式:{"key1":obj,"key2":obj,"key3":obj...}

2)数组/集合格式:[obj,obj,obj...]

例:user对象 用json数据格式表示

{"username":"zhangsan","age":28,"password":"123","addr":"北京"}

List<Product> 用json数据格式表示

[{"pid":"10","pname":"iphonex"},{},{}]

注:

1)对象格式和数组格式可以互相嵌套

2)json的key是字符串  json的value是Object

3.Json的转换插件

json的转换插件是通过java的一些工具,直接将java对象或集合转换成json字符串。

常用的json转换工具有如下几种:

1)jsonlib

2)Gson:google

3)fastjson:阿里巴巴

三.Jquery的Ajax技术

jquery是一个js框架,内部封装了很多函数和对象,自然也对js原生的ajax进行了封装,封装后的ajax的操作方法更简洁,功能更强大,与ajax操作相关的jquery方法有如下几种,但经常使用的有三种

1)$.get(url, [data], [callback], [type])

2)$.post(url, [data], [callback], [type])

其中:

url:代表请求的服务器端地址

data:代表请求服务器端的数据(可以是key=value形式也可以是json格式)

callback:表示服务器端成功响应所触发的函数(只有正常成功返回才执行)

type:表示服务器端返回的数据类型(jquery会根据指定的类型自动类型转换)

常用的返回类型:text、json、html等

例:

(1)页面请求并接受返回值

<script type="text/javascript">

function fn1(){

//get异步访问

$.get(

//url地址

"/WEB05/ajaxServlet",

//请求参数

{"uname":"小明","age":18},

//执行成功后的回掉函数

function(data){//内部接收响应的参数

console.log(data.name);

},

//返回参数的额类型

"json"

);

}

function fn2(){

//post异步访问

$.post(

//url地址

"/WEB05/ajaxServlet",

//请求参数

{"name":"小红","age":16},

//执行成功后的回掉函数

function(data){//内部接收响应的参数

console.log(data.name);

},

//返回参数的额类型

"json"

);

}

</script>

<body>

<input type="button" value="get访问服务器端" onclick="fn1()"><span id="span1"></span>

<br>

<input type="button" value="post访问服务器端" onclick="fn2()"><span id="span2"></span>

<br>

</body>

(2)服务器接受请求并返回值

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

request.setCharacterEncoding("UTF-8");

//获得请求参数

String name = request.getParameter("name");

String age = request.getParameter("age");

//打印请求参数

System.out.println(name+"  "+age);

//java代码只能返回一个json格式的字符串

response.setContentType("text/html;charset=UTF-8");

response.getWriter().write("{\"name\":\"呵呵\",\"age\":21}");

}

3)$.ajax( { option1:value1,option2:value2... } );

常用的option有如下:

async:是否异步,默认是true代表异步

data:发送到服务器的参数,建议使用json格式

dataType:服务器端返回的数据类型,常用text和json

success:成功响应执行的函数,对应的类型是function类型

type:请求方式,POST/GET

url:请求服务器端地址

<script type="text/javascript">

function fn3(){

$.ajax({

//请求地址

url:"/WEB05/ajaxServlet",

//是否异步

async:true,

//请求方式

type:"POST",

//请求参数

data:{"name":"小芳","age":18},

//成功响应后执行的函数

success:function(data){

console.log(data.name);

},

//响应失败后执行的函数

error:function(){

console.log("请求失败");

},

//返回的数据类型

dataType:"json"

});

}

</script>

<body>

<input type="button" value="ajax访问服务器端" onclick="fn3()"><span id="span3"></span>

<br>

</body>

原文地址:https://www.cnblogs.com/jinguo-chen/p/9588889.html

时间: 2024-10-13 02:27:38

JAVA学习日志——Ajax和Json的相关文章

Java 学习日志 2.1 if 条件选择语句(if switch 四种方法检验成绩状况)

任何一门知识的简历都是在原有知识的基础上开发建立的. Java继承发扬C++,C++继承发扬C语言,C语言继承发扬B语言,B语言继承发扬汇编语言,汇编语言又是建立在数学的分支上. 所以编程语言有很多数学基础.数学学得好,特别是数据结构与算法学的好,更加有助于学习精深编程. 同样我们的说话中也包含了很多逻辑数学知识. 就比如if条件判断语句. 如果(怎么怎么样)则{怎么怎么样:}否则{怎么怎么样:} If(条件判断){为真则表达式1}else{为假则表达式2}. 又因为世上的情况不止一两种,所以进

JAVA学习日志(线程)

1.进程和线程 进程: 运行一个速度,程序在内存分配了运行空间 线程: 在进程中还运行,多个线程之间可以相互的切换. 问题 进程和线程的关系? 进程包括线程. 2.单线程和多线程 (JAVA抢占) 单线程:只有一条路径,必须等第一个执行了才能执行第二个. 比如 排队吃饭.... 多线程: 有多条路径 ... 比如 食堂排队的多个窗口. 3.线程分为主线程和子线程** 主线程就相当于游戏中的主要任务. 子线程就相当于游戏中的分支任务. 列题: 4.线程的优先级别  Java中共有10个级别,1到1

JAVA学习日志(循环)

循环 基础语法-循环 1.Switch (整型和字符) 整数型(byte\char \ int \ short) JDK 1.7以上可以使用字符串 问题 为什么byte和short能在switch后面 但是long却不能? 因为 byte和short比int 小可以通过隐式转换,而long如果转换就是强制类型转换 Swicth (整型数 ){ Case (当) 常量 :    break; Case     常量 :    break: ---.. Default } 2. 三种循环 For循环

java痛苦学习之路[十二]JSON+ajax+Servlet JSON数据转换和传递

1.首先客户端需要引入 jquery-1.11.1.js 2.其次javaweb工程里面需要引入jar包  [commons-beanutils-1.8.0.jar.commons-collections-3.1.jar.commons-lang-2.4.jar.commons-logging-1.1.3.jar.ezmorph-1.0.6.jar.json-lib-2.3-jdk15.jar] 3.客户端js端代码 4.servlet 服务器,映射的路径CardColl 以上就是整个过程,如果

Java进阶学习第二十三天——国际化与AJAX、JSON

文档版本 开发工具 测试平台 工程名字 日期 作者 备注 V1.0 2016.06.10 lutianfei none 国际化 软件的国际化:软件开发时,要使它能同时应对世界不同地区和国家的访问,并针对不同地区和国家的访问,提供相应的.符合来访者阅读习惯的页面或数据. 国际化又称为 i18n:internationalization 软件实现国际化,需具备哪些特征: 对于程序中固定使用的文本元素,例如菜单栏.导航条等中使用的文本元素.或错误提示信息,状态信息等,需要根据来访者的地区和国家,选择不

第88节:Java中的Ajax和ASP.NET和TCP/IP 教程和JSON

第88节:Java中的Ajax和Jquery ajax是什么?有什么用?原理,怎么用? ajax是asynchronous javascript and xml(异步javascript和xml),是指一种创建交互式网页应用的网页开发技术. 如用户注册,输入的用户名,提示已经被注册了. AJAX Asynchronous JavaScript and XML ajax是一种不用重新加载整个网页的情况下,能够更新部分网页的技术. 什么是ajax? 是 异步 JavaScript 和 XML,是一种

Java学习-046-日志抓取合并后排序问题解决方案之 --- log4j 二次定制,实现日志输出添加延时10ms

自3月25至今,已经好久没有写学习日志了,今天在写日志抓取合并的小方法,发现抓取后的日志并米有依据系统执行的日志顺序排序.日志抓取排列逻辑如下: 通过日志标识,从各个日志文件(例如 use.log,error.log 等)中获取所需日志列表 合并日志列表 升序排序 输出日志报告 结果最后获取日志信息后,发现实际产出结果与预期结果不相符,如下所示: 1 2016-04-10 22:54:23,042 - INFO - [main] [cn.ffp.autotest.api.report.Repor

Java学习-007-Log4J 日志记录配置文件详解及实例源代码

此文主要讲述在初学 Java 时,常用的 Log4J 日志记录配置文件详解及实例源代码整理.希望能对初学 Java 编程的亲们有所帮助.若有不足之处,敬请大神指正,不胜感激!源代码测试通过日期为:2015-1-30 13:54:02,请知悉. 所需的 jar 包下载链接为:http://yunpan.cn/cKE56sxqtQCfP  访问密码 63d8 有关 Log4J 日志文件中日志级别及文件配置的详细情况,在 Log4J 的配置文件(xml.properties)中有详细的介绍,敬请参阅!

快速掌握Ajax-Ajax基础实例(Ajax返回Json在Java中的实现)

(转)实例二:Ajax返回Json在Java中的实现 转自http://www.cnblogs.com/lsnproj/archive/2012/02/09/2341524.html#2995114 在这篇中主要是说一下使用Json来将后台取得的数据显示到前台页面.可以说这种方法应该是实现无刷新分页的基础,而且在开发过程中经常被用到.这里的后台部分由JAVA来实现. 这个例子也在上一篇中那个项目中实现.新建一个SecondTest.html页面,定义一个按钮,并给这个按钮绑定事件ajaxJson