云南省建设工程网站,自助建站系统源码,公司做网络营销,此案例中采用了什么样的网络营销方式⭐作者介绍#xff1a;大二本科网络工程专业在读#xff0c;持续学习Java#xff0c;努力输出优质文章 ⭐作者主页#xff1a;逐梦苍穹 ⭐所属专栏#xff1a;Java Web 目录1、AJAX1.1、简介1.2、作用1.3、同步和异步1.4、代码实现1.4.1、服务端1.4.2、客户端1.4.2.1、完善… ⭐作者介绍大二本科网络工程专业在读持续学习Java努力输出优质文章 ⭐作者主页逐梦苍穹 ⭐所属专栏Java Web 目录1、AJAX1.1、简介1.2、作用1.3、同步和异步1.4、代码实现1.4.1、服务端1.4.2、客户端1.4.2.1、完善1.4.2.2、请求方式1.4.3、window.XMLHttpRequest2、axios2.1、简介2.2、代码案例2.2.1、后端部分2.2.2、前端部分2.2.3、axios-0.18.0.js下载2.3、请求方式别名1、AJAX
1.1、简介 AjaxAsynchronous JavaScript and XML是一种用于在不重新加载整个网页的情况下异步请求服务器数据并更新部分网页内容的Web开发技术。它通过JavaScript和XMLHttpRequest对象实现允许浏览器异步地向服务器发送请求并处理响应从而更新部分网页内容。 Ajax技术的优点在于它可以提高网站的用户体验和性能因为它能够异步地更新部分页面内容而无需重新加载整个页面从而减少了网络传输的数据量和服务器端的负载缩短了响应时间提高了网页的交互性和动态性。 简单来说AJAX就是异步的JavaScript和XML
1.2、作用
AJAX 作用有以下两方面
与服务器进行数据交换通过AJAX可以给服务器发送请求服务器将数据直接响应回给浏览器。异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如搜索联想、用户名是否可用校验等等…
现在就可以使用HTMLAJAX来替代之前的JSP。回顾之前提到过的流程图使用AJAX前后区别如下
1.3、同步和异步 同步和异步是指在进行任务时任务完成的时间与代码执行的时间之间的关系。 同步任务会阻塞代码执行直到任务完成并返回结果而异步任务不会阻塞代码执行而是在后台执行任务并在任务完成后通知代码执行。 具体来说同步任务是指在执行任务时代码会一直等待任务完成并返回结果然后才能继续执行下一条语句。同步任务的执行顺序是按照代码的顺序执行的不能中断或者跳过。 异步任务是指在执行任务时代码会立即继续执行下一条语句而不会等待任务完成。异步任务会在后台执行当任务完成后会通知代码执行回调函数通过回调函数获取任务结果。异步任务的执行顺序是不确定的它可以中断、跳过也可以在其他事件触发时再执行。 异步任务通常用于需要等待耗时操作的任务例如向服务器发送请求、文件读取、定时器等。同步任务则适用于不需要等待的简单任务例如变量赋值、计算等。
异步和同步的区别主要有以下几个方面
执行顺序同步任务按照代码的顺序执行不能中断或跳过而异步任务执行顺序不确定可以中断、跳过或在事件触发时再执行。阻塞同步任务会阻塞代码执行直到任务完成并返回结果而异步任务不会阻塞代码执行而是在后台执行任务。回调函数异步任务通常需要通过回调函数获取任务结果而同步任务直接返回结果。性能异步任务通常比同步任务更高效因为它可以在后台执行任务而不会阻塞代码执行从而提高了代码的性能。
下面通过两张图来更好的理解同步和异步的区别
综上所述异步和同步任务各有优缺点需要根据具体的需求选择合适的任务类型。
1.4、代码实现
关于代码具体怎么写可以在w3school中找到w3school_AJAX 主要步骤有两个编写服务端代码和客户端代码。
1.4.1、服务端
package com.xzl.web;import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;/*** author 逐梦苍穹* date 2023/4/3 8:35*/
WebServlet(/ajaxServlet)
public class AjaxServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.getWriter().write(hello AJAX);}Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}1.4.2、客户端
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyscript//1、创建核心对象var xhttp;if (window.XMLHttpRequest){xhttp new XMLHttpRequest();}else {//code for IE6,IE5xhttp new ActiveXObject(Microsoft.XMLHTTP);}//2、发送请求xhttp.open(GET,http://localhost:8080/Filter_war/ajaxServlet);xhttp.send();//3、获取响应xhttp.onreadystatechange function (){if (this.readyState 4 this.status 200){alert(this.responseText);}}/script
/body
/html客户端代码里面的ajax部分在文档里面都能找到直接复制即可。
下面是对上面代码中AJAX部分的解释说明
创建核心对象首先我们使用 XMLHttpRequest 对象来发起异步请求。我们创建一个变量 xhttp并通过if…else… 判断当前浏览器是否支持 XMLHttpRequest 对象。如果支持则创建一个 XMLHttpRequest对象并将其分配给变量 xhttp。否则我们使用 ActiveXObject 创建 Microsoft.XMLHTTP 对象这是Internet Explorer 早期版本中的 AJAX 实现并将其分配给变量 xhttp。发送请求使用xhttp.open() 方法来配置 AJAX 请求。这里使用的是 GET 方法并且将请求 URL 设置为http://localhost:8080/Filter_war/ajaxServlet这是一个用于处理 AJAX 请求的Servlet。open() 方法只是将请求发送到服务器并不会等待服务器响应因此我们还需要使用 send()方法将请求发送到服务器。获取响应当服务器响应返回时我们可以使用xhttp.onreadystatechange 事件处理程序来处理响应。在事件处理程序中我们首先检查 readyState属性是否等于 4表示响应已经完成。然后我们检查 status 属性是否等于200(HTTPS状态码表示OK)表示服务器已经成功地响应了我们的请求。 如果两个条件都满足我们就可以通过this.responseText 属性来获取服务器的响应内容并通过 alert() 方法将其显示出来。
总之这段代码演示了如何使用 AJAX 技术进行异步通信。我们首先创建一个 XMLHttpRequest 对象然后使用它来发送 HTTP 请求并使用事件处理程序来处理服务器的响应。这使得我们能够在不重新加载整个页面的情况下从服务器获取数据并动态更新页面内容。
1.4.2.1、完善
客户端代码有一个地方可以进一步修改 把改成全等于。 和 都是 JavaScript 中用于比较两个值的运算符它们之间的主要区别在于它们比较值的方式和类型的转换。 运算符在比较两个值之前会先进行类型转换如果两个值的数据类型不同则会尝试将它们转换为相同的类型然后再进行比较。例如5 “5” 的结果为 true因为字符串 “5” 会被转换为数字 5然后再和数字 5 进行比较。这种类型转换有时可能会导致意外的结果因此在比较时需要特别小心。 运算符则不会进行类型转换它只会比较两个值的类型和值是否完全相同。如果两个值的类型不同或者它们的值不完全相同则返回 false。例如5 “5” 的结果为 false因为它们的类型不同。 因此通常推荐使用 运算符进行比较因为它可以避免类型转换带来的问题。只有在特定的情况下比如需要进行强制类型转换或者需要忽略类型的差异时才使用 运算符。
1.4.2.2、请求方式
GET 还是 POST GET 比 POST 更简单更快可用于大多数情况下。 不过请在以下情况始终使用 POST ● 缓存文件不是选项更新服务器上的文件或数据库 ● 向服务器发送大量数据POST 无大小限制 ● 发送用户输入可包含未知字符POST 比 GET 更强大更安全
1.4.3、window.XMLHttpRequest window.XMLHttpRequest是一个全局对象它是 AJAX 技术的核心之一用于在不刷新页面的情况下向服务器发出 HTTP 请求并异步获取响应。它是一个 JavaScript 对象由浏览器提供的原生 API。 在现代浏览器中window.XMLHttpRequest 已经成为标准的 AJAX 实现可以通过它来发出异步请求而不必刷新整个页面。在早期版本的 Internet Explorer 中它是通过 ActiveXObject 来实现的。 使用 XMLHttpRequest可以向服务器发送 GET 或 POST 请求以及其他 HTTP 方法如 PUT、DELETE 等。通过设置相应的请求头还可以指定请求的数据类型和编码方式以及处理响应的方式等。在请求发送后可以通过 readyState、status 等属性和事件来跟踪请求的状态和获取服务器的响应。 总之window.XMLHttpRequest 是一个非常强大和常用的对象为 Web 应用程序提供了高效的异步数据交换机制。
2、axios
Axios官网是https://www.axios-http.cn
2.1、简介
Axios就是对原生的AJAX进行封装用于简化书写
Axios 是一个基于 Promise 的 HTTP 请求库可以用于浏览器和 Node.js 环境下进行 AJAX 操作。它提供了丰富的 API支持异步请求和响应拦截支持请求和响应的数据转换、错误处理等功能是一个功能强大、易于使用的 HTTP 客户端。
以下是 Axios 的一些主要特点
支持浏览器和 Node.js 环境下的请求。基于 Promise 实现支持异步操作和链式调用。支持请求和响应的拦截器可以在请求或响应被处理前对它们进行拦截和修改。支持请求和响应的数据转换可以自动将 JSON 数据转换为 JavaScript 对象或将 FormData 转换为 URL-encoded 字符串等。支持取消请求可以在请求还没有完成时取消它们。支持防止 CSRF 攻击可以自动为每个请求添加 CSRF token。支持错误处理可以通过 catch 方法来处理请求和响应的错误。 使用 Axios 可以极大地简化前端开发中的 AJAX 操作提高代码的可读性和可维护性因此 Axios 已经成为目前最流行的 HTTP 请求库之一。
2.2、代码案例
代码实现依旧是后端代码和后端代码两部分
2.2.1、后端部分
定义一个用于接收请求的AxiosServlet
package com.xzl.web; /*** author 逐梦苍穹* date 2023/4/3 10:51*/import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;WebServlet(/axiosServlet)
public class AxiosServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println(get...);String username request.getParameter(username);System.out.println(username);response.getWriter().write(hello Axios);}Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println(post...);this.doGet(request, response);}
}2.2.2、前端部分
首先引入JS文件
然后是发送请求(这里演示两种请求get和post) get
post 在js中{} 表示一个js对象而这个js对象中有三个属性
get和post的代码区别请求参数的区别。get是直接拼接在url上post是写在data部分。
整体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyscript srcjs/axios-0.18.0.js/scriptscriptaxios({method:get,url:http://localhost:8080/Filter_war/axiosServlet?usernamezhangsan}).then(function (response) {alert(response.data)})// axios({// method:post,// url:http://localhost:8080/Filter_war/axiosServlet,// data:usernamezhangsan// }).then(function (response) {// alert(response.data)// })/script
/body
/html测试 没有问题
2.2.3、axios-0.18.0.js下载
下载链接https://github.com/axios/axios 在dist文件夹里面可以下载axios.js。 想要axios-0.18.0.js可以在下面这个链接下载https://github.com/axios/axios/releases/tag/v0.18.0
2.3、请求方式别名
为了方便起见 Axios 已经为所有支持的请求方法提供了别名。如下 我们只需重点关注 get 请求和 post 请求
get和post的另一种书写方式 两种方式都可以第二种写起来更方便第一种写法的可读性更高。
