前端js如何发起http请求后端后端-JieYingAI捷鹰AI

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

先贴代码：


<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 + "
";
            }
            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。

版权声明 1 本网站名称：捷鹰AI导航
2 本站永久网址：www.jieyingai.com
3 本站原创内容转载请注明出处，付费内容未经本站授权禁止转载二次发布
4 本站所有内容禁止用于任何非法用途！部分文章、素材、资源软件来自网络，仅供大家学习与参考。如有侵权，请联系站长QQ:1392478547进行删除处理
5 本站投稿禁止发布任何违法内容，如发现将立即封号处理，欢迎举报监督
6 本站附件资源、教程等内容如因时效原因失效或不可用，请联系留言或联系站长及时更新

THE END