ajax与json思维导图及知识点梳理
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML
AJAX 是一种用于创建快速动态网页的技术。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在前台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
应用场景用户名校验
百度自动补全
商品查找
搜索图片
javaScript中使用ajax(理解)原生ajax
入门案例1.创建一个核心对象(XMLHTTPRequest)该对象称之为ajax引擎
2.编写onreadystatechange事件所调用的函数回调函数
3.确定请求方式和请求路径
4.发送请求
5.处理返回结果
api详解创建核心对象(XMLHttpRequest)js代码 ------> 翻译器(js引擎) -----> 被所有浏览器内置
ajax引擎对象被js引擎所包含
var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else{// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
属性onreadystatechange事件在ajax对象状态发生改变时,就会触发该事件对象.onreadystatechange = function(){}
readyState
存有 XMLHttpRequest 的状态
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status响应状态码if(xmlhttp.readyState==4 && xmlhttp.status == 200){执行的代码片段}
responseText获取服务器响应回来的文本信息
常用方法open(method,url,[async])
设置请求的类型,请求地址以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
send([string])
将请求发送到服务器
string：存放post请求携带的参数
在post请求时要设置请求参数的mime类型xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
小结:
原生ajax使用方式:
1.创建核心引擎对象(XMLHttpRequest)
// 复制
2.编写回调函数(监听ajax引擎对象的状态变化)
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status == 200){
// 获取响应结果信息,并处理信息
xmlhttp.responseText;
}
}
3.设置请求方式和请求路径
// get请求携带参数拼接在请求路径后面 ?参数=值&参数=值
xmlhttp.open(method,url,[async]);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
4.发送请求
// 参数格式: 参数=值&参数=值
// post请求携带的参数要想提交给服务器需要设置请求参数的mime类型
xmlhttp.send([post请求携带的参数]);
jQuery中使用ajax(★)$.post(url,[params],fn,[type])发送post请求
url:请求的路径
params:请求的参数
格式1:字符串 key1=value1&key2=value2
格式2:json格式{"key1":value1,"key2":value2}
fn:回调函数 (ajax请求执行完成后调用的函数)function(data){//data:响应回来的数据 （xmlHttp.responseText）}
type:返回内容的格式 text xml json
默认返回text类型的数据
一般不需要自己设置,如果需要设置一般设置为 "json"
$.get(url,[params],fn,[type])发送get请求
$.ajax({url,[settings]})url:请求路径
type:请求方式
data:请求参数
success:请求成功后的回调函数
error:请求失败时调用此函数
dataType:服务器返回的数据类型一般不需要自己设置,如果需要设置一般设置为 "json"
async:设置是否异步提交 默认值为true(异步提交)
例如:$.ajax({url:url,data:params,type:"post",success:f,error:function(){alert("失败了")},async:true});
注意事项: 默认get方式提交
新增签名方式:$.get({[settings]});url:请求路径
data:请求参数
success:请求成功后的回调函数
error:请求失败时调用此函数
dataType:服务器返回的数据类型一般不需要自己设置,如果需要设置一般设置为 "json"
async:设置是否异步提交 默认值为true(异步提交)
$.post([settings]);url:请求路径
data:请求参数
success:请求成功后的回调函数
error:请求失败时调用此函数
dataType:服务器返回的数据类型一般不需要自己设置,如果需要设置一般设置为 "json"
async:设置是否异步提交 默认值为true(异步提交)
jsonxml:
作用:
配置文件
数据传递的载体 ----> json
概述:JavaScript 对象表示法（JavaScript Object Notation）
是存储和交换文本信息的语法。类似 XML
比 XML 更小、更快，更易解析
格式:格式1:json对象
{ "key":"value" , "key":value }
key: String
value可以为任意类型的数据
格式2:json数组
["aa","bb",123,true]
格式3:混合json
[{"name":"张三","age":18},{"name":"张三","age":18}]
{"sudent":["张三","李四","王五"]};
javaScript中使用jsonjava对象转json串List:
张三 李四 王五 赵六 田七
list转json: (json在java中以字符串的形式体现)
"['张三','李四'...]"
常见工具类jsonlib1.导入jar包
2.使用api
JSONArray.fromObject(数组或者list)
JSONObject.fromObject(对象或者map)
fastjson(阿里巴巴)JSON.toJSONString(str)可以转一切对象
gson(google)使用步骤:
1.Gson g = new Gson();
2.g.toJson(对象);可以转一切对象
Jackson开源免费的json转换工具，springmvc转换默认使用jackson
导入json相关jar包
创建核心解析对象
ObjectMapper om = new ObjectMapper();
om.writeValueAsString(obj)
案例:案例1-检测用户名是否已经被注册
需求分析:
在注册页面上,当用户在用户名的输入框中输入完用户后,失去焦点时发送ajax请求,校验该用户名是否存在.
该用户名已存在:
提示: "该用户名已被占用"
该用户名不存在:
提示: "✔"
技术分析:
blur: 失去焦点事件
ajax:
$.post(url,params,function(data){},"json|text");
步骤分析:
前台:
提供注册页面,给用户名的输入框添加失去焦点事件
输入框对象.blur(function(){
// 发送ajax请求
var url = "demo1";
var params = {"username":"tom"};
$.post(url,params,function(data){
// 判断执行结果...
},"text");
});
后台:
web:
Demo1Servlet:
a.获取请求携带的参数信息: username
b.调用service处理业务逻辑
boolean flag = service.isRegister(username);
c.判断执行结果
if(flag){
// 当前用户名可以使用
}else{
// 用户名已被占用
}
service:
isRegister(username)
{
User user = dao.isRegister(username);
return user == null ? true : false ;
}
dao:
isRegister(username)
{
sql = "select * from user where username = ? ";
user;
}
案例2-异步自动填充
需求分析:
当用户在搜索框中输入关键字,键盘弹起时,获取用户输入的关键字,向服务器发送ajax请求,将匹配的热搜词展示到输入框下面.展示4条.
技术分析:
keyup: 键盘弹起事件
ajax:
步骤分析:
前台:
给搜索框添加键盘弹起事件:
搜索框对象.keyup(function(){
// 发送ajax请求
var url = "demo2";
var params = {"keyWords":"t"};
$.post(url,params,function(data){
// 展示结果
},"json");
});
后台:
web:
Demo2Servlet:
//a.获取用户输入的关键字
String keyWords = req....;
//b.调用service处理业务逻辑
List<Object> list = service.findKeyWords(keyWords);
//c.将执行结果写回给ajax请求
service:
findKeyWords(keyWords)
{
return dao.findKeyWords(keyWords);
}
dao:
findKeyWords(keyWords)
{
sql = "select name from user where name like ? limit 4 ";
template.queryForList(sql,Object.class,"%"+keyWords+"%");
}
总结:前后端分离:
同步 + 异步
ajax:
JavaScript的ajax: 原生ajax
1.创建ajax引擎对象: XMLHttpRequest
2.编写监听ajax对象状态变化的函数
// 5.判断状态码处理响应结果
3.设置请求方式和请求路径
4.发送请求
jq:
$.post(url,params,function(data){},"text|json"); ★
$.get(url,params,function(data){},"text|json"); ★
$.ajax({
url:url,
type:"get|post",
data:params,
success:function(data){},
dataType:"text|json"
});
$.get({
url:url,
data:params,
success:function(data){},
dataType:"text|json"
});
$.post({
url:url,
data:params,
success:function(data){},
dataType:"text|json"
});
json: ★
格式:
json对象: {}
json数组: []
混合json: [] {}
将java对象转成json: ★
jackson:
new ObjectMapper()
om.writeValueAsString(obj);
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
