Ajax和Json学习教程

  • A+
所属分类:JavaScript JavaWeb

内容介绍

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
沙海
C语言郝斌老师教程
一个Java基础入门的教程视频
网站https安全证书安装,伪静态配置
C语言项目源码分享

发表评论

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