前端学习之Ajax（二）

1、核心方法

首先对知识进行一下回顾：
1.创建一个XMLHttpRequest对象
2.准备发送请求的数据：URL
3.调用XMLHttpRequest对象的open方法
4.调用XMLHttpRequest对象的send方法
5.为XMLHttpRequest对象添加onreadystatechange相应函数
6.判断响应是否完成：XMLHttpRequest对象的readystate属性值为4的时候
7.再判断响应是否可用：XMLHttpRequest对象的status属性为200
8.打印相应结果：responseText

2、XMLHttpRequest 2.0

onload / onprogress

var xhr = new XMLHttpRequest()
xhr.open('GET', './time.php')
xhr.onload = function () {
    // onload readyState === 4
    console.log(this.readyState)
}
xhr.onprogress = function () {
    // onload readyState === 3
    console.log(this.readyState)
}
xhr.send(null)

2.FormData
以前 AJAX 只能提交字符串，现在可以提交二进制的数据

3、axios的使用

<script src="lib/axios.min.js"></script>
    <button onclick="getData()">发起请求</button>
    <script>
        function getData(){
            // axios({
            //     method:'get',
            //     url:'http://localhost:5500?username=tom&pwd=123456'
            //     // data:{
            //     //     username:'tom',
            //     //     pwd:"123456"
            //     // }
            // }).then(res=>{
            //     console.log(res.data);//取出数据
            // }).catch(err=>{
            //     console.log(err);
            // });
            //post
            axios({
                method:'POST',
                url:'http://localhost:5500/login',
                data:{
                    username:'tom',
                    pwd:"123456"
                }
            }).then(res=>{
                console.log(res.data);//取出数据
            }).catch(err=>{
                console.log(err);
            });
        }
    </script>

既然提到了axios那就把原生ajax和jQuery.ajax也分别类举出来做下比较

<button onclick="getData()">GET</button>
    <button onclick="postData()">POST</button>
    <script src="lib/jquery.min.js"></script>
    <script>
        let baseUrl="http://localhost:5000";
        function getData(){
            // $.ajax(baseUrl,{
            //     //成功时回调
            //     success:function(data){
            //         console.log(data);
            //     },
            //     //失败时回调
            //     error:function(err){
            //         console.log(err);
            //     }
            // });

            //get 有参数
            $.ajax({
                type:"GET",
                url:baseUrl,
                data:"username=jack",
                success:function(data){
                    console.log(data);
                }
            });
        }

//post
        function postData(){
            // $.ajax({
            //     type:"POST",
            //     url:baseUrl,
            //     success:function(data){
            //         console.log(data);
            //     }
            // });

           var nn= $.ajax({
                type:"POST",
                url:`${baseUrl}/login`,
                data:"username=jack",
                success:function(data){
                    console.log(data);
                }
            });

        }
    </script>

这里类举一下对ajax进行Promise式的封装

<script>
function ajaxPromise(method, url, parms) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        method = method.toUpperCase();//转换为大写
        //GET并且有参数
        if (method === "GET" && parms != undefined) {
            // xhr.open(method,url,true);
            url = url + "?" + parms;
        }
        xhr.open(method, url, true);
        if (method == "POST" && parms != undefined) {
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.send(parms);
        } else {
            xhr.send(null);
        }
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                resolve(xhr.responseText);
            }
        };
    });
}
ajax('POST',url,data).then(function(data){
            console.log(data);
        });
</script>

以上就是ajax的常用方式，在上一次的文章中提到了解决跨域的问题，除了之前所叙述的两种方式之外还有一种方式就是中转服务器，对于中转服务器的介绍放在了node.JS中来进行。
文章链接：node.js之中转服务器

寂寞花如雪

发布了35 篇原创文章 · 获赞 47 · 访问量 8609

私信关注