前端js如何发起http请求后端后端

最新推荐文章于 2024-03-27 09:57:45 发布

StonyConfident

最新推荐文章于 2024-03-27 09:57:45 发布

阅读量1.5w

点赞数 3

分类专栏：前端技术文章标签：前端技术 XMLHttpRequest AJAX

本文链接：https://blog.csdn.net/stony_confident/article/details/79056649

版权

前端技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

作为一名后端开发人员，一致在学习后端技术，今天突然想起写一个原生的js，探讨向服务端发起http请求，获得数据后再做显示。
先贴代码：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>请求后端接口测试</title> 
</head>
<body>
<input type="text" id="aaa">输入查询银行</input>
<button onclick="startQuery()">开始请求 </button>
<div id="result" style="color:red"></div>
<script>
    function getJSON(url){
        return new Promise( function(resolve, reject){
            var xhr = new XMLHttpRequest();
            xhr.open('get',url,true);
            xhr.responseType ='json';
            xhr.onload =  function(){
                var status = xhr.status;
                if (status == 200) {
                    resolve(xhr.response);
                } else {
                    reject(status);
                }
            };
            xhr.send();
        });
    };
    function startHttpQuery(bankId){
        var url= "http://localhost:8080/v1/bankinfo";
        if(null != bankId){
            //get方法的查询参数设置
            url=url + "?bankId=" + bankId;
        }
        getJSON(url).then( function(data){
            var info="";
            for(var i=0; i<data.length; i++){
                info = info + data[i].bankId + "     " + data[i].bankName + "<br>";
            }
            document.getElementById("result").innerHTML = info;
        },
        function(status) {
            alert('Something went wrong.');
        });
    }
    function startQuery(){
        var bank=document.getElementById("aaa").value;
        startHttpQuery(bank);
    }
</script>
</body>
</html>

本次demo采用XMLHttpRequest对象发起http请求，并没有采用任何前端框架。

AJAX即“Asynchronous Javascript And XML”，异步JavaScript和XML。使用AJAX可以通过HTTP协议与服务器交互数据，可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页如果需要更新内容，必须重新加载整个网页页面。此外，它也是实现前端与后端解耦的重要技术手段。AJAX框架的核心对象就是XMLHttpRequest。

StonyConfident

关注

3
点赞
踩
22

收藏

觉得还不错? 一键收藏
1
评论
前端js如何发起http请求后端后端

作为一名后端开发人员，一致在学习后端技术，今天突然想起写一个原生的js，探讨向服务端发起http请求，获得数据后再做显示。先贴代码：html>head> meta charset="utf-8"> title>请求后端接口测试title> head>body>input type="text" id="aaa">输入查询银行input>button onclick="s
复制链接

扫一扫