cms 做网站,天津市建设教育培训中心的网站,做网站大优惠,郑州包装设计公司咱们前面讲了一下如何创建REST API
假期别闲着#xff1a;REST API实战演练之创建Rest API-CSDN博客
又讲了java客户端如何使用REST API
假期别闲着#xff1a;REST API实战演练之客户端使用Rest API-CSDN博客
接下来咱们看看JavaScript怎么使用REST API。
一、新建一个…咱们前面讲了一下如何创建REST API
假期别闲着REST API实战演练之创建Rest API-CSDN博客
又讲了java客户端如何使用REST API
假期别闲着REST API实战演练之客户端使用Rest API-CSDN博客
接下来咱们看看JavaScript怎么使用REST API。
一、新建一个HTML文件 二、添加几个控件元素
bodyh1PIJON/h1p(Person Info in JavaScript Object Notation)/ppinput typetext valueAda idnamebutton typebutton onclickgetPersonInfo()Get/button/ppBirth year:/pinput typetext idbirthYearpAbout:/ptextarea idabout/textareapbutton typebutton onclicksetPersonInfo()Save/button/p
/body
三、添加一段JavaScript代码
head
meta charsetUTF-8
titlePIJON/titlescriptfunction 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
修改后完整代码如下
!DOCTYPE html
html
head
meta charsetUTF-8
titlePIJON/titlescriptfunction 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
bodyh1PIJON/h1p(Person Info in JavaScript Object Notation)/ppinput typetext valueAda idnamebutton typebutton onclickgetPersonInfo()Get/button/ppBirth year:/pinput typetext idbirthYearpAbout:/ptextarea idabout/textareapbutton typebutton onclicksetPersonInfo()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 - 5xxstatusTextHTTP 服务器返回的响应状态与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_id0
https://happycoding.io/tutorials/java-server/rest-api
