ajax json java_ajax_json

ajax框架day1

1、ajax引言

a)       概念 asynchronousjavascript andxml (异步请求 javascript  and  xml)

954facefe401bb3577ae7b70b13b4947.png

b)      传统的请求

发起传统请求的方式地址栏

超级连接

表单

javascript: location.href 函数

1c7c99e06b182d8bba33634c13c2755d.png

传统请求的问题

因为传统请求响应的是新的页面(刷新了页面)。所以用户就必须要等待响应结果,才可以进行后续的操作。

用户体验差。基于异步请求的特点

响应的内容不是新的页面,是一个页面的局部,字符串信息,所以用户在使用异步请求的时候,不需要等待响应的,直接就可以进行后续处理。传统请求与异步请求的区别响应内容

传统响应的内容:新的页面,刷新页面

异步响应的内容:页面的局部,字符串信息

对于用户的操作

传统的请求:等待响应

异步的请求:不需要等待响应,用户可以直接进行后续的操作

建议在合适的场景下,都使用异步请求,提高用户的体验

2、异步请求的开发

a)   异步请求对象的创建

javascript: xmlhttprequest对象 xhr

chrome|ff|safari中

xmlhttprequest

var xhr = new xmlhttprequest();

ie(ie5 ie6)中 activexobject

var xhr = new activexobject(“microsoft.xmlhttp”);

b)

xhr对象的使用

69281d30cb75de556e6cd68043abaea5.png

3、用户名检测的案例

3b85972f174d9360468551bc110bc56c.png

不再跳转

d466d14aeae76cc1c004c5b67e510c64.png

78089786c42a54efe698c400be392cdc.png

控制表单是否提交,提交时检测

4、ajax的开发步骤

ccacd418af189b66fef61b2fca001fb3.png

77bf99b1d87e3f5119b1cc2765a118d5.png

e440928fb69222bb1edbab0a5b309c80.png

a)

创建异步请求

ie系

xhr = new activexobject(“microsoft.xmlhttp”);

非ie系 xhr

= new xmlhttprequest();

b)

发送请求

querystring

xhr.open(“get”,url?name=suns&pwd=123&sex=male);

xhr.send(null);

xhr.open(“post”,url,true(是否使用异步));

xhr.setrequestheader(“content-type”,”application/x-www-form-urlencoded”);

为什么设置:模拟表单

基本web的开发 只能使用表单提交数据,使用表单提交数据时默认指定

enctype=”application/x-www-form-urlencoded”,但是现在使用ajax编程,不再使用

请求头中手工设置application/x-www-form-urlencoded来模拟表单。

xhr.send(“name=suns&pwd=123&sex=male”);,传递数据要加引号,

060f239cce80da13d17a7ebe9df9c40b.png

c)

监听响应

xhr.onreadystatechange = function(){

if(xhr.readystate==4&&xhr.status==200){

xhr.responsetext

dom编程

}

}

d)

服务器端:

不再进行页面的跳转,而是通过返回字符串信息,完成交互

request作用域 不使用

底层就是使用response.getwriter()获取输出流 进行交互

5、json协议串

json协议串,本质上就是一个字符串。

cc142859046371b27e54877c04b130a2.png

a)

作用:异构的编程体系中,进行数据的传输,交互。

b)

核心:

定义了字符串的格式对象形式

ac3bbd3ab1492def113b95ce63526d1d.png

集合形式

3424ce0823c79a03fdd74ab7f15858d0.png

内嵌对象

07b0dd0fb30b231626722d7c3911b7e6.png

map类型

与 对象的形式一致

5dadc90e37e71e154e7d16e31cddac75.png

json协议解析 多种工具可以自动支持转换

java端:jsonlib  gson(google)

fastjson(ali)  jakeson(springmvc)

gson//对象是大括弧,集合小括弧

注意map是当做对象来写,大括弧

gson的基本应用

gson gson = new gson();

gson.tojson();

gson的特殊应用场景

c68b490a44899f3db53d4dd4e1d4edd3.png

a)

json字符串的属性名与对象属性名不一致的问题

4792f91521f794d75ea84874e38685c0.png

b)

解决对象回环问题

c625306ec8c0bdb3c35e5f1e35f5a72f.png

注解 @expose

没有使用@expose的注解的属性 将会被排除,不会被转换

7701af396411e42c2fc0deea52e6c06d.png

太不灵活,复杂都用gsonbuilder

使用接口回调,

实现一个排除策略的接口(告示gson 排除的内容)

c22ec17af62041cf397bb84df2e112a7.png

23632d3833eacd139bd5b73f2300ce4b.png

可以指定多个排除策略,更灵活

c)

特殊的日期类型问题

实现接口

d89f537ff32bf2e673d1255cb1160dff.png

注册到gsonbuilder

ba0c1e0c9e94f383bddbe1178022f92a.png

b942f396eedf0c8d078c595474df5d2c.png

json转化成js对象 (浏览器内置,jquery,ext..)

浏览器内置对象 ,后续建议使用jquery

json.parse(jsonstring) -----  js对象

-----  js的数组

1c80b7d9b82ba540c3ea9adf74b22512.png

6、案例 :应用ajax技术实现 显示所用用户的信息

79e460c111861974985cc89907dd89e4.png

ajax框架day2

1、springmvc对于ajax的支持

a)

底层整合 原始整合

01ba9e98603bd6e18e1f6062dffd2418.png

b)

通过@responsebody

springmvc自动的把对象转换成json串,并通过字符输出流输出。

注意:@responsebody封装的对象转换json的组件为

jackson

环境搭建:引入jackson相关的jar包

开发步骤;

2f51eef0da3fcf9075c6f5ef96dec8af.png

使属性名与json字符串的key不一致9f28f70c677a9d51e277528f0c2e7773.png

日期类型的格式

@jsonformat(pattern="yyyy-mm-dd")

空值类型不转换

@jsoninclude(include.non_null)

如何忽略某个属性

@jsonignore

中文字符集会自动处理

原来处理方法

3fbfa721c55a0ca0c47362378088607b.png

基于实战自动日期处理与空值处理

53165f181808912966fab285013e2386.png

2、struts2与ajax技术集成

a90f26d680a2aaf907640829b8b6c137.png

3、基于ajax的编程方式思考:

现在的开发体系中,除了使用一个ajax的ui框架(easyui ext dojo)进行编程之外,剩下所用的应用,在开发时,都应该部分环节中使用ajax.

1

局部操作 与 服务器端交互

2 最好结构简单

48b548b827300df8139271d62ccc3bff.png

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值