ajax与json思维导图及知识点梳理
ajax概述
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=n
ew XMLHttpRequest();  }else{// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }
属性
onreadystatechange事件在ajax对象状态发⽣改变时，就会触发该事件对象.onreadystatechange = function(){}
readyState
存有 XMLHttpRequest 的状态
0: 请求未初始化
1: 服务器连接已建⽴
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status响应状态码adyState==4 && xmlhttp.status == 200){ 执⾏的代码⽚段}
blur事件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引擎对象的状态变化)
adyState==4 && xmlhttp.status == 200){
// 获取响应结果信息，并处理信息
}
}
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：响应回来的数据（sponseText）} 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(异步提交)
json
xml:
作⽤:
配置⽂件
数据传递的载体  ----> 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中使⽤json
java对象转json串
List:
张三 李四 王五 赵六 ⽥七
list转json: (json在java中以字符串的形式体现)
"['张三','李四'...]"
常见⼯具类
jsonlib
1.导⼊jar包
2.使⽤api
JSONArray.fromObject(数组或者list)
JSONObject.fromObject(对象或者map)
fastjson(阿⾥巴巴)
gson(google)
使⽤步骤:
1.Gson g = new Gson();
Jackson
开源免费的json转换⼯具，springmvc转换默认使⽤jackson 导⼊json相关jar包
创建核⼼解析对象
ObjectMapper om = new ObjectMapper();
om.writeValueAsString(obj)
案例:
案例1-检测⽤户名是否已经被注册
需求分析:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。