asp.net制作的网站开发,研发一款app要多少钱,河南建筑工程信息网官网,北京做手机网站目录
一、AJAX
1.概述
2.主要作用
3.快速入门
4.AJAX的优缺点
#xff08;1#xff09;优点
#xff08;2#xff09;缺点
5.同源策略
二、Axios
1.概述
2.快速入门
3.请求方式别名
三、JSON
1.概述
2.主要作用
3.基础语法
4.JSON数据转换
#xff08;1…目录
一、AJAX
1.概述
2.主要作用
3.快速入门
4.AJAX的优缺点
1优点
2缺点
5.同源策略
二、Axios
1.概述
2.快速入门
3.请求方式别名
三、JSON
1.概述
2.主要作用
3.基础语法
4.JSON数据转换
1JSON字符串转为JS对象
2JS对象转为JSON字符串
3JSON字符串转为Java对象
4Java对象转为JSON字符串
四、使用AxiosJson简化以前代码 一、AJAX
1.概述
AJAX(Asynchronous JavaScript And XML)异步的 JavaScript 和 XML
2.主要作用 与服务器进行数据交换:通过AJAX可以给服务器发送请求并获取服务器响应的数据 异步交互:可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如:搜索、用 户名是否可用校验等等...
不需要用JSP了~ 同步与异步
最直接的 同步在没有收到/得到结果之前不能干任何事 异步在没有收到/得到结果之前还能干其他事 3.快速入门 编写AjaxServlet并使用response输出字符串 创建 XMLHttpRequest 对象:用于和服务器交换数据
servlet
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);}
}
html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTryrun 1/title
/head
body
div idviewp点击下面的按钮将 Ajax 请求回来的数据更新在该文本内/p
/div
button typebutton idbtn发起 Ajax 请求/button
scriptdocument.getElementById(btn).onclick ajaxRequest;
function ajaxRequest () {var xhr new XMLHttpRequest();//true是否为异步false为同步xhr.open(GET, http://localhost:8080/practice02_war/ajaxServlet, true);xhr.send();
xhr.onreadystatechange function(){if (xhr.readyState 4 xhr.status 200) {document.getElementById(view).innerHTML xhr.responseText;}}}
/script
/body
之后启动服务器html直接使用idea快速打开即可 4.AJAX的优缺点
1优点 最大的优点是页面无刷新更新用户的体验非常好 使用异步方式与服务器通信具有更迅速的响应能力 可以将一些服务器工作转移到客户端利用客户端资源来处理减轻服务器和带宽的压力节约空间和带宽租用成本 技术标准化并被浏览器广泛支持不需要下载插件或者小程序 Ajax 可使因特网应用程序更小、更快、更友好。 2缺点 Ajax 不支持浏览器 back 返回按钮 有安全问题Ajax 暴露了与服务器交互的细节 对搜索引擎不友好 破坏了程序的异常机制 不容易调试。 5.同源策略
同源策略是一种安全协议是客户端脚本尤其是 JavaScript中重要的安全度量标准指一段脚本只能读取同一来源的窗口和文档的属性。
URL 地址中的 协议、域名、端口 三者 都 相同。 url组成scheme: //host:post/path?query#fragment scheme通信协议一般为 http 、https host域名 post端口号此项为可选项http 协议默认的端口号为 80https 协议默认的端口号为 443 path路径由 / 隔开的字符串 query查询参数此项为可选项 fragment信息片段用于指定网络资源中的某片断此项为可选项 使用 Ajax 请求后端数据时只能跟同源的后端接口进行数据交互即后端接口的 URL 与发起 Ajax 请求的页面 URL 之间需要满足同源策略。
不满足 同源策略 的请求浏览器通常都会报错 使用同源策略的目的 为了数据的安全性。若没有同源策略的限制那么黑客就可以在他的页面上任意请求你的后端数据造成数据库内容被盗取、隐私数据泄漏。 实现跨域请求的方式
虽然 Ajax 请求需要满足同源策略然而在一些场景中你真的需要 Ajax 访问其它 源 的数据称为跨域访问这时需要后端服务器进行相应的设置。
如果服务器端支持 CORS可以通过设置Access-Control-Allow-Origin来实现跨域。如果浏览器检测到相应的设置就会允许 Ajax 进行跨域访问。
Java中实现跨域的五种方式_java跨域-CSDN博客 二、Axios
1.概述
Axios 对原生的AJAX进行封装简化书写
Axios中文文档 | Axios中文网 (axios-http.cn) 2.快速入门 引入axios 使用axios发送请求并获取响应
script srcaxios.min.js/script
scriptaxios({method:get,url:http://localhost:8080/practice02_war/axiosServlet?usernamezhangsan}).then(function (response) {alert(response.data)})
axios({method: post,url:http://localhost:8080/practice02_war/axiosServlet,data:usernamezhangsan}).then(function (response) {console.log(response.data)})
/script
servlet
WebServlet(/axiosServlet)
public class AxiosServlet extends HttpServlet {Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {final String username request.getParameter(username);response.getWriter().write(username:username);
}
Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println(post);this.doGet(request, response);}
} 3.请求方式别名
为了方便起见已经为所有支持的请求方法提供了别名。
Axios API | Axios中文文档 | Axios中文网 (axios-http.cn)
axios.get(http://localhost:8080/practice02_war/axiosServlet?usernamezhangsan).then(function (response) {alert(response.data)
})
axios.post(http://localhost:8080/practice02_war/axiosServlet,usernamezhangsan).then(function (response) {console.log(response.data)
}) 三、JSON
1.概述
JavaScript Object Notation。JavaScript 对象表示法
2.主要作用
由于其语法简单层次结构鲜明现多用于作为数据载体在网络中进行数据传输 3.基础语法
定义多个属性值用隔开
var 变量名 {键名:值,key:value}
value值类型可为 数字 字符串 逻辑值 数组 对象 null几乎不用
直接输出就是JSON字符串 4.JSON数据转换
1JSON字符串转为JS对象
var jsObjectJsoN.parse(jsonstr);
2JS对象转为JSON字符串
var jsonStr JSON.stringify(jsObject)
3JSON字符串转为Java对象
使用一个api
fastjson
是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库是目前Java语言中最快的JSON库可以实现Java对象和JSON字符串的相互转换。 导入坐标
!-- https://mvnrepository.com/artifact/com.alibaba.fastjson2/fastjson2 --dependencygroupIdcom.alibaba/groupIdartifactIdfastjson/artifactIdversion2.0.47/version/dependency
转换
User user JSON.parseObject(json字符串, User.class);
4Java对象转为JSON字符串
String jsonStr JSON.toJSONString(new User()); 注意
在Axios中1和2的转换会自动完成不需要手写~ 四、使用AxiosJson简化以前代码
这里以展示所有商品为例
这里只要能获取到数据即可页面展示就先不写了
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodybutton idselectAll 点我查看所有商品/buttonhrtable idtable border1px solid black
/table
/body
script srcjs/jquery-3.7.1.min.js/script
script srcjs/axios.min.js/script
script$(#selectAll).click(function () {console.log(点击触发了)axios({method:get,url:http://localhost:8080/practice02_war/selectAll}).then(function (response) {let products response.data;for (let i 0; i products.length; i) {let product products[i];console.log(product)}})})
/script
/html
selectAll
WebServlet(/selectAll)
public class SelectAll extends HttpServlet {private final ProductService productService new ProductService();Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {final ListProduct products productService.selectAll();//将集合转为JSON数据序列化final String s JSON.toJSONString(products);response.setContentType(text/json;charsetutf-8);//跨域response.addHeader(Access-Allow-Control-Origin,*);response.getWriter().write(s);}
Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
} 预览 关于页面展示可以自己写但没必要后面有更好的方式展示数据
