## AJAX：

1.概念：ASynchronous JavaScript And XML 异步的JavaScript 和 XML

1.异步和同步：客户端和服务器端相互通信的基础上

*客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作

*客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其她的操作

使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作

2.实现方式：

1.原生的js实现方式（了解）

    <script>//定义方法function  fun() {//发送异步请求//1.创建核心对象var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}//2. 建立连接/*参数：1. 请求方式：GET、POST* get方式，请求参数在URL后边拼接。send方法为空参* post方式，请求参数在send方法中定义2. 请求的URL：3. 同步或异步请求：true（异步）或 false（同步）*/xmlhttp.open("GET","ajaxServlet?username=tom",true);//3.发送请求xmlhttp.send();//4.接受并处理来自服务器的响应结果//获取方式 ：xmlhttp.responseText//什么时候获取？当服务器响应成功后再获取//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。xmlhttp.onreadystatechange=function(){//判断readyState就绪状态是否为4，判断status响应状态码是否为200if (xmlhttp.readyState==4 && xmlhttp.status==200){//获取服务器的响应结果var responseText = xmlhttp.responseText;alert(responseText);}}}</script>

2.JQuery实现方式

1. $.ajax（）

    <script>//定义方法function fun() {//使用$.ajax（）发送异步请求$.ajax({url:"ajaxServlet", //请求路径type:"POST",  //请求方式data:{"username":"jack","age":23},  //请求参数success:function (data) {alert(data);}//响应成功后的回调函数});}</script>

2. $.get（）：发送get请求

*语法：$.get（url，[data]，[callback]，[type]）

*参数：

*url：请求路径

*data：请求参数

*callback：回调函数

*type：响应结果的类型

3. $.post（）:发送post请求

*语法：$.get（url，[data]，[callback]，[type]）

*参数：

*url：请求路径

*data：请求参数

*callback：回调函数

*type：响应结果的类型

    <script>function fun() {$.get("ajaxServlet",{"username":"rose"},function (data) {alert(data);},"text");}function fun() {$.post("ajaxServlet",{"username":"rose"},function (data) {alert(data);},"text");}</script>

## JSON：

1.概念： JavaScript Object Notation JavaScript对象表示法

Person p = new Person( );

p.setNmae（"张三"）；

p.setAge（23）；

p.setGender（"男"）；

var p = {"name":"张三"，"age"：23，"gender"："男"}；

*json现在多用于存储和交换文本信息的语法

*进行数据的传输

*JSON 比 XML 更小、更快、更衣解析

2.语法：

1.基本规则

*数据在名称/值对中：json数据是由键值对构成的

*键用引号（单双都行）引起来，可以不使用引号

*值得取值类型：

1.数字（整数或浮点型）

2.字符串（在双引号中）

3.逻辑值（true 或 false）

4.数组（在方括号中） {"person"：[ { }，{ } ]}

5.对象（在花括号中） {"address"：{"province"："陕西"....} }

6.null

*数据由逗号分割：多个键值对有逗号分隔

*花括号保存对象：使用{ }定义json格式

*方括号保存数组: [ ]

    <script>var q = {"name":"刘泽宇","age":23,"gender":true};alert(q);//嵌套格式{} --> []var w = {"person":[{"name":"刘泽宇","age":23,"gender":true},{"name":"小王","age":23,"gender":true},{"name":"小李","age":23,"gender":true}]};alert(w);//嵌套格式 [] --> {}var e = [{"name":"刘泽宇","age":23,"gender":true},{"name":"刘泽宇","age":23,"gender":true},{"name":"刘泽宇","age":23,"gender":true}];    </script>

2.获取数据：

1.json对象.键名

2.json对象["键名"]

3.数组对象[索引]

    <script>//嵌套格式 [] --> {}var e = [{"name":"刘泽宇","age":23,"gender":true},{"name":"刘泽宇","age":23,"gender":true},{"name":"刘泽宇","age":23,"gender":true}];for (let i = 0; i < e.length; i++) {var p = e[i];for (var key in p){alert(key+":"+p[key])}}var q = {"name":"刘泽宇","age":23,"gender":true};for (key in q){alert(key+":"+q[key])}</script>

3.JSON数据和Java对象的相互转换

*JSON解析器：

*常见的解析器：：Jsonlib ，Gson，fastjson，jackson

1.JSON转为Java对象

1.导入Jackson的相关jar包

2.创建Jackson的核心对象 ObjectMapper

3.调用ObjectMapper的相关方法进行转换

*readValue（json字符串数据,Class）

   @Testpublic void test5() throws IOException {String json = "{\"gender\":\"男\",\"name\":\"张三\",\"age\":13}";ObjectMapper objectMapper = new ObjectMapper();Person person = objectMapper.readValue(json, Person.class);System.out.println(person);}

2.Java对象转换为JSON

1.使用步骤：

1.导入jackson的相关jar包

2.创建Jackson核心对象 ObjectMapper

3.调用ObjectMapper的相关方法进行转换

*转换方法：

         转换方法:
                                *   writeValue（参数1,obj）:
                                *       参数1：
                                *           File:将obj对象转换为JSON字符串，并保存到指定的文件中
                                *           Writer:将obj对象转换为JSON字符串，并将json数据填充到字符输出流中
                                *           OutputStream:将obj对象转换为JSON字符串，并将json数据填充到字节输出流中
                                *   writeValueAsString（obj）:将对象转为json字符串

