REST API实战演练之JavaScript使用Rest API

咱们前面讲了一下如何创建REST API

假期别闲着:REST API实战演练之创建Rest API-CSDN博客

又讲了java客户端如何使用REST API

假期别闲着:REST API实战演练之客户端使用Rest API-CSDN博客

接下来咱们看看JavaScript怎么使用REST API。

一、新建一个HTML文件

二、添加几个控件元素

html 复制代码
<body>
	<h1>PIJON</h1>
		<p>(Person Info in JavaScript Object Notation)</p>
		<p><input type="text" value="Ada" id="name"><button type="button" onclick="getPersonInfo()">Get</button></p>
		<p>Birth year:</p>
		<input type="text" id="birthYear">
		<p>About:</p>
		<textarea id="about"></textarea>
		<p><button type="button" onclick="setPersonInfo()">Save</button></p>
</body>

三、添加一段JavaScript代码

html 复制代码
<head>
<meta charset="UTF-8">
<title>PIJON</title>
		<script>
			function getPersonInfo(){
				var name = document.getElementById('name').value;
				
				var ajaxRequest = new XMLHttpRequest();
				ajaxRequest.onreadystatechange = function(){
					if(ajaxRequest.readyState == 4){
						if(ajaxRequest.status == 200){
							var person = JSON.parse(ajaxRequest.responseText);
							document.getElementById('birthYear').value = person.birthYear;
							document.getElementById('about').value = person.about;
						}
					}			
				}
				ajaxRequest.open('GET', 'http://localhost:8080/HelloJSP/people/' + name);
				ajaxRequest.send();
			}
			
			function setPersonInfo(){
				var name = document.getElementById('name').value;
				var about = document.getElementById('about').value;
				var birthYear = document.getElementById('birthYear').value;
				
				var postData = 'name=' + name;
				postData += '&about=' + encodeURIComponent(about);
				postData += '&birthYear=' + birthYear;
				
				var ajaxRequest = new XMLHttpRequest();
				ajaxRequest.open('POST', 'http://localhost:8080/HelloJSP/people/' + name);
				ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				ajaxRequest.send(postData);
			}
		</script>
</head>

修改后完整代码如下:

html 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PIJON</title>
		<script>
			function getPersonInfo(){
				var name = document.getElementById('name').value;
				
				var ajaxRequest = new XMLHttpRequest();
				ajaxRequest.onreadystatechange = function(){
					if(ajaxRequest.readyState == 4){
						if(ajaxRequest.status == 200){
							var person = JSON.parse(ajaxRequest.responseText);
							document.getElementById('birthYear').value = person.birthYear;
							document.getElementById('about').value = person.about;
						}
					}			
				}
				ajaxRequest.open('GET', 'http://localhost:8080/HelloJSP/people/' + name);
				ajaxRequest.send();
			}
			
			function setPersonInfo(){
				var name = document.getElementById('name').value;
				var about = document.getElementById('about').value;
				var birthYear = document.getElementById('birthYear').value;
				
				var postData = 'name=' + name;
				postData += '&about=' + encodeURIComponent(about);
				postData += '&birthYear=' + birthYear;
				
				var ajaxRequest = new XMLHttpRequest();
				ajaxRequest.open('POST', 'http://localhost:8080/HelloJSP/people/' + name);
				ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
				ajaxRequest.send(postData);
			}
		</script>
</head>
<body>
	<h1>PIJON</h1>
		<p>(Person Info in JavaScript Object Notation)</p>
		<p><input type="text" value="Ada" id="name"><button type="button" onclick="getPersonInfo()">Get</button></p>
		<p>Birth year:</p>
		<input type="text" id="birthYear">
		<p>About:</p>
		<textarea id="about"></textarea>
		<p><button type="button" onclick="setPersonInfo()">Save</button></p>
</body>
</html>

四、启动Server确保服务端开启

五、浏览器输入访问地址

浏览器输入如下地址:

浏览器输入如下地址:http://localhost:8080/HelloJSP/TestRestAPI.html

显示如下:

六、测试rest api

点击get,获取输入人员的信息,显示如下:

我们修改一下birth year,然后点击save按钮。

保存后刷新页面,再次点击get按钮显示如下:

小结:关于XMLHttpRequest

XMLHttpRequest只是一个JavaScript对象,是一个构造函数。它一点也不神秘,它的特殊之处只在于它是由客户端(即浏览器)提供的(而不是JavaScript原生的)API

[所有现代浏览器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都内建了 XMLHttpRequest 对象 ]

XML对象是不断被扩展的。目前XML有两个级别:第一级提供了XMLHttpRequest对象的实现细节,第二级则进一步发展了该对象,额外添加了一些方法和属性。

1、XMLHttpRequest属性

  • responseText:包含响应主体返回的文本
  • responseXML:如果响应内容类型为 text/xml 或 application/xml 时,该属性将保存包含着响应数据的XML DOM文档
  • readyState:表示在「请求/响应」过程中当前的活动阶段(这个属性的值从 0 开始,直到接收到完整的 HTTP 响应,这个值增加到 4)
  • status:响应的HTTP状态(2xx - 5xx)
  • statusText:HTTP 服务器返回的响应状态,与status不同的是,它包含完整的响应状态文本(例如,"200 OK")

2、XMLHttpRequest方法

  • open():用于准备启动一个AJAX请求;
  • setRequestHeader():用于设置请求头部信息
  • send():用于发送AJAX请求
  • abort():用于取消异步请求

另外,浏览器还为XMLHttpRequest对象提供了一个 onreadystatechange 的监听事件,每当XMLHttpRequest实例的 readyState 属性变化时,就会触发该事件。

参考资料:

https://blog.csdn.net/allway2/article/details/123375541

https://zhuanlan.zhihu.com/p/349658121?utm_id=0

https://happycoding.io/tutorials/java-server/rest-api

相关推荐
道不尽世间的沧桑1 分钟前
第17篇:网络请求与Axios集成
开发语言·前端·javascript
久绊A9 分钟前
Python 基本语法的详细解释
开发语言·windows·python
bin91533 小时前
DeepSeek 助力 Vue 开发:打造丝滑的复制到剪贴板(Copy to Clipboard)
前端·javascript·vue.js·ecmascript·deepseek
软件黑马王子4 小时前
C#初级教程(4)——流程控制:从基础到实践
开发语言·c#
闲猫4 小时前
go orm GORM
开发语言·后端·golang
晴空万里藏片云5 小时前
elment Table多级表头固定列后,合计行错位显示问题解决
前端·javascript·vue.js
奶球不是球5 小时前
el-button按钮的loading状态设置
前端·javascript
李白同学5 小时前
【C语言】结构体内存对齐问题
c语言·开发语言
无责任此方_修行中6 小时前
每周见闻分享:杂谈AI取代程序员
javascript·资讯
黑子哥呢?6 小时前
安装Bash completion解决tab不能补全问题
开发语言·bash