网站想做个链接怎么做的,大港建站公司,运城推广型网站开发,建个人网站一般多少钱1、AJAX#xff1a; AJAX#xff08;Asynchronous JavaScript and XML#xff09;是一种用于创建交互式、动态网页的技术。它允许网页在不重新加载整个页面的情况下与服务器进行异步通信#xff0c;从而改善用户体验。以下是关于AJAX的一些重要信息#xff1a; 异步通信 AJAXAsynchronous JavaScript and XML是一种用于创建交互式、动态网页的技术。它允许网页在不重新加载整个页面的情况下与服务器进行异步通信从而改善用户体验。以下是关于AJAX的一些重要信息 异步通信AJAX 的核心特性是异步通信意味着在向服务器发送请求时页面无需等待服务器的响应。这允许页面继续执行其他操作同时等待响应。一旦响应可用就会触发回调函数来处理数据。 JavaScriptAJAX 主要使用JavaScript来实现。通过JavaScript可以创建HTTP请求通常是GET或POST请求并在后台发送这些请求。然后JavaScript可以解析从服务器返回的响应数据并将其插入到网页中实现动态更新。 XML或JSON虽然最初的名字中包含XMLeXtensible Markup Language但实际上现在更常见的是使用JSONJavaScript Object Notation作为数据的传输格式。JSON更轻量易于处理并且与JavaScript天然兼容。当然仍然可以使用XML。 无需页面刷新AJAX的一个重要优势是它可以在不刷新整个网页的情况下更新部分页面内容。这可以提高用户体验因为页面可以动态地加载新数据而不需要重新加载整个页面。 用途AJAX广泛用于各种Web应用程序包括在线邮件客户端、社交媒体网站、购物车更新、实时通讯等。任何需要实时或部分页面更新的情况都可以受益于AJAX技术。 浏览器支持AJAX已经成为现代Web开发的标准之一并且得到了主流浏览器的广泛支持。开发人员可以使用原生JavaScript或AJAX库如jQuery、Axios等来简化AJAX请求的编写和处理。 总之AJAX是一种强大的技术使Web应用程序更加动态和交互提高了用户体验并为开发人员提供了更多的灵活性和控制权使他们能够实现各种复杂的Web功能。 同步的话比如你和对象打电话永远是一个人在讲 一个人在听不可能同时讲话也不可能同时倾听是吧一个在说话另一个什么都干只是在那倾听。 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 异步的话就是比如你和对象打电话你对象在讲话你在打游戏你没有停下来听忙着你自己的事情等她讲完然后去回应她 客户端不需要等待服务器端的响应。在服务器处理请求的过程中客户端可以进行其他的操作。
2、AJAX的实现方式 1、基于原生的方式
客户端
!DOCTYPE html
html langen
headmeta charsetUTF-8title基于js/title
/head
scriptfunction fun() {//法送异步请求//1.创建核心对象// 创建 XMLHttpRequest 对象const xhttp new XMLHttpRequest();// 定义回调函数xhttp.onload function () {// 您可以在这里使用数据}// 建立连接/** 参数:* 第一个: 请求方式* 如果是get方式,请求参数那在URL后面拼接,如果是post请求,请求参数在sent(String)* 第二个: 请求的url* 第三个: 同步(ture)或者异步(false)请求* */xhttp.open(GET, /web_tomcat/AjaxServletDemo1?username张三, true);//xhttp.open(GET, /web_tomcat/AjaxServletDemo1?username张三,false);//发送请求xhttp.send();//psot的话xhttp.send(String) String是请求的参数//接收并且处理来自服务器的响应结果/** 获取方式 xhttp.responseText 但是要在服务器相应以后才能或者,不然获取不到数据*///当xhttp对象的就绪状态发生改变的时候会触发事件onreadystatechange 然后执行函数xhttp.onreadystatechange function () {//判断readyState是不是4 0: 请求未初始化/*1: 服务器连接已建立2: 请求已接收3: 正在处理请求4: 请求已完成且响应已就绪*///判断status响应状态是不是200/*200: OK403: Forbidden404: Page not found*/if (this.readyState 4 this.status 200) {//都满足,获取结果let responseText this.responseText;alert(responseText)}};}/script
bodyinput typebutton value发送异步请求 onclickfun()
input typetext
/body
/html
服务器端
package com.songzhishu.web.servlet;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/*** BelongsProject: web_tomcat* BelongsPackage: com.songzhishu.web.servlet* Author: 斗痘侠* CreateTime: 2023-09-29 10:06* Description: 异步请求* Version: 1.0*/
WebServlet(/AjaxServletDemo1)
public class AjaxServletDemo1 extends HttpServlet {Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding(utf-8);resp.setContentType(text/html;charsetutf-8);//获取请求参数String username req.getParameter(username);//业务处理/** 如果是同步的话,那么这个个时候服务器在正在进行业务处理,那么客户端只能得等待,不能做其他的操作,但是如果是异步请求的话,此时客户端可以* 进行其他的操作*///让当前线程睡6秒try {Thread.sleep(6000);} catch (InterruptedException e) {e.printStackTrace();}//打印System.out.println(username);//响硬resp.getWriter().write(你好username);}
} 这这种方式比骄傲繁琐细节参考w3school 在线教程
2、基于jQuery的方式 !DOCTYPE html
html langen
headmeta charsetUTF-8title基于js/title
/head
script src../js/jquery-3.3.1.min.js/script
scriptfunction fun() {//使用$.ajax的方式发送异步请求/*$.ajax({/!** url 请求的url* type 请求的方式* data 携带的参数* username张三age23 ----方式一* {* username:zhngsan,* age:23* }; ----方式二 以json的方式发送请求数据* success 回调函数 响应成功后会执行这个这个函数* error 回调函数 响应错误会执行这个函数** datatype 响应数据的格式 Xml html txt Josn* *!/url:/web_tomcat/AjaxServletDemo1,type:POST,data:{username:张三,age:23},success:function (data) {alert(data)},error:function () {alert(出错啦)}});*///使用$.get() 发送请求/** $.get(URL,callback);** *//*$.get(/web_tomcat/AjaxServletDemo1, {username: 张三,age: 23}, function (data) {alert(data);},text);*///使用$.psot()$.post(/web_tomcat/AjaxServletDemo1, {username: 张三,age: 23}, function (data) {alert(data);},text);}/script
bodyinput typebutton value发送异步请求 onclickfun()
input typetext
/body
/html
3、JSON JSON 是一种轻量级的数据交换格式通常用于在不同应用程序之间传输数据。以下是关于 JSON 的重要信息 数据格式JSON 是一种文本格式它使用易于理解的键值对key-value pairs来表示数据。每个键key都是一个字符串每个值value可以是字符串、数字、布尔值、数组、对象、null等数据类型。 易于阅读和编写JSON 的语法非常简单和直观使人们可以轻松地阅读和编写。这也有助于人们快速理解数据结构。 数据结构JSON 支持复杂的数据结构包括嵌套对象和数组。这使得它非常适合表示各种类型的数据从简单的配置文件到复杂的数据集。 跨平台和语言JSON 不限于特定的编程语言或平台几乎所有现代编程语言都有 JSON 的解析和生成库。这意味着可以在不同的应用程序之间轻松交换数据而无需考虑它们使用的编程语言。 示例以下是一个 JSON 示例表示一个简单的人员信息 {name: John Doe,age: 30,isStudent: false,hobbies: [reading, swimming],address: {street: 123 Main St,city: Anytown}
}用途JSON 在Web开发中广泛应用特别是在Web API中用于数据传输。它还用于配置文件、日志文件、NoSQL数据库等各种情况。 与XML的比较JSON与XML是两种常见的数据交换格式。与XML相比JSON更轻量、更易于处理并且更适合在JavaScript中使用因为它直接映射到JavaScript对象。 总之JSON是一种通用的数据格式它在现代应用程序中起着重要作用简化了数据交换和处理的过程。它的简洁性和易读性使其成为许多应用程序和Web服务的首选数据表示方式。 1、基本规则 1 数据在名称/值对中json数据是由键值对构成的 2 键用引号(单双都行)引起来也可以不使用引号 3 值得取值类型 1. 数字 整数或浮点数 2. 字符串 在双引号中 3. 逻辑值 true 或 false 4. 数组在方括号中 {persons:[{},{}]} 5. 对象在花括号中 {address:{province陕西....}} 6. null 4 数据由逗号分隔 多个键值对由逗号分隔 5花括号保存对象 使用{}定义json 格式 6方括号保存数组 []
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJSON/title
/head
script//定义基本格式var person {name: 张三, age: 23, gender: true}//alert(person);//获取值//alert(person.name);//alert(person[age]);//嵌套方式 []----{}var persons [{name: 张三, age: 23, gender: true},{name: 李四, age: 24, gender: true},{name: 王五, age: 25, gender: false}];//alert(persons);//alert(persons[1].name)//嵌套方式 {}----[]var personss {person: [{name: 张三, age: 23, gender: true},{name: 李四, age: 24, gender: true},{name: 王五, age: 25, gender: false}]}//alert(personss)//获取值//alert(personss.person[2].name)//因为定义的方式不同所以获取值的方式也不太一样//遍历//获取person对象的所有的数据for (let personKey in person) {alert(personKey person[personKey])//键值}alert(结束)//获取persons的所有值for (let i 0; i persons.length; i) {let person persons[i];for (let personKey in person) {alert(personKey * person[personKey]);}}//获取personss的所有值let personk personss.person; //数组for (let i 0; i personk.length; i){let personkElement personk[i];for (let personkElementKey in personkElement) {alert(personkElementKey -personkElement[personkElementKey])}}/script
body/body
/html
2、JSON和Java对象的相互转换 1、JSON解析器 JSON解析器是一种程序或库用于将JSONJavaScript Object Notation格式的数据解析为程序可以使用的数据结构。这个过程通常涉及将JSON文本转换为相应的数据对象以便在程序中进行操作、处理和使用。在许多编程语言中都有内置的JSON解析器或者第三方库使得开发人员能够轻松地将JSON数据转换为其所在语言支持的数据类型 java中常见的解析器有JsonlibGsonfastjsonjackson其中Jackson是一个流行的JSON处理库它提供了高性能的JSON解析和生成功能。它支持JSON与Java对象之间的双向映射。也是spring boot 框架的内置解析器。 2. Java对象转换JSON 1. 使用步骤 1. 导入jackson的相关jar包 2. 创建Jackson核心对象 ObjectMapper 3. 调用ObjectMapper的相关方法进行转换
package com.songzhishu.web.test;import com.fasterxml.jackson.databind.ObjectMapper;
import com.songzhishu.web.domain.Person;
import org.junit.Test;import java.io.FileWriter;
import java.io.IOException;/*** BelongsProject: web_tomcat* BelongsPackage: com.songzhishu.web.test* Author: 斗痘侠* CreateTime: 2023-09-29 14:53* Description: 测试转换* Version: 1.0*/
public class JacksonTest1 {//java对象转换成JsonTestpublic void test1() throws IOException {//创建对象Person person new Person(张三,23,女);//创建Jsackson的核心对象 objectMapperObjectMapper mapper new ObjectMapper();//转换/* 转换的方法:* writerValue(参数1,obj)* 这个方法有很多的重载的方式 通过传递不同的参数* file 将obj对象转换成为Json字符串并且将Json字符串数据填充到字符流的文件中* writer 将obj对象转换成为Json字符串并且将Json字符串数据填充到字符输出流中* outputstream 将obj对象转换成Json字符串,并且将Json数据填充到字节输出流中* writerValueString(obj) 将对象转换成Json字符串* */String s mapper.writeValueAsString(person);//System.out.println(s);//将数据写入到d盘//mapper.writeValue(new File(d://a.txt),person);//将数据关联到writer中mapper.writeValue(new FileWriter(d://b.txt),person);}
}
2. 注解 1. JsonIgnore排除属性。 2. JsonFormat属性值得格式化 * JsonFormat(pattern yyyy-MM-dd) 3. 复杂java对象转换 1. List数组 2. Map对象格式一致
package com.songzhishu.web.test;import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.songzhishu.web.domain.Person;
import org.junit.Test;import java.io.FileWriter;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Date;
import java.util.HashMap;/*** BelongsProject: web_tomcat* BelongsPackage: com.songzhishu.web.test* Author: 斗痘侠* CreateTime: 2023-09-29 14:53* Description: 测试转换* Version: 1.0*/
public class JacksonTest1 {//java对象转换成JsonTestpublic void test1() throws IOException {//创建对象Person person new Person(张三, 23, 女, new Date());//创建Jsackson的核心对象 objectMapperObjectMapper mapper new ObjectMapper();//转换/* 转换的方法:* writerValue(参数1,obj)* 这个方法有很多的重载的方式 通过传递不同的参数* file 将obj对象转换成为Json字符串并且将Json字符串数据填充到字符流的文件中* writer 将obj对象转换成为Json字符串并且将Json字符串数据填充到字符输出流中* outputstream 将obj对象转换成Json字符串,并且将Json数据填充到字节输出流中* writerValueString(obj) 将对象转换成Json字符串* */String s mapper.writeValueAsString(person);//System.out.println(s);//将数据写入到d盘//mapper.writeValue(new File(d://a.txt),person);//将数据关联到writer中mapper.writeValue(new FileWriter(d://b.txt), person);}Testpublic void test2() throws JsonProcessingException {Person person new Person(张三, 23, 女, new Date());//转换ObjectMapper mapper new ObjectMapper();String s mapper.writeValueAsString(person);System.out.println(s);/*直接输出的样式{name:张三,age:23,gender:女,brithday:1695973073829} 日期有点太难看了 咋办要么我就不转换日期 要么我改变输出的格式第一种在生日的属性上 加上一个注解 JsonIgnore //忽略该字端输出 {name:张三,age:23,gender:女}但是这种注解的方式不太友好就是不能因为不好看就不要这数据吧第二种 格式转换 JsonFormat(pattern yyyy-MM-dd){name:张三,age:23,gender:女,brithday:2023-09-29}*/}//复杂格式的转换Testpublic void test3() throws JsonProcessingException {Person person1 new Person(张三, 23, 女, new Date());Person person2 new Person(李四, 24, 男, new Date());Person person3 new Person(王五, 25, 男, new Date());//集合ArrayListPerson list new ArrayList();Collections.addAll(list,person1,person2,person3);//创建对象ObjectMapper mapper new ObjectMapper();String s mapper.writeValueAsString(list);System.out.println(s);}//map集合Testpublic void test4() throws JsonProcessingException {//创建mapHashMapString, Object hashMap new HashMap();hashMap.put(name,李四);hashMap.put(age,24);hashMap.put(gender,女);//创建对象ObjectMapper mapper new ObjectMapper();String s mapper.writeValueAsString(hashMap);System.out.println(s);}}
3、 JSON转为Java对象 1. 导入jackson的相关jar包 2. 创建Jackson核心对象 ObjectMapper 3. 调用ObjectMapper的相关方法进行转换 1. readValue(json字符串数据,Class)
//json字符串转换成java对象Testpublic void test5() throws IOException {//初始化json字符串String Json{\gender\:\女\,\name\:\李四\,\age\:24};//创建对象ObjectMapper mapper new ObjectMapper();Person person mapper.readValue(Json, Person.class);System.out.println(person);}
}
