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;
    });
    
posted @ 2023-02-23 17:06  顔をして  阅读(18)  评论(0)    收藏  举报