AJAX-javaweb学习笔记（十一）

rosen6664

已于 2023-09-17 13:33:43 修改

阅读量51

点赞数

分类专栏： javaweb学习文章标签： java web

于 2023-07-19 17:12:24 首次发布

本文链接：https://blog.csdn.net/qq_72719894/article/details/131811352

版权

javaweb学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章介绍了AJAX的基本概念和作用，包括与服务器的数据交换和异步交互。接着，详细讲解了如何使用XMLHttpRequest创建核心对象、发送请求及获取响应。此外，提到了Axios这一异步框架的快速使用方法，包括GET和POST请求。最后，讨论了JSON的基础语法和在Java对象转换中的应用。

摘要由CSDN通过智能技术生成

1.编写AjaxServlet，并用response输出字符串

@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.getWriter().write("hello AJAX");

2.使用axios发送请求，并获取响应结果

1.首先需要将maven依赖导入此jar包

2.然后创建一个类，接受数据。

3.代码实现

一、AJAX

（一）概念

AJAX（Asynchronous JavaScript And XML）异步的JavaScript和XML

（二）作用

1.与服务器进行数据交换

通过AJAX可以与服务器发送请求，并获取服务器响应的数据

以前把数据穿到JSP发送数据，显示出来。以前无法获取服务端的数据不得不用，而现在可以用HTML+AJAX来替换JSP页面了

好处：

前后端分离

2.异步交互

可以再补充下加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如搜索联想，用户名是否可用校验，等等...

二、同步和异步

（一）同步

（二）异步

三、AJAX快速入门

1.编写AjaxServlet，并用response输出字符串

直接在doget方法里写就行

@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().write("hello AJAX");

}

2.创建核心对象

接下来写在<script>内部

var xmlhttp;
if(window.XMLHttpRequest){
  xmlhttp=new XMLHttpRequest();
}else {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

创建XML HttpRequest对象：用于和服务器交换数据

3.向服务器发送请求

xmlhttp.open("GET", "http://localhost:80/javaweb_test_war/test11", true);
xmlhttp.send();

路径要写全路径

4.获取服务器响应数据

xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    alert(this.responseText);

  }
}

四、Axios异步框架

（一）快速使用

Axios对原生的AJAX进行封装，简化书写

官方网站：Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js (axios-http.cn)

1.引入axios的js文件

下载后导入

<script src="js/axios-0.18.0.js"></script>

2.使用axios发送请求，并获取响应结果

1.get请求

<script>

  axios({
    method:"get",
    url:"http://localhost:80/javaweb_test_war/test22?username=zhangsan"
  }).then(function (resp){
    alert(resp.data)
  })
</script>

2.post请求

<script>

  axios({
    method:"post",
    url:"http://localhost:80/javaweb_test_war/test22",
    data:"username=zhangsan"
  }).then(function (resp){
    alert(resp.data)
  })
</script>