优化网站平台,百度图片搜索引擎,网站建设应该注意哪些原则,用ul做的网站为何浮动不上去文章目录 AJAX学习前言1、AJAX概述2、AJAX快速入门3、AJAX的相关API4、Axios的快速入门 结语 AJAX学习
前言 本文主要对AJAX进行一个粗略的学习#xff0c;大致了解了AJAX是个什么东西#xff0c;以及掌握它的基本用法#xff0c;实现网页的局部刷星功能#xff0c;以后再… 文章目录 AJAX学习前言1、AJAX概述2、AJAX快速入门3、AJAX的相关API4、Axios的快速入门 结语 AJAX学习
前言 本文主要对AJAX进行一个粗略的学习大致了解了AJAX是个什么东西以及掌握它的基本用法实现网页的局部刷星功能以后再进行深入学习 1、AJAX概述 什么是Ajax AJAXAsynchronous JavaScript and XML是一种能够让网页和Web服务器进行异步交互的技术。 中文官网地址https://www.axios-http.cn/ 英文官网地址https://www.npmjs.com/package/axios AJAX的作用是什么 AJAX的主要作用是让网页能与服务端进行数据异步交互我们能够使用HTMLAJAX能够代替JSP实现网页上数据的动态展示。 什么是异步交互 异步交互是指能够让客户端发送一个请求后不需要等待服务端的结果的返回随时能够再次发送下一个请求。网页能够局部刷新就是利用了异步交互技术。而同步交互需要等待服务端响应数据后才能发送下一个请求所以使用同步交互的网页需要手动刷新。 AJAX的优点 提高网页的动态性。AJAX技术能让网页实现局部刷新能够极大提高网页的动态性提高用户体验。Ajax技术是一种异步交互技术用户浏览器不必等待请求结果就能再次发送请求大大提高用户体验同时能够为用户提供搜索提示验证提示AJAX可使网页小程序更小、更快更友好 学习站点AJAX|W3Cschool
2、AJAX快速入门 任务使用AJAX让我们访问网页时直接获取Servlet的响应数据 #mermaid-svg-A2UJbNkKgwA29lkY {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-A2UJbNkKgwA29lkY .error-icon{fill:#552222;}#mermaid-svg-A2UJbNkKgwA29lkY .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-A2UJbNkKgwA29lkY .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-A2UJbNkKgwA29lkY .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-A2UJbNkKgwA29lkY .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-A2UJbNkKgwA29lkY .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-A2UJbNkKgwA29lkY .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-A2UJbNkKgwA29lkY .marker{fill:#333333;stroke:#333333;}#mermaid-svg-A2UJbNkKgwA29lkY .marker.cross{stroke:#333333;}#mermaid-svg-A2UJbNkKgwA29lkY svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-A2UJbNkKgwA29lkY .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-A2UJbNkKgwA29lkY .cluster-label text{fill:#333;}#mermaid-svg-A2UJbNkKgwA29lkY .cluster-label span{color:#333;}#mermaid-svg-A2UJbNkKgwA29lkY .label text,#mermaid-svg-A2UJbNkKgwA29lkY span{fill:#333;color:#333;}#mermaid-svg-A2UJbNkKgwA29lkY .node rect,#mermaid-svg-A2UJbNkKgwA29lkY .node circle,#mermaid-svg-A2UJbNkKgwA29lkY .node ellipse,#mermaid-svg-A2UJbNkKgwA29lkY .node polygon,#mermaid-svg-A2UJbNkKgwA29lkY .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-A2UJbNkKgwA29lkY .node .label{text-align:center;}#mermaid-svg-A2UJbNkKgwA29lkY .node.clickable{cursor:pointer;}#mermaid-svg-A2UJbNkKgwA29lkY .arrowheadPath{fill:#333333;}#mermaid-svg-A2UJbNkKgwA29lkY .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-A2UJbNkKgwA29lkY .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-A2UJbNkKgwA29lkY .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-A2UJbNkKgwA29lkY .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-A2UJbNkKgwA29lkY .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-A2UJbNkKgwA29lkY .cluster text{fill:#333;}#mermaid-svg-A2UJbNkKgwA29lkY .cluster span{color:#333;}#mermaid-svg-A2UJbNkKgwA29lkY div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-A2UJbNkKgwA29lkY :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 编写Servlet 编写HTML 测试 Step1编写Servlet package com.hhxy.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;WebServlet(/AjaxServlet)
public class AjaxServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1、接收请求参数String username request.getParameter(username);//解决中文乱码byte[] bytes username.getBytes(StandardCharsets.ISO_8859_1);username new String(bytes,StandardCharsets.UTF_8);//2、发送响应数据response.getWriter().write(Hello AJAX!);}
}Step2编写HTML !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodyscript//1、创建XMLHttpRequest对象var xhttp new XMLHttpRequest();//2、发送请求//2.1 确定发送方式 和 发送地址xhttp.open(GET,http://localhost:8080/day11_filter/AjaxServlet?username张三)//2.2 发送xhttp.send();//3、获取响应xhttp.onreadystatechange function () {//3.1 判断服务端对于浏览器的请求是否响应完成并判断客户端是否成功接收到响应数据if(this.readyState 4 this.status 200){alert(this.responseText);}}
/script
/body
/htmlStep3测试通过localhost访问html才行
3、AJAX的相关API AJAX相关API介绍✈️传送门 4、Axios的快速入门 Axios是一个异步框架主要是对原生的AJAX进行了封装从而简化了AJAX的属性。Axios和AJAX的关系类似于JS和JQuery的关系 Axios的官网传送门 示例
Servlet
package com.hhxy.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;
import java.nio.charset.StandardCharsets;WebServlet(/AxiosServlet)
public class AxiosServlet extends HttpServlet {protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println(doPost方法别调用了);this.doGet(request, response);}protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println(doGet方法被调用了);//1、接收请求参数String username request.getParameter(username);//解决中文乱码byte[] bytes username.getBytes(StandardCharsets.ISO_8859_1);username new String(bytes,StandardCharsets.UTF_8);System.out.println(username);//2、发送响应数据response.getWriter().write(Hello Axios!);}
}
HTML
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!--1、引入axios库--script src../js/axios-0.18.0.js/script
/head
bodyscript
//2、获取来自Servlet的响应数据
/* 方式一axios({method:get,url:http://localhost:8080/day11_filter/AxiosServlet?username张三/!*这里的参数也可以使用data进行传递data:username张三*!/}).then(function (response) {alert(response.data);})*/
/*方式二对上面的代码再进行简化*//*axios.get(http://localhost:8080/day11_filter/AxiosServlet).then(function (response) {alert(response.data);})*/axios.post(http://localhost:8080/day11_filter/AxiosServlet,username张三).then((function (response) {alert(response.data);}))
/script
/body
/html注意 axios.get方法不能使用(http://localhost:8080/day11_filter/AxiosServlet,username张三)这种方式传参数传了Reuquest获取不到暂时不知道原因w(Д)w 现在知道了这种方式是利用请求体进行传参的而Get没有请求体→︶→ 传递多个参数如果使用data要使用JSON对象的形式如下所示 var params {username:username.value,password:password.value
}
axios({method:XXX,url:XXX,data:params
})结语 本章主要了解了什么是AJAX并且掌握了的AJAX和Axios基础使用。 如果觉得文章对你有帮助欢迎点赞评论✍ 下一篇一文快速了解【什么是JSON】【JSON在JavaWeb中的基本使用】
