Ajax(5):利用json做資料交換

最後更新：2018-12-04 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

工程目錄：

show.jsp :

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%><html><head><title>Insert title here</title><script type="text/javascript" src="js/prototype1.6.js"></script><script>function getXmlHttpRequest(){var xhr=null;if((typeof XMLHttpRequest)!='undefined'){xhr=new XMLHttpRequest();}else{xhr=new ActiveXObject("Microsoft.XMLHttp");}return xhr;}var intervalId;function show(){intervalId=setInterval(getShareInfo,1000);}function stopShow(){clearInterval(intervalId);}function getShareInfo(){var xhr=getXmlHttpRequest();xhr.onreadystatechange=function(){if(xhr.readyState==4){var jsonStr=xhr.responseText;var share=jsonStr.evalJSON();$('d1').innerHTML="股票名稱:"+share.shareName+"<br>股票價格:"+share.sharePrice+"<br>時間:"+share.date;}}xhr.open("post","show",true);xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.send(null);}</script></head><body onload="show();"><div style="width:250px;height:70px;border:1px solid black" id="d1"></div><input type="button" value="停止報價" onclick="stopShow();"></body></html>

Share.java :

public class Share {private String shareName;private double sharePrice;private Date date;public Date getDate() {return date;}public void setDate(Date date) {this.date = date;}public String getShareName() {return shareName;}public void setShareName(String shareName) {this.shareName = shareName;}public double getSharePrice() {return sharePrice;}public void setSharePrice(double sharePrice) {this.sharePrice = sharePrice;}public Share() {super();}public Share(String shareName, double sharePrice, Date date) {super();this.shareName = shareName;this.sharePrice = sharePrice;this.date = date;}}

DateProcessor.java :

public class DateProcessor implements JsonValueProcessor {private String pattern="yyyy-MM-dd HH:mm:ss";public void setPattern(String pattern) {this.pattern = pattern;}@Overridepublic Object processArrayValue(Object arg0, JsonConfig arg1) {Date date=(Date)arg0;SimpleDateFormat sdf=new SimpleDateFormat(pattern);return sdf.format(date);}@Overridepublic Object processObjectValue(String arg0, Object arg1, JsonConfig arg2) {Date date=(Date)arg1;SimpleDateFormat sdf=new SimpleDateFormat(pattern);return sdf.format(date);}}

ShowServlet.java :

public class ShowServlet extends HttpServlet {public void service(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {Random random=new Random();String shareName="share"+random.nextInt(99999);double sharePrice=Math.ceil(random.nextDouble()*10);Share share=new Share(shareName,sharePrice,new Date());DateProcessor processor=new DateProcessor();JsonConfig config=new JsonConfig();config.registerJsonValueProcessor(Date.class,processor);JSONObject json=JSONObject.fromObject(share,config);response.setContentType("text/html;charset=UTF-8");PrintWriter pw=response.getWriter();pw.println(json.toString());pw.close();}}

為ShowServlet映射的url為show。

資料轉換涉及兩個過程：

① 伺服器端將Java對象Share轉換為符合json文法的字串，並發送給用戶端。

② 瀏覽器接收到符合json文法的字串，利用evalJSON( )函數將字串轉換為JavaScript對象，並及時更新頁面資料。

當然，上面的程式在實際中無意義，它僅僅為了示範json是如何做資料交換的。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More