package test;import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import domain.Person;
import org.junit.Test;import java.io.File;
import java.io.IOException;public class JacksonTest {@Testpublic void test1() throws IOException {//1.创建Person对象Person p = new Person();p.setName("刘泽宇");p.setAge(19);p.setGender("男");//创建核心对象 ObjectMapperObjectMapper objectMapper = new ObjectMapper();//转换/** 转换方法:*   writeValue（参数1,obj）:*       参数1：*           File:将obj对象转换为JSON字符串，并保存到指定的文件中*           Writer:将obj对象转换为JSON字符串，并将json数据填充到字符输出流中*           OutputStream:将obj对象转换为JSON字符串，并将json数据填充到字节输出流中*   writeValueAsString（obj）:将对象转为json字符串** */String s = objectMapper.writeValueAsString(p);System.out.println(s);objectMapper.writeValue(new File("d:\\a.txt"),p);}
}

2.注解：

1.@JsonIgnore：排除属性

2.@JsonFormat：属性值得格式化

    @JsonFormat(pattern = "yy-MM-dd")

3.复杂java对象转化

1.List：数组

2.Map：对象格式一致

    @Testpublic void test3() throws JsonProcessingException {Person p = new Person();p.setName("刘泽宇");p.setAge(19);p.setGender("男");p.setBirthday(new Date());Person p1 = new Person();p.setName("小王啊");p.setAge(14);p.setGender("男");p.setBirthday(new Date());Person p2 = new Person();p.setName("小红");p.setAge(19);p.setGender("女");p.setBirthday(new Date());List<Person> list = new ArrayList<Person>();list.add(p);list.add(p1);list.add(p2);//创建核心对象 ObjectMapperObjectMapper objectMapper = new ObjectMapper();String s = objectMapper.writeValueAsString(list);System.out.println(s);}@Testpublic void test4() throws JsonProcessingException {Map<String,Object> map = new HashMap<String,Object>();map.put("name","张三");map.put("age",13);map.put("gender","男");ObjectMapper objectMapper = new ObjectMapper();String s = objectMapper.writeValueAsString(map);System.out.println(s);}

# # 案例

*校验用户名是否存在

1.服务器响应的数据，在客户端使用是，要想当做json数据格式使用

1.$.get（type）：将最后一个参数type指定为 “ json ”

2.在服务器端设置MIME类型

reponse.setContentType（"application/json；charset=utf-8"）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.3.1.min.js"></script><script>$(function () {$("#username").blur(function () {//获取文本框输入值var username = $(this).val();//发送ajax请求$.get("findUserServlet",{username:username},function (data) {if(data.a){$("#s_username").css("color","red");$("#s_username").html(data.b);}else {$("#s_username").css("color","green");$("#s_username").html(data.b)}},"json");});});</script>
</head>
<body>
用户名:<input type="text" id="username" name="username" placeholder="请输入用户名"><span id="s_username"></span><br>
密码:<input type="text" password="password" placeholder="请输入密码"><br>
<input type="submit" value="注册">
</body>
</html>

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//获取用户名String username = request.getParameter("username");response.setContentType("application/json;charset=utf-8");Map<String, Object> objectObjectHashMap = new HashMap<String, Object>();if("tom".equals(username)){objectObjectHashMap.put("a",true);objectObjectHashMap.put("b","用户名已经存在");}else {objectObjectHashMap.put("a",false);objectObjectHashMap.put("b","用户名可用");}ObjectMapper objectMapper = new ObjectMapper();objectMapper.writeValue(response.getWriter(),objectObjectHashMap);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost(request, response);}

AJAX JSON相关推荐

laravel ajax返回json,Laravel validate error处理,ajax,json示例
如下所示: public function updateLevelTestRecords(Request $request) { $rules = [ 'uid' => 'required|in ...
ajax+php+jq+面向对象,php+jquery+ajax+json的一个最简单实例
html页面: $(function(){ $("#send").click(function(){ var cont = $("input").seriali ...
struts2 ajax html,Struts2+Jquery+Ajax+Json
现在使用Json来封装并且传递数据的情形是越来越多了,可怎么样在Struts2中来使用Jquery+Ajax+Json来协同工作呢?在网上查了下就那几个例子被转过来转过去的,还有很多例子根本行不通,这 ...
AJAX+json+jquery实现预加载瀑布流布局
AJAX+json+jquery实现预加载瀑布流布局转载于:https://www.cnblogs.com/zhujiabin/p/4860954.html
struts2+ajax+json使用实例
本文主要包含一个struts2+ajax+json的使用实例步骤如下 1.准备工作 ①ajax使用Jquery:jquery-1.4.2.min.js ②struts2与json的依赖包:strut ...
php ajax json 实例,php+ajax+json 详解及实例代码
php+ajax+json 实例代码 html页面: $(function(){ $("#send").click(function(){ var cont = $("i ...
ajax json的参数,java ajax json参数
java ajax json参数 [2021-02-02 08:55:23] 简介: php去除nbsp的方法:首先创建一个PHP代码示例文件:然后通过"preg_replace(&quo ...
linux json 写sql注入,sql注入之AJAX（SQL Injection (AJAX/JSON/jQuery)）
sql注入之AJAX(SQL Injection (AJAX/JSON/jQuery)) 0x1 网上搜下没有关于ajax的sql注入文章,这里简单写一下抛砖引玉. 原理自己百度,这里简单说下: 通过 ...
购物车ajax php json,Ajax+json实现购物车结算
这次给大家带来Ajax+json实现购物车结算,Ajax+json实现购物车结算的注意事项有哪些,下面就是实战案例,一起来看一下. 全选商品单价数量小计操作全选删除选中产品总价:￥0 ...
web前端之后的4天(Ajax,json,redis,maven)
web前端之后的10天(Ajax,json,redis,maven) day2(还是前端的内容) 1.AJAX 2.JSON AJAX: 1.概念:ASynchronous JavaScrip And ...

AJAX JSON