ajax与json思维导图及知识点梳理

达拉特ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18980820575（备注：SSL证书合作）期待与您的合作！

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=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(异步提交)

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(阿里巴巴)

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(){