ajax与axios

ajax

一、什么是ajax请求

---

AJAX是异步JavaScript和XML的缩写，它不是一种编程语言，而是一种使用现有标准的新方法，可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容；可以使用AJAX请求从服务器获取数据，或者向服务器发送数据，AJAX请求可以使用GET或POST方法，可以是同步或异步的

理解异步：浏览器发送请求给服务器，在服务器处理请求的过程中，浏览器某个部分还可以发起请求
或其他操作

- 通过浏览器调用js异步发起请求，浏览器地址不会发生变化，实现局部更新而不舍弃原来页面的内容

二、ajax的使用

---

1. 创建对象

   var xmlhttp;
   if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
       xmlhttp=new XMLHttpRequest();
   }
   else
   {// code for IE6, IE5
       xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }

2. 发起请求

   • method：请求的类型；GET 或 POST
   • url：文件在服务器上的位置
   • async：true（异步）或 false（同步）

   xmlhttp.open("GET","http://localhost:8080/maven_ajax/ajax",true);
   // 发起ajax请求
   xmlhttp.send();

3. 获取响应

   服务器给ajax请求响应以后监听的事件

   • OK 4或200
   • responseText 获得字符串形式的响应数据
   • responseXML 获得 XML 形式的响应数据

   xmlhttp.onreadystatechange=function()
   {
       if (xmlhttp.readyState==4 && xmlhttp.status==200)
       {
           document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
       }
   }

axios

一、axios 是什么?

---

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)；在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests

二、axios的使用

---

1. 导入axios

   使用 npm:

   $ npm install axios

   使用 jsDelivr CDN:

   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. GET请求

   axios({
       //指定请求方式
       method: "get",
       //请求地址及参数
       url: "http://localhost:8080/maven_ajax/ajax?username=" + uservalue,
       //响应后的处理
   }).then(function (response) {
       //处理结果
       }
   });

3. POST请求

   axios({
       //指定请求方式
       method: "post",
       //请求地址
       url: "http://localhost:8080/maven_ajax/ajax",
       //数据
       data: "username=" + uservalue,
       //响应后的处理
   }).then(function (response) {
       //处理结果
   });

借助jQuery实现请求

一、导入jQuery

---

使用 npm:

npm install jquery

使用 jsDelivr CDN:

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>

二、使用

ajax：

1. get

   $.ajax({
       type: "get",
       url: "http://localhost:8080/maven_ajax/ajax",
       success: function (response) {
           alert(response);
       }
   });

2. post

   $.ajax({
       type: "post",
       url: "http://localhost:8080/maven_ajax/ajax",
       data: "username=admin",
       success: function (response) {
           alert(response);
       }
   });

3. 简写

   //get请求
   $.get("url", "data", function (response) {
   }, json);
   //post请求
   $.post("url", "data", function (response) {
   }, json);

axios：

1. get

   axios.get("http://localhost:8080/maven_ajax/ajax").then(function (response) {
       response.data;
   });

2. post

   axios.post("http://localhost:8080/maven_ajax/ajax").then(function (response) {
       response.data;
   });