ajax与axios
ajax
一、什么是ajax请求
AJAX是异步JavaScript和XML的缩写,它不是一种编程语言,而是一种使用现有标准的新方法,可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容;可以使用AJAX请求从服务器获取数据,或者向服务器发送数据,AJAX请求可以使用GET或POST方法,可以是同步或异步的
理解异步:浏览器发送请求给服务器,在服务器处理请求的过程中,浏览器某个部分还可以发起请求
或其他操作
- 通过浏览器调用js异步发起请求,浏览器地址不会发生变化,实现局部更新而不舍弃原来页面的内容
二、ajax的使用
-
创建对象
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"); }
-
发起请求
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)
xmlhttp.open("GET","http://localhost:8080/maven_ajax/ajax",true); // 发起ajax请求 xmlhttp.send();
-
获取响应
服务器给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的使用
-
导入axios
使用 npm:
$ npm install axios
使用 jsDelivr CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-
GET请求
axios({ //指定请求方式 method: "get", //请求地址及参数 url: "http://localhost:8080/maven_ajax/ajax?username=" + uservalue, //响应后的处理 }).then(function (response) { //处理结果 } });
-
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:
-
get
$.ajax({ type: "get", url: "http://localhost:8080/maven_ajax/ajax", success: function (response) { alert(response); } });
-
post
$.ajax({ type: "post", url: "http://localhost:8080/maven_ajax/ajax", data: "username=admin", success: function (response) { alert(response); } });
-
简写
//get请求 $.get("url", "data", function (response) { }, json); //post请求 $.post("url", "data", function (response) { }, json);
axios:
-
get
axios.get("http://localhost:8080/maven_ajax/ajax").then(function (response) { response.data; });
-
post
axios.post("http://localhost:8080/maven_ajax/ajax").then(function (response) { response.data; });