您的位置：首页 > 理论基础 > 计算机网络

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

2018-01-14 14:50 375 查看

作为一名后端开发人员，一致在学习后端技术，今天突然想起写一个原生的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协议与服务器交互数据，
98fb
可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页如果需要更新内容，必须重新加载整个网页页面。此外，它也是实现前端与后端解耦的重要技术手段。AJAX框架的核心对象就是XMLHttpRequest。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航