Ajax和Json学习教程

沙海
沙海
沙海
164
文章
2
评论
2019年1月15日17:37:04 评论 88 2344字阅读7分48秒

内容介绍

1 js的ajax(了解)
2 jquery的ajax(掌握)
3 json数据(掌握)

ajax

概述

ajax是js提供的一门高级技术
做浏览器和服务器的数据交互
学习的浏览器和服务器的数据交互方式:
超链接  <a href="servlet?xxx=xxx&xxx=xx&xxx=xxx";
表单提交 
js的方式:
localtion.href="servlet?xx=xxx&xx=xxx&xx=xx";
ajax
ps:只要写ajax代码做交互都离不开js代码

ajax: Asynchronous Javascript And  XML  -----异步的javascript和xml
浏览器:页面有了数据要使用js提供的一个对象(XMLHttpRequest)将数据带给服务器
服务器:产生了数据,要将数据封装已xml的形式给浏览器
过渡期
浏览器:页面有了数据要使用js提供的一个对象(XMLHttpRequest)将数据带给服务器
服务器:产生了数据,简单数据(String int..)直接返回 复杂数据(对象/map/list)以json的格式返回
ajax接受不到复杂数据(对象、map.list)只能接受json数据

作用

ajax可以让页面不刷新不提交的与服务器进行数据交互,给用户的体验好--异步交互
之前页面与服务器数据交互,必须提交加载整个页面--同步交互

什么是同步?什么是异步?(面试题)

同步:加载整个页面,客户端发送请求到服务器端,当服务器返回响应之前,页面都处于等待不能操作状态
异步:不需要加载整个页面,客户端发送请求到服务器端,无论服务器是否返回响应,页面可以随意做其他事情
不论是同步方式还是异步方式都是做浏览器和服务器数据交互的

Ajax的异步运行原理:(面试题)

页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到
服务器,在这段时间里,客户端可以任意进行任意操作,
直到服务器端将数据返回给Ajax引擎后,Ajax引擎再将数据给浏览器解析

ajax的使用

js的ajax了解

1.创建引擎对象(XMLHttpRequest)
2.编写回调函数
3.确定请求方式和请求的路径(open操作)
4.发送请求(send操作)

js的ajax API概述

XMLHttpRequest:引擎对象       
onreadystatechange:检测引擎对象的状态变化  
特点:只要引擎对象状态变换一次 该函数执行一次
属性:         
readyState:可以输出引擎对象的变化          
0,刚创建
1,执行了open方法
2,执行了send方法
3,部分响应已生成
4,响应已生成(咱们要的)           
status:响应的状态码(200)---针对404问题            
responseText:响应回来的文本

jquery的ajax重点掌握

方式一 $.get(url,[data],[fn],[dataType]):发送了一个get请求
方式二 $.post(url,[data],[fn],[dataType]):发送一个post请求
参数介绍:
url:要访问的地址
data:要传递的数据  2种: key=value&key=value   json格式方式:{key1:value1,key2:value2...}    
fn(d): 回调函数  d:代表的是服务器响应回来的数据
dataType:把服务器响应的数据转换成指定类型 默认:text(字符串)  json类型
Ps:ajax对get请求和post请求的中文提交乱码都处理了 但是响应中文还得自己处理

方式三 $.ajax({key:value})
参数介绍:
url:访问地址
data:传递的参数
sync:是否异步提交 默认异步(true)
dataType:服务器返回来的数据类型 默认不写字符串
type:提交方式
success:服务器响应成功之后的回调函数
error:服务器响应失败之后的回调函数

jquery3.0还有2种(了解)
3.0才能使用的签名方式
方式四 $.get({key:value,.....})
方式五 $.post({key:value,.....})
参数介绍:
url:访问地址
data:传递的参数
sync:是否异步提交 默认异步(true)
dataType:服务器返回来的数据类型
success:服务器响应成功之后的回调函数
error:服务器响应失败之后的回调函数

json数据

概述

Json: 数据交换的格式 属于javascript的语法部分,能够被ajax快速解析

json的数据格式(三种)

格式1  对象格式
{key1:value1,key2:value2....}  key是字符串类型 value是任意类型
例子:{"username":"jack","password":123};

格式2  数组格式  value可以为任意类型
[value1,value2,value3....]  
例子:["aaa",111,true,false]

格式3  混合各式
[{key1:value1,key2:value2},{key1:value1,key2:value2}]
{key1:[{key1:value1},{key1:value1}]}

注意:在开发中不写json格式数据 但一定要会解析json数据获取内容

问题:怎么将对象,list,map转换成json格式数据?

数据库产生数据(对象、map、list)-->转化工具(jackson)-->json-->ajax-->解析获取

json转换工具:Jackson

作用:直接将java对象或集合转换成json格式的数据。
使用步骤:
1 导3个包
2 使用api转换
    ObjectMapper objectMapper = new ObjectMapper();
    方法:writeValueAsString(对象||list||map..);
继续阅读
  • 资源分享QQ群
  • weinxin
  • 官方微信公众号
  • weinxin
沙海
  • 版权声明:本站是一个IT技术分享社区,沙海技术团队的技术分享社区,我们会经常分享资源和教程。
  • 转载请注明:Ajax和Json学习教程 - GYHQQ社区 ☜(ˆ▽ˆ)
C语言项目源码打包分享
C语言详细视频教程
美女讲师教你学C语言
动力节点最牛Java自学基础教程
收藏排行榜分页查询功能 JavaScript

收藏排行榜分页查询功能

收藏排行榜分页查询功能 需求分析 当用户需要查询当前网站那些旅游线路被收藏更多次或者更热门时,我们可以通过点击“收藏排行榜”导航栏超链接完成根据旅游线路表中收藏次数倒序查询数据,并将查询结果展示在fa...
JavaMail&定时器 Java

JavaMail&定时器

第1章 Filter拦截方式 1.1 include 当设置过滤器的拦截方式为include的时候,只有当使用include方式转发的请求才能被拦截 1.1.1 include拦截方式代码演示 1.创...
Linux搭建web环境手册 Redis

Linux搭建web环境手册

使用说明 说明:该笔记是在linux上安装jdk,mysql,tomcat,redis等软件,以便于建立一个linux系统下的web环境,具体安装过程的流程截图等可以参考我的另一篇图片教程:Linux...
Redis(缓存技术)教程 Java

Redis(缓存技术)教程

概述 Redis是用C语言开发的一个开源的高性能键值对(key-value)数据库 为什么要使用redis? 场景: 在企业级开发,需要完成导航条的数据,但是导航条的数据一般都是来源于数据库,只要每个...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: