ajax与axios

概念：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

  学习文档（参考）： axios https://www.axios-http.cn/en/

  w3cshool  axios文档  ：https://www.w3cschool.cn/jquti/

 菜鸟教程  ajax(axios)   ：https://www.runoob.com/vue3/vue3-ajax-axios.html

 axios的参数配置：https://blog.csdn.net/weixin_41277748/article/details/111470121

 Axios 请求配置参数详解：https://blog.csdn.net/moxiaoya1314/article/details/73650751

 

引入js  

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

 

url:

1、简写  aa

2、在项目发布时，需要些绝对路径       http://localhost:8080/web-6/aa?username=zs&pw=1

get请求传参：url里面

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

post传参：通过data

         axios({
                 method:'post',
                 url:'http://localhost:8080/web-6/aa',
                 data:'dd'
             }).then(function(res){
                 alert(res);
                 console.log(res);
             })

 

axios请求方式别名

为了 简化 开发者的 使用过程 ，axios 为所有支持的 请求方法 提供了 别名 。

get：获取数据
post：提交数据（表单提交+文件上传）
put：更新数据（所有数据推送到后端）
patch：更新数据（只将修改的数据推送到后端）
delete：删除数据

一般公司项目中，post用于新建，put用于更新，patch根据后端的具体规范（比如：一个表单的数据量很大，有很多项的情况一般用patch，因为数据比较多的情况下，推送一次会很耗费性能）

 

             axios.post("http://localhost:8080/ServletVueElementUI/aa","username=d")
             .then(function(res){
                alert(res.data) ;
             })

 

             axios.get("http://localhost:8080/Servlet-Vue-ElementUI/aa?username=df")
             .then(function(res){
                alert(res.data) ;
             })

 

 

参数

1、js对象与json对象对比：json的key加引号，（双引号/单引号）

2、Axios中，json字符串和js对象自动转换

js对象  

js转json：JSON.stringify();

 

            var jsStr={
                            name:"zs",
                            age:7,
                            address:[4,2],
                            ew:[["二维","数组"],[2,2]],
                            ob:{call:"对象",kong:null},
                            
                        }

 console.log(JSON.stringify(jsStr)); //js对象转换成JSON

 

json对象（字符串）（js不能换行，或者字符串拼接）

json转js：JSON.parse();

          
                                                                   //adress  一维数组  [ ]       person 对象 { }                                er  二维数组  [ [ ] ]       null

 var jsonStr = '{"name": "张三","age": 14,"address":["一维","数组"],"pserson":{"name":"对象","age":74,"er":[["二维","数组"],[2,null]]}}';
 console.log(JSON.parse(jsonStr));

 

posted on 2023-08-17 17:50  hellowworld!  阅读(13)  评论(0)  编辑  收藏  举报

导航