024_Fetch
1. fetch更加簡單的數據獲取方式, 功能更加強大、更加靈活, 是基于Promise實現的。
2. fetch語法結構
fetch(url).then(fun1).then(fun2).......catch(fun)3. 新建一個名為Promise的動態Web工程
3.1. 編寫FetchAjax.java
package com.bjbs.fa;import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;public class FetchAjax extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String id = req.getParameter("id");resp.getWriter().write("Fetch Ajax get Request... id = " + id);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);} }3.2. 編寫FetchAjaxPost.java
package com.bjbs.fa;import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;public class FetchAjaxPost extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String uname = req.getParameter("uname");String pwd = req.getParameter("pwd");resp.getWriter().write("Fetch Ajax post Request... uname = " + uname + ", pwd = " + pwd);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);} }3.3. 編寫FetchAjaxPostJson.java
package com.bjbs.fa;import java.io.BufferedReader; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;public class FetchAjaxPostJson extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {BufferedReader br = req.getReader();String result = "", rl = null;while((rl = br.readLine()) != null) {result += rl;}System.out.println("Fetch Ajax post Request Json Param... result = " + result);String res = "{\"code\":1,\"result\":\"success.\"}";resp.getWriter().write(res);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {doGet(req, resp);} }3.4. 修改web.xml
?3.5. 編寫FetchGet.html
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>Fetch基本用法-get</title></head><body><script type="text/javascript">fetch("http://localhost:8080/Fetch/fa.action?id=123").then(function(res){// text()方法屬于fetchAPI的一部分, 它返回一個Promise實例對象, 用于獲取后臺返回的數據return res.text();}).then(function(data){document.write(data + "<br />");});// get參數傳遞fetch("http://localhost:8080/Fetch/fa.action?id=456", {method: 'get'}).then(function(res){return res.text();}).then(function(data){document.write(data + "<br />");});</script></body> </html>3.6. 編寫FetchPost.html
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>Fetch基本用法-post</title></head><body><script type="text/javascript">// post參數傳遞fetch("http://localhost:8080/Fetch/fap.action", {method: 'post',body: 'uname=lisi&pwd=123',headers: {'Content-Type': 'application/x-www-form-urlencoded'}}).then(function(res){return res.text();}).then(function(data){document.write(data + "<br />");});// post傳遞json參數fetch("http://localhost:8080/Fetch/fapj.action", {method: 'post',body: JSON.stringify({uname: 'zhangsan', pwd: '456'}),headers: {'Content-Type': 'application/json'}}).then(function(res){return res.json();}).then(function(data){document.write("code = " + data.code + ", result = " + data.result + "<br />");});</script></body> </html>3.7. 運行項目, 訪問FetchGet.html
3.8. 運行項目, 訪問FetchPost.html?
總結
- 上一篇： 023_Promise
- 下一篇： 025_Axios