ajax_json

AJAX框架Day1

1、Ajax引言

a)       概念 Asynchronous Javascript And XML (异步请求 javaScript  And  XML)

b)      传统的请求

1. 发起传统请求的方式
   1. 地址栏
   2. 超级连接
   3. 表单
   4. Javascript: location.href 函数
   5.  
2. 传统请求的问题
   因为传统请求响应的是新的页面（刷新了页面）。所以用户就必须要等待响应结果，才可以进行后续的操作。
   用户体验差。

1. 基于异步请求的特点
   响应的内容不是新的页面，是一个页面的局部，字符串信息，所以用户在使用异步请求的时候，不需要等待响应的，直接就可以进行后续处理。

1. 传统请求与异步请求的区别
   1. 响应内容
      传统响应的内容：新的页面，刷新页面
      异步响应的内容：页面的局部，字符串信息
   2. 对于用户的操作
      传统的请求：等待响应
      异步的请求：不需要等待响应，用户可以直接进行后续的操作
2. 建议在合适的场景下，都使用异步请求，提高用户的体验

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对象的使用

 

 

3、用户名检测的案例

 

 

不再跳转

 

 

 

 

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

4、Ajax的开发步骤

 

 

 

 

 

 

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编程，不再使用
<form标签了也就没有方式提供enctype属性对应的值了。那么这时候需要通过在
请求头中手工设置application/x-www-form-urlencoded来模拟表单。
xhr.send(“name=suns&pwd=123&sex=male”);,传递数据要加引号,

 

 

c)       监听响应
xhr.onreadystatechange = function(){
    if(xhr.readyState==4&&xhr.status==200){
          xhr.responseText
          DOM编程
    }
}

d)      服务器端：
不再进行页面的跳转，而是通过返回字符串信息，完成交互
request作用域 不使用
底层就是使用Response.getWriter()获取输出流 进行交互

5、JSON协议串
JSON协议串，本质上就是一个字符串。

 

 

a)       作用：异构的编程体系中，进行数据的传输，交互。

b)      核心：

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

       

       

   2. 集合形式

       

       

      
      
   3. 内嵌对象

       

       

      
      
   4. Map类型 与 对象的形式一致

       

       

      
      
   5. JSON协议解析 多种工具可以自动支持转换
      java端：jsonlib  gson(Google)   fastjson(ali)  jakeson(SpringMVC)
      Gson//对象是大括弧,集合小括弧

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

1. Gson的基本应用
   Gson gson = new Gson();
   gson.toJson();
   
2. Gson的特殊应用场景
3. 

    

    

a)       Json字符串的属性名与对象属性名不一致的问题

 

 

b)      解决对象回环问题

 

 

1. 注解 @Expose
   没有使用@Expose的注解的属性 将会被排除，不会被转换
   

    

    

   
   

太不灵活,复杂都用gsonbuilder

 

1. 使用接口回调,
   实现一个排除策略的接口（告示Gson 排除的内容）
   
   
2. 

    

    

    

    

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

c)       特殊的日期类型问题

1. 实现接口
2. 

    

    

3. 注册到GsonBuilder
   

    

    

    

    

   
   
4. JSON转化成JS对象 （浏览器内置，Jquery,Ext..）
   浏览器内置对象 ，后续建议使用Jquery
   JSON.parse(jsonString) -----  js对象
                      -----  js的数组
   

    

    

   
   
   

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

 

 

AJAX框架Day2

1、SpringMVC对于Ajax的支持

a)       底层整合 原始整合

 

 

b)      通过@ResponseBody
SpringMVC自动的把对象转换成JSON串，并通过字符输出流输出。
注意：@ResponseBody封装的对象转换JSON的组件为 jackson
环境搭建：引入jackson相关的jar包
开发步骤；

 

 

1. 使属性名与JSON字符串的key不一致
   1. 

       

       

2. 日期类型的格式
   @JsonFormat(pattern="yyyy-MM-dd")
3. 空值类型不转换
   @JsonInclude(Include.NON_NULL)
4. 如何忽略某个属性
   @JsonIgnore
5. 中文字符集会自动处理

原来处理方法

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

2、Struts2与Ajax技术集成

 

 

3、基于Ajax的编程方式思考：
    现在的开发体系中，除了使用一个ajax的ui框架(easyui ext dojo)进行编程之外，剩下所用的应用，在开发时，都应该部分环节中使用ajax.

   1 局部操作 与 服务器端交互
   2 最好结构简单

 

 

      

 

 

原文链接:https://www.cnblogs.com/Dean0731/p/11565150.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有