Ajax(Asynchronous Javascript And XML)---数据小能手

    Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。

    通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。


如何使用


Ajax(Asynchronous Javascript And XML)---数据小能手_第1张图片
了解一些原理图

1.原生JavaScript

       创建XMLHttpRequest 对象

        var xmlhttp;

        if (window.XMLHttpRequest){ 

             // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 

              xmlhttp=new XMLHttpRequest();

        }else{ 

             // IE6, IE5 浏览器执行代码 

             xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

        }

         向服务器发送请求


Ajax(Asynchronous Javascript And XML)---数据小能手_第2张图片
请求方法及相关参数描述

GET请求

        xmlhttp.open("GET","/a/b/c.php?page=1&sex=false",true);

        xmlhttp.send();

POST请求

        xmlhttp.open("POST","/a/b/c_post.php",true);

        //向请求添加 HTTP 头。

        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        xmlhttp.send("par1=value1&par2=value2");


监听请求成功的回调函数

        xhr.onreadystatechange = function(){

            if(xhr.status == 200 && xhr.readyState == 4){ //成功了

                //拿到请求结果

                console.log(JSON.parse(xhr.responseText));

            }

        }

好麻烦有木有,但是有灵魂

2.jQuery

        $.get("test.php?a=1&b=2",function(data,status){

            alert("数据: " + data + "状态: " + status);

         });

        $.post("/post.php",

            { 

                name:"123"

            },

            function(data,status){ 

                alert("数据:" + data + "状态: " + status);

            });


        $.ajax({

            type: "GET",

            url: "test.json",

            data: {

                username:"123", content:"123",

                 dataType: "json",

                 success: function(data){

                            //拿到data干点想干的

                      }

             });

3.axios

        cdn引用

        axios .get('path?id=123') .then(response => (

           console.log(response);

        )) .catch(function (error) { 

            // 请求失败处理 console.log(error);

        });

    当然也可以

        axios.get('/user', 

                { 

                     params: { ID: 12345 } 

                }) .then(function (response) { 

                     console.log(response);

                })  .catch(function (error) {

                      console.log(error);

                });


        axios.post('/path', 

            { name: '123', 

               age: 18

             }) .then(function (response) {

                console.log(response);

             })  .catch(function (error) {    

                 console.log(error);

             });


        执行多个并发请求

        function getOne() {  

            return axios.get('onePath');

        } 

        function getOther() {  

            return axios.get('otherPath');

        }

        axios.all([getOne(), getOther()])  .then(

            axios.spread(function (acct, perms) {    

                // 两个请求现在都执行完成  

            }));


其他的当然也有很多啦,小白才疏学浅

如有不当,敬请指正,谢谢

你可能感兴趣的:(Ajax(Asynchronous Javascript And XML)---数据小能手)