Ajax

AJAX框架
1、Ajax引言
a) 概念 ansychronous javascript and xml (异步 javaScript And XML)
b) 传统的请求
i. 发起传统的请求?

  1. 地址栏
  2. 超级连接
  3. 表单
  4. Javascript: location.href 函数
    在这里插入图片描述
    ii. 传统请求的问题
    因为传统请求响应的是新的页面(刷新了页面)。所以用户就必须要等待响应结果,才可以进行后续的操作。
    用户体验差。
    iii. 基于异步请求的特点
    在这里插入图片描述
    响应的内容不是新的页面,是一个页面的局部,字符串信息,所以用户在使用异步请求的时候,不需要等待响应的,直接就可以进行后续处理。
    iv. 传统请求与异步请求的区别
  5. 响应内容
    传统响应的内容:新的页面,刷新页面
    异步响应的内容:页面的局部,字符串信息
  6. 对于用户的操作
    传统的请求:等待响应
    异步的请求:不需要等待响应,用户可以直接进行后续的操作
    v. 建议在合适的场景下,都使用异步请求,提高用户的体验

Ajax优点:

提高用户体验度(UE)
提高程序性能
进行局部刷新

2、异步请求的开发
a) 什么异步请求
javascript: XmlHttpRequest对象 xhr
Chrome|FF|sofia中 XmlHttpRequest
var xhr = new XmlHttpRequest();
IE中 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);
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.readyState4&&xhr.status200){
xhr.responseText
DOM编程
}
}
d) 服务器端:
不再进行页面的跳转,而是通过返回字符串信息,完成交互
request作用域 不使用
底层就是使用Response.getWriter()获取输出流 进行交互

5、JSON协议串
JSON协议串,本质上就是一个字符串。
在这里插入图片描述

a) 作用:异构的编程体系中,进行数据的传输,交互。
b) 核心:
i. 定义了字符串的格式

  1. 对象形式
    在这里插入图片描述

  2. 集合形式
    在这里插入图片描述

  3. 内嵌对象
    在这里插入图片描述

  4. Map类型 与 对象的形式一致
    在这里插入图片描述
    ii. JSON协议解析 多种工具可以自动支持转换
    java端:jsonlib gson(Google) fastjson(ali) jakeson(SpringMVC)
    Gson

  5. Gson的基本应用
    Gson gson = new Gson();
    gson.toJson();
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  6. Gson的特殊应用场景
    a) Json字符串的属性名与对象属性名不一致的问题
    在这里插入图片描述
    b) 解决对象回环问题
    在这里插入图片描述
    i. 注解 @Expose
    没有使用@Expose的注解的属性 将会被排除,不会被转换
    在这里插入图片描述
    在这里插入图片描述
    ii. 使用接口回调
    实现一个排除策略的接口(告示Gson 排除的内容)
    在这里插入图片描述
    在这里插入图片描述
    c) 特殊的日期类型问题
    i. 实现接口
    在这里插入图片描述
    ii. 注册到GsonBuilder
    在这里插入图片描述
    Gson gson = new GsonBuilder().registerTypeAdapter (Id.class,new IdSerializer()).create();
    在这里插入图片描述

  7. JSON转化成JS对象 (浏览器内置,Jquery,Extijs)
    浏览器内置对象 ,后续建议使用Jquery
    JSON.parse(jsonString) ----- js对象
    ----- js的数组
    在这里插入图片描述

6、案例 :应用Ajax技术实现 显示所用用户的信息
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值