首页 > 其他分享 >ajax与axios

ajax与axios

时间:2023-08-17 17:55:06浏览次数:29  
标签:function axios XMLHttpRequest res xhttp ajax

概念:ajax(Asynchronous  Javascript And Xml):异步的js和xml

ajax作用:

1、使用ajax和服务器进行通信,就可以使用html+ajax替换jsp页面

2、异步交互

原生ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <button id="myButton">点击我</button>  
<script>

        document.getElementById("myButton").addEventListener("click", function() {
             //1. 创建核心对象
            var xhttp;
            if (window.XMLHttpRequest) {
                xhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2. 发送请求
            xhttp.open("GET", "http://localhost:8080/web-6/ajaxServlet");
            xhttp.send();

            //3. 获取响应
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                       alert(this.responseText);
                }
            };
        });


 </script>

</body>
</html>

 

axios封装ajax

引入js  

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

 

 axios({
     method:"get",
     url:"http://localhost:8080/web-6/aa"
 }).then(function(res){ //响应回来的数据,赋值到res
     alert(res.data);
 })

 

标签:function,axios,XMLHttpRequest,res,xhttp,ajax
From: https://www.cnblogs.com/zhangsai/p/17638185.html

相关文章

  • axios封装
    importaxiosfrom'axios';consthttp_url="https://xxx.xxx.com"//get请求exportfunctiongetRequest(url,sendData){returnnewPromise((resolve,reject)=>{axios.get(http_url+url,{params:sendData}).then(res=&......
  • 前端html点击新增多项,ajax提交,后台接收
    <body><formid="form1"><divclass="procureWarp"><imgclass="headBg"src="/images/Cabinet/headUrl_01.png"alt=""><divclass="head"......
  • JQuery&Ajax基础知识
    JQuery&Ajax基础知识1、Jquery简介Query是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由JohnResig发布。jQuery设计的宗旨是“writeLess,DoMore”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一......
  • 【JavaScript42】axios拦截器
    在前端,我们能看到有些网站会对每次请求都添加加密信息.或者每次返回数据的时候,都有解密逻辑.那此时.你思考.不可能每次请求都要程序员去手动写加密逻辑.axios提供了拦截器.可以对每一个请求进行拦截.并修改请求的内容.拦截器还可以对响应进行拦截.并修改响应的数据.......
  • ASP.NET 使用Ajax
    本文将介绍在ASP.NET中如何方便使用Ajax,第一种当然是使用jQuery的ajax,功能强大而且操作简单方便,第二种是使用.NET封装好的ScriptManager。$.ajax向普通页面发送get请求这是最简单的一种方式了,先简单了解jQueryajax的语法,最常用的调用方式是这样:$.ajax({settings});有几个常用......
  • ajax
      AJAX:缺点(搜索引擎不友好,前进后退功能)IE   Firebug调试:            InstallingFirebugLite1.2    [W1] javasrcipt支持4种数据类型:对象(object) 数字(number) 字符串(string) 布尔值(boolean)JSVM    加载类   www.jsvm.org$impo......
  • 全局设置axios拦截器,请求增加username和token
    在main.js的newvue之前加入:axios.interceptors.request.use(config=>{//在发送请求前,获取新的tokenvarusername=window.localStorage.getItem('username');varauthorization=window.localStorage.getItem('token');......
  • ajax 跨域 如果在head里面加了参数需要在 nginx add_header 里面添加
    server{listen80;server_nameyourdomain.com;location/{#允许跨域请求add_header'Access-Control-Allow-Origin''*';add_header'Access-Control-Allow-Methods''GET,POST,OPTIONS'......
  • jQuery中的Ajax
    Ajax 是一种异步、无刷新(或者说局部页面刷新)技术。1.$.ajaxjQuery调用ajax方法格式:$.ajax({});参数:type:请求方式GET/POSTurl:请求地址urlasync:是否一步,默认是true表示异步data:发送到服务器的数据dataType:预期服务器返回的数据类型contentType:设置请求头succe......
  • Ajax传参,data与dataType
     在使用Ajax向后端传递数据时,你可以使用多种数据类型。在Ajax的dataType参数中,你可以指定以下几种常用的数据类型:"text":这是默认值,表示返回的数据将被视为纯文本字符串。"json":表示返回的数据将被视为JSON格式的数据。在前端代码中,你可以使用JSON.parse()将返回的数据转......