电子商务个人网站可以备案吗,如何将wordpress搬家,自己做网站要买服务器吗,建大型网站公司#x1f384;欢迎来到边境矢梦的csdn博文#xff0c;本文主要讲解Java 中 数据交换和异步请求 JsonAjax 的相关知识#x1f384; #x1f308;我是边境矢梦#xff0c;一个正在为秋招和算法竞赛做准备的学生#x1f308; #x1f386;喜欢的朋友可以关注一下#… 欢迎来到边境矢梦°的csdn博文本文主要讲解Java 中 数据交换和异步请求 JsonAjax 的相关知识 我是边境矢梦°一个正在为秋招和算法竞赛做准备的学生 喜欢的朋友可以关注一下下次更新不迷路 Ps: 月亮越亮说明知识点越重要 (重要性或者难度越大) 目录
一. JSON
1. JSON介绍
2. JSON 的定义格式
3. JSON 规则
4. JSON 对象和字符串对象转换(javaScript)
5. JSON 在 java 中使用
二. ajax
1. Ajax基本介绍
2. Ajax特点
3. Ajax 经典应用场景
4. Ajax基本原理
5. 原生Ajax
6. JQuery 的 Ajax 请求 jQuery 参考手册 - Ajax (w3school.com.cn)
一. JSON JSON 具有自我描述性更易理解 , 一句话非常的好用 1. JSON介绍
JSON: JavaScript Object NotationJavaScript 对象标记法。
JSON 是一种存储和交换数据的语法。
JSON 是通过 JavaScript 对象标记法书写的文本。
JSONJavaScript Object Notation是一种轻量级的数据交换格式 (String)
JSON易于阅读和编写的文本形式表示数据
JSON数据使用键值对的方式进行组织并且可以包含数组、对象和简单的数据类型例如字符串、数字、布尔值和null) JSON的语法规则相对简单它由以下几个基本结构组成 对象Object使用花括号{}表示对象是由键值对组成的无序集合每个键值对之间使用逗号分隔。数组Array使用方括号[]表示数组是由值组成的有序集合每个值之间使用逗号分隔。值Value表达数据的不同类型可以是字符串、数字、布尔值、对象、数组或null。键值对Key-Value表示对象中的属性和对应的值键和值之间用冒号:分隔。字符串String由双引号或单引号’括起来的Unicode字符序列。 2. JSON 的定义格式 var 变量名 { k1 : value, // Number 类型 k2 : value, // 字符串类 型 k3 : [],// 数组类型 k4 : {}, // json 对象类型 k5 : [{},{}] // json 数组 }; 以下是一个简单的JSON对象的例子
{name: John,age: 30,isStudent: true,hobbies: [reading, music, sports],address: {street: 123 Main St,city: New York}
}3. JSON 规则 1) 映射(元素/属性)用冒号 : 表示 名称 : 值 , 注意名称是字符串因此要用双引号引起 来 2) 并列的数据之间用逗号 , 分隔。 名称 1: 值 , 名称 2: 值 3) 映射的集合(对象)用大括号 {} 表示 。 { 名称 1: 值 , 名称 2: 值 } 4) 并列数据的集合数组用方括号 [] 表示 。 [{ 名称 1: 值 , 名称 2: 值 }, { 名称 1: 值 , 名称 2: 值 }] 5) 元素值类型 string, number, object, array, true, false, null !DOCTYPE html
html langen
headmeta charsetUTF-8titlejson 快速入门案例/titlescript typetext/javascriptvar myJson {key1: 快速入门案例, // 字符串key2: 123, // Numberkey3: [1, hello, 2.3], // 数组key4: {age: 12, name: jack}, //json 对象key5: [ //json 数组{k1: 10, k2: milan}, {k3: 30, k4: smith}]};//访问 json 的属性console.log(key1 myJson.key1);// 访问 json 的数组属性console.log(key3[1] myJson.key3[1]); // hello// 访问 key4 的 name 属性console.log(name myJson.key4.name); // jack// 访问 key5 json 数组的第一个元素console.log(myJson.key5[0] myJson.key5[0]); //[object, object]console.log(myJson.key5[0].k2 myJson.key5[0].k2)// milan/script
/head
body
h1json 快速入门案例/h1
/body
/html4. JSON 对象和字符串对象转换(javaScript) 1. JSON.stringify(json) 功能 : 将一个 json 对象转换成为 json 字符串 [ 简单说名字来源 .] Serialize 2. JSON.parse( jsonString ) 功能 : 将一个 json 字符串转换成为 json 对象 !DOCTYPE html
html langen
headmeta charsetUTF-8titleJSON 对象和字符串对象转换/titlescript typetext/javascript// 一个 json 对象var jsonObj {name: 对象和字符串对象转换, age: 10};//JSON 是一个 build-in 对象,内建对象,有方法可以使用console.log(JSON)// 把 json 对象转换成为字符串对象var jsonStr JSON.stringify(jsonObj);console.log(jsonStr);// 把 json 对象的字符串转换成为 json 对象var jsonObj2 JSON.parse(jsonStr);console.log(jsonObj2);/script
/head
body
h1JSON 对象和字符串对象转换/h1
/body
/html 注意事项和细节 1 、 JSON.springify(json 对 象 ) 会 返 回对 应 string, 并 不 会影 响 原 来 json 对 象 , 2 、 JSON.parse(string) 函数会返回对应的 json 对象 , 并不会影响原来 string 3 、在定义 Json 对象时 , 可以使用 表示字符串 , 比如 var json_person { name : jack , age : 100 }; 也可以写成 var json_person { name : jack , age : 100 }; 4 、但是在把原生字符串转成 json 对象时 , 必须使用 , 否则会报错 比如 var str_dog {name: 小黄狗 , age: 4} ; 转 json 就会报错 5 、 JSON.springify(json 对象 ) 返回的字符串 , 都是 表示的字符串 , 所以在语法格式正确 的情况下 , 是可以重新转成 json 对象的 . 5. JSON 在 java 中使用 说明 1. java 中使用 json 需要引入到第 3 方的包 gson.jar 2. Gson 是 Google 提供的用来在 Java 对象 和 JSON 数据 之间进行映射的 Java 类库。 3. 可以对 JSON 字符串 和 Java 对象相互转换 JSON 在 Java 中应用场景 1. Javabean 对象和 json 字符串 的转换 2. List 对象和 json 字符串 的转换 3. map 对象和 json 字符串 的转换 应用场景示意图 public static void main(String[] args) {// new 一个 gson 对象。引入 gson 包Gson gson new Gson();//1. java 对象和 json 的转换System.out.println(\n 1. java 对象和 json 的转换 );Book book new Book(100, 韩顺平零基础学 Java);// 把对象转成为 json 字符串String bookStr gson.toJson(book);System.out.println(bookStr);// 把 json 字符串转换成为 java 对象Book book2 gson.fromJson(bookStr, Book.class);System.out.println(book2);//2 List 集合和 json 的转换System.out.println(\n2 List 集合和 json 的转换);ArrayListBook bookList new ArrayList();bookList.add(new Book(200, 天龙八部));bookList.add(new Book(300, 神雕侠侣));//将 list 转成 json 字符串String bookListStr gson.toJson(bookList);System.out.println(bookListStr bookListStr);//将 json 字符串转成 List 集合方式 1ListBook bookList2 gson.fromJson(bookListStr, new BookType().getType());System.out.println(bookList2 bookList2);//将 json 字符串转成 List 集合方式 2- 使用 匿名内部类ListBook bookList3 gson.fromJson(bookListStr, new TypeTokenListBook() {}.getType());System.out.println(bookList3 bookList3);//3. map 集合和 json 的转换System.out.println(\n3. map 集合和 json 的转换);MapString, Book bookMap new HashMap();bookMap.put(sn1, new Book(10, 射雕英雄传));bookMap.put(sn2, new Book(20, 碧血剑));// 把 map 转换成为 jsonString bookMapStr gson.toJson(bookMap);System.out.println(bookMapStr bookMapStr 类 型 bookMapStr.getClass());// 把 json 转成 mapMapString, Book bookMap2 gson.fromJson(bookMapStr, new TypeTokenHashMapString, Book() {}.getType());System.out.println(bookMap2 bookMap2 类型 bookMap2.getClass());} JSON具有良好的可读性和可扩展性广泛应用于Web应用程序间的数据交换、配置文件的存储和API的传输。在许多编程语言中都提供了JSON的解析和生成库以方便对JSON数据进行操作和处理。 二. ajax 1. Ajax基本介绍 1. AJAX 即Asynchronous Javascript And XML(异步 JavaScript 和 XML) 2. Ajax 是一种浏览器 异步发起请求 ( 指定发哪些数据 ) 局部更新页面 的技术 3. 传统的方式只能刷新整个页面 AJAX 是开发者的梦想因为您能够
不刷新页面更新网页在页面加载后从服务器请求数据在页面加载后从服务器接收数据在后台向服务器发送数据 AjaxAsynchronous JavaScript and XML是一种用于创建快速、动态网页的技术。它通过在后台与服务器进行数据交换使网页能够在无需重新加载整个页面的情况下更新部分内容。
传统的网页交互方式是用户与服务器进行完整的页面请求和响应即用户执行某个操作服务器接收请求并返回完整的新页面。这种方式存在效率低下和用户体验差的问题。 而Ajax通过在后台使用JavaScript和XML或其他数据格式, 使网页能够 在不刷新整个页面的情况下与服务器进行数据交互和部分内容更新。 通过异步通信Ajax 可以在用户完成某个操作之后将用户请求发送到服务器并在接收到服务器的响应后动态地更新页面的相应部分而不需要重新加载整个页面。
2. Ajax特点 Ajax技术的特点包括 异步通信通过使用异步通信用户可以继续与页面交互而无需等待服务器响应。数据交换Ajax可以与服务器进行数据交换可以在不刷新整个页面的情况下更新页面的局部内容。DOM操作Ajax可以使用JavaScript操作DOM实现动态页面的创建和更新。增强用户体验由于Ajax可以快速地更新页面的一部分因此可以提供更快速、更流畅的用户体验。 尽管Ajax中的“X”代表XML但实际上现代的Ajax应用程序通常使用JSON、HTML或纯文本格式来传输数据而不是XML。
Ajax已经成为现代Web应用程序开发的重要技术之一被广泛应用于各种Web应用包括社交媒体、在线购物以及各种在线工具和应用程序。
3. Ajax 经典应用场景 1. 搜索引擎根据用户输入关键字自动提示检索关键字 2. 动态加载数据按需取得数据【树形菜单、联动菜单 ... 】 3. 改善用户体验。【输入内容前提示、带进度条文件上传 ... 】 4. 电子商务应用。 【购物车、邮件订阅 ... 】 5. 访问第三方服务。【访问搜索服务、 rss 阅读器】 6. 页面局部刷新 , https://piaofang.maoyan.com/dashboard 4. Ajax基本原理 5. 原生Ajax
function checkUser() {var xhr new XMLHttpRequest();var uname document.getElementById(uname).value;xhr.open(GET, /ajaxStu/check?username uname, true);xhr.onreadystatechange function () {// console.log(xhr , xhr);if (xhr.readyState 4 xhr.status 200) {if(xhr.responseText.trim() ) {document.getElementById(myres).value 用户名可用;} else {document.getElementById(myres).value 用户名不可用;}}document.getElementById(div1).innerText xhr.responseText;}xhr.send();}
6. JQuery 的 Ajax 请求 jQuery(function () {$(#check).click(function () {window.alert(hello)$.ajax({url:/ajaxStu/check2,type:POST,data:{username:$(#uname).val(),date:new Date()},success:function (date, status, xhr) {console.log(成功~);console.log(date);console.log(status);console.log(xhr);if(king date.username) {$(#myres).val(用户不可用);} else {$(#myres).val(用户可用);}$(#div1).html(JSON.stringify(date));},error:function () {console.log(失败~)},dataType:json})$.get(/ajaxStu/check2,{username:$(#uname).val(),date:new Date()},function (date, status, xhr) {console.log(get()成功~);console.log(date);console.log(status);console.log(xhr);if(king date.username) {$(#myres).val(用户不可用);} else {$(#myres).val(用户可用);}$(#div1).html(JSON.stringify(date));},json)$.post(/ajaxStu/check2,{username:$(#uname).val(),date:new Date()},function (date, status, xhr) {console.log(post()成功~);console.log(date);console.log(status);console.log(xhr);if(king date.username) {$(#myres).val(用户不可用);} else {$(#myres).val(用户可用);}$(#div1).html(JSON.stringify(date));},json)$.getJSON(/ajaxStu/check2,{username:$(#uname).val(),date:new Date()},function (date, status, xhr) {console.log(getJSON()成功~);console.log(date);console.log(status);console.log(xhr);if(king date.username) {$(#myres).val(用户不可用);} else {$(#myres).val(用户可用);}$(#div1).html(JSON.stringify(date));})})}) 总结
JsonJavaScript Object Notation是一种轻量级的数据交换格式采用键值对的形式来表示数据。它广泛应用于Web开发中特别适合于前后端数据传输和存储。
AjaxAsynchronous JavaScript and XML是一种在Web应用中实现异步通信的技术。通过Ajax前端可以发送异步请求到服务器获取数据并进行页面更新而无需刷新整个页面。这项技术使得用户体验更加流畅同时减轻了服务器的负担。
Json和Ajax经常配合使用。通过Ajax发送请求服务器可以将数据以Json格式返回给前端前端再解析Json数据进行页面渲染或其他操作。Json的简洁性和易读性使得数据传输更加高效而Ajax的异步通信则能提升用户交互体验。
总的来说Json是一种数据格式用于表示数据而Ajax是一种实现异步通信的技术。它们的结合可以帮助开发人员构建高效、流畅的Web应用。
