文章目录

AJAX 异步请求
- 简介
- Jquery 版 Ajax
- - $.ajax() -- Jquery提供的 ajax 函数
  - 注册验证用户名是否可用
  - $.get() 与 $.post()
  - Ajax 返回数据类型
- JSON
- - json 简介
  - JSON 对象
  - JSON 数组
  - 对象数组混合格式
  - 小结
- JSON 应用
- - JSON 对象的使用
  - JSON 数组的使用
  - 响应的 json 数组
  - 数组对象混合格式
- Jackson 工具
- - 简介
  - jackson 工具的使用
  - jackson 转换对象

AJAX 异步请求

简介

Ajax 全称为 Asynchronous JavaScript And Xml -- 异步 js 和 xml，用来进行
交互式网页的制作；也是一种动态的网页开发技术，在不加载整个页面的前提下进行页面局部
内容的刷新；
Ajax 在后台与服务器进行少量的数据交互，使用网页实现异步更新，比传统的刷新整个页面
带给服务器的压力要小很多；让程序的运行更加顺畅；
Ajax 分为原生 js 实现和 Jquery 框架实现；
原生的 Ajax 需要定义 XmlHttpRequest 对象，通过该对象的 open 方法和 send 方
法进行请求方式的设置和请求发送，当请求发送到指定 url，被服务器接受并处理，再响应给
页面数据；
Jquery 提供的 ajax 是一个封装好底层实现的函数，只需要进行一些参数设置就能实现
ajax 请求的发送；

Jquery 版 Ajax

$.ajax() – Jquery提供的 ajax 函数

格式：
$.ajax({
url:"请求地址",
data:{},
type:"post/get",
async:true/false,
dataType:"text/json",
success:function(obj){},
error:function(){}
})
url：与 form 表单的 action 属性一致，表示请求发送的地址
data：请求发送时携带的参数，以传统的 key=value 方式进行发送
type：请求发送的方式，对应 form 表单的 method 属性
async：是否支持异步请求发送，true 表示支持异步请求，默认为 true
dataType：服务器响应给页面的数据类型，text、html、json、xml；其中 json 格式
的数据时最好处理的数据类型；
success: 请求响应成功调用的回调函数，如果响应成功，会将响应的数据封装到回调函数的
参数中，在 obj 对象中进行响应数据的获取
error: 请求响应失败后的回调函数，一般不写；
在真正使用 ajax 进行异步请求发送时，不是所有的属性都需要写，除了 url 属性，其他属
性都是可选属性；

注册验证用户名是否可用

servlet 类

service 层

dao 层

$.get() 与 $.post()

$.get() 与 $.post() 是 $.ajax() 的二次封装，分别针对 get 请求和 post 请求
的 ajax;
$.get()：只能处理 get 方式请求
$.post()：只能处理 post 方式请求
语法：
$get/post(
"请求地址",
{key:value,key:value},
function(){},
"text"
)
注意：$.ajax() 和 $.get() 与 $.post() 实现的功能是一样的，但是$.get() 与
$.post() 在进行属性书写时顺序有严格要求；

Ajax 返回数据类型

Ajax 支持多种返回值类型，主要有以下几种：
① xml：太复杂、解析起来比较麻烦，已被淘汰
② text/html：表示文本，一般情况下 html 使用 text 代替，因为 html 虽然说是页
面，但是本质和文本一样；
③ script：返回脚本
④ json：json 对象，是一种在页面上操作起来相对简单的数据类型，非常方便页面值获取，
是后续学习中首选的返回数据类型
⑤ jsonp：和 json 几乎一样，只不过 jsonp 支持跨域访问

JSON

json 简介

json 全称为 JavaScript Object Notation – js 对象简谱，是一种轻量级的数据
交换格式；它是基于 ECMAScript，采用独立的编程语言的文本格式进行储存和表示数据。该
语言简介、层次分明、易于浏览器解析换和生成对应的数据；目前是较为理想的数据交换语
言，易于编程人员阅读、编写、操作；
json 格式的数据分为：json对象、json数组、对象数组混合格式
json 在线解析工具：www.bejson.com
① 能够进行 json 数据格式校验
② 能够将不规范的 json 数据就行格式化

JSON 对象

格式：
{
"key":"value",
"key2":"value2"
}
例如：表示一个有 name 和 age 属性的对象
{"name":"张三","age":"20"}

JSON 数组

与 java 的 Object 类型的一维数组表示方式一致。
格式：
[1,2,3,"apple"]

对象数组混合格式

