js原生Ajax请求

最新推荐文章于 2024-01-13 22:40:12 发布

空门.

最新推荐文章于 2024-01-13 22:40:12 发布

阅读量347

点赞数

本文链接：https://blog.csdn.net/qq_40719787/article/details/100189487

版权

大前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

首先我们需要创建一个XMLHttpRequest对象，该对象提供了我们进行Ajax请求的方法
1、建立Ajax连接
2、设置请求的header（参数中有中文时需要设置）和需要传递的参数（GET方法在url后拼接）
3、发送数据到服务器 .send()方法
4、接收服务器返回的数据并进行处理 .onreadystatechange
onreadystatechange原理：
在请求状态变化的时候执行一次该回调方法状态表
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 正在处理请求
4: 请求已完成且响应已就绪
所以在实际中 onreadystatechange 被多次调用为了方便我们后续使用我们对回调方法进行了简单的封装：
首先我们给XMLHttpRequest对象添加success和error两个属性，每个属性对应一个回调函数
然后我们定义了ajaxCallBack方法在请求成功/失败时调用success或者error方法。
getAjaxData用于将{key:value}对象转成String

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript原生Ajax请求</title>
</head>
<body>
<div id="showRes">
    
</div>
<button onclick="getMsg()">点击获取</button>
<script type="text/javascript">
    function getMsg(){
        // 创建XMLHttpRequest对象用于数据请求
        var variable = new XMLHttpRequest();
        // (method, url, async) 请求方式，地址，是否异步
        variable.open("POST", "http://39.105.98.109/files/s_getPictureAddress",true);
        variable.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        variable.send(); // 用于GET方式和POST无参数情况
        // variable.send(string); //String参数为POST方式传递的参数
        // 请求状态发生变化时执行该函数
        variable.onreadystatechange = ajaxCallBack;
        
        // 写两个方法用于成功和失败的回调
        variable.success = successBack;
        variable.error = errorBack;
    }
    function successBack(data){
        console.log(data);
        document.getElementById("showRes").innerText = "成功！";
    }
    function errorBack(data){
        console.log(data);
        document.getElementById("showRes").innerText = "失败！";
    }
</script>
<script type="text/javascript">
    // 简单的封装一下回调函数

    // Ajax的回调函数
    function ajaxCallBack() {
        if(this.readyState == 4 && this.status == 200){
            if(this.success!=null){
                this.success(JSON.parse(this.responseText));
            }
        }
        else if(this.readyState == 4){            // error
            if(this.error!=null){
                this.error();
            }
        }
    }
    // 获取Ajax数据的封装函数
    function getAjaxData(data) {
        data = JSON.stringify(data); // 转成字符串
        data = data.replace(/["'{}]/g,'');
        data = data.replace(/,/g,'&');
        data = data.replace(/:/g,'=');
        return data;
    }
</script>
</body>
</html>

空门.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
js原生Ajax请求

首先我们需要创建一个XMLHttpRequest对象，该对象提供了我们进行Ajax请求的方法1、建立Ajax连接2、设置请求的header（参数中有中文时需要设置）和需要传递的参数（GET方法在url后拼接）3、发送数据到服务器 .send()方法4、接收服务器返回的数据并进行处理 .onreadystatechangeonreadystatechange原理：在请求状态变化的时候执...
复制链接

扫一扫