数组内部嵌套对象，或者对象内部嵌套数组；
格式：
[{
"key":"value",
"key1":["value1","value2","value3"]
},
{
"key":"value",
"key1":["value1","value2","value3"]
},
{
"key":"value",
"key1":["value1","value2","value3"]
}]

小结

① JSON 格式的语法是使用 {} 或者是 []，{} 表示对象，[] 表示数组；
对象中数据的获取方式是通过 key 值获取 value 值
数组中数据的获取使用通过索引进行获取
② 对象中数据的储存是以 key:value 的形式，多个数据之间使用 ',' 隔开
③ 数组中数据的储存是以单个元素进行，多个数据之间使用 ',' 隔开

JSON 应用

JSON 对象的使用

jsp 页面

servlet

service 层

dao 层

运行结果

JSON 数组的使用

servlet 类

响应的 json 数组

jsp 页面

运行结果

数组对象混合格式

servlet

servlet 响应的数据

jsp 页面获取数据

第一种方式 – 有缺陷，需要事先知道数组大小

第二种方式 – 具有通用性

运行结果

Jackson 工具

简介

Jackson 是一个可以将各种类型的数据转换为 json 字符串的工具；
能够对常用对象、数组、集合等类型的数据快速的转换为 json 字符串，能够大幅度的提升开
发效率；
Jackson 工具的使用需要依赖3个 jar 包：
① jackson-core
② jackson-databind
③ jackson-annotations

jackson 工具的使用

将 jar 包导入项目

将新添加的 jackson jar 包加入到服务器中

jackson 转换对象

servlet 类

响应给页面的数据

jsp 页面进行响应数据的获取

运行结果

AJAX 异步请求详细教程相关推荐

html弹窗赋值给查询框,bootstrap模态框动态赋值， ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）...
/查询单个 function query(id) { $.ajax({ url : "/small/productServlet", async : true, type : &q ...
php原生的异步请求,原生JavaScript实现Ajax异步请求
ajax现在是一种非常流行的技术,现在虽然可以利用JQuery或者一些第三方插件甚至微软提供的一些控件可以方面的实现ajax功能,但是明白其原理也是非常重要的,下面是来使用纯javascript实现获 ...
从浅到深，带你彻底搞懂AJAX异步请求
在平时开发过程中,异步请求似乎比同步请求出现的频率还要高一些.这是为什么呢?在同步请求时如果对网页的部分内容进行更新时,是不是就必须重载整个页面.这样肯定是不行的,这时就可以采用异步请求来解决此问题. ...
如何判断一个请求是否是Ajax异步请求
前言今天在看项目过程中,发现了一段代码.是用来判断一个请求是否是ajax请求,出于好奇,我研究了一番. 代码预览 /*** 是否是Ajax异步请求* * @param request*/public ...
php 返回字符串给aja,解决ajax异步请求返回的是字符串问题
1.返回结果差异 js获取后打印res.code无结果.因为返回数据格式不正确. php文件添加header头: header('Content-Type:application/json;'); 或 ...
Ajax异步请求-简单模版
1 <script type="text/javascript"> 2 window.onload = function () { 3 document.getElem ...
php中jquery ajax请求参数,浅谈Jquery中Ajax异步请求中的async参数的作用
之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html asy.js function testAsync{ var temp; $.ajax( ...
Ajax(异步请求)和传统(同步请求)区别
在服务器端判断request来自Ajax请求(异步)还是传统请求(同步): 两种请求在请求的Header不同,Ajax 异步请求比传统的同步请求多了一个头参数 1.传统同步请求参数 accept t ...
Ajax异步请求（重渲染DOM元素时，如何自动调用并执行JS自定义函数【含代码】）- 案例篇
文章目录 Ajax异步请求(重渲染DOM元素时,如何自动调用并执行JS自定义函数[含代码])- 案例篇效果截图: 重要代码: 附:全部HTML代码: Ajax异步请求(重渲染DOM元素时,如何自动调 ...

AJAX 异步请求详细教程

文章目录

AJAX 异步请求

简介

Jquery 版 Ajax

$.ajax() – Jquery提供的 ajax 函数

注册验证用户名是否可用

$.get() 与 $.post()

Ajax 返回数据类型

JSON

json 简介

JSON 对象

JSON 数组

对象数组混合格式

小结

JSON 应用

JSON 对象的使用

JSON 数组的使用

响应的 json 数组

数组对象混合格式

Jackson 工具

简介

jackson 工具的使用

jackson 转换对象

AJAX 异步请求详细教程相关推荐

最新文章

热门文章