Zenn
👋

【初心者向け/ITスクール 62日】AJAX2

2023/10/13に公開
JavaScript
Spring
tech

はじめに

今日は、ITスクールに通った62日目の日で、今日学んだ知識を記事にシェアしたいと思います。本記事が、ITを勉強を始めた方々にもロードマップになればいいと思います。

今日はJQueryを通して、AJAX関数からJSONを読ん出来ることを体験しました。

Ajax JSON

https://zenn.dev/eldorado215/articles/7eab2fb2683c12

以前、Javaのオブジェクトを通して、XML形式のAPIでDBのデーターを作成し、AJAXでViewとマッピングする練習をしたのですが、今回はJSONでした。
変更点はアノテーションが要らなくなったこととControllerからのproduces属性が変わったことぐらいでした。

@RequestMapping(value="/error.getSelectedJSON", method=RequestMethod.GET,
produces= "application/json; charset=UTF-8;")
public @ResponseBody Errors getSelectedJSON(Error error,HttpServletRequest req) {
	return eDAO.getSelectedJSON(error, req);
}

VIEWの場合、XMLのようにURL,DATAなどをstringify()という関数で直列化する方法と、getJSONという関数　でもらう方法がありました。コード自体はgetJSONが簡単ですが、精度を高めたい場合はstringifyでマニュアルで作成することもできました。

stringify(json->文字列に変換後、alertで出力)
$.ajax({
   url :'error.getJSON',
   success: function(zxc){
	alert(JSON.stringify(zxc));   
		   }
	   });
getJSON(json->全てのデーター出力)
  $.getJSON('error.getJSON',function(zxc){
		 //alert(JSON.stringify(zxc));
		 //let ar = zxc.error;
		 //alert(ar[0].e_where);
		 $.each(zxc.error, function(i,e){
			 let td1 = $('<td></td>').text(e.e_what);
			 let td2 = $('<td></td>').text(e.e_where);
			 
			 let tr = $('<tr></tr>').append(td1,td2);
			 $('table').append(tr);
		 });		   
	   });

以下のコードはXMLと同様、inputのvalueをリクエストパラメータで、必要なJSONのみひぱってくるコードです。

 $('button').click(()=>{
		   let selectInput = $('input').val();

		   $.getJSON('error.getSelectedJSON?e_what=' + selectInput ,(result)=>{
		    
	$('table').empty();
		     
        $.each(result.error, (i, e)=>{
	      let td1 = $('<td></td>').text(e.e_what);
	      let td2 = $('<td></td>').text(e.e_where);
		       
	      let tr = $('<tr></tr>').append(td1, td2);
	      $('table').append(tr);
		       
	     });
	   });
    });

Cross Domain

同じプロジェクト内なら、SpringMVCの場合、サーバーとViewが同じ所属なので、いつでもアクセスができますが、外部からはアクセスすることは不可能です。
この場合、多く2つの方法があります。

サーバーから許可する方法(JSONP)

@RequestMapping(value = "/error.getJSON", method = RequestMethod.GET,
			produces = "application/json; charset=UTF-8;")
	public @ResponseBody Errors getJSON(HttpServletRequest req, HttpServletResponse res) {
		res.addHeader("Access-Control-Allow-Origin", "*");
		return eDAO.getJSON(req);
	}
  1. リスポンスパラメータを追加し、(HttpServletResponse)
  2. そのオブジェクトに"Access-Control-Allow-Origin", "*"というheaderを追加します。
	  
$.getJSON('http://localhost/oct131/error.getJSON', result =>{
	alert(JSON.stringify(result)); 
	});

APIを直接パーサーし、再転送する方法

https://zenn.dev/eldorado215/articles/710ade7ae890a3

できない場合は、直接XML　APIをJavaからもらい、変換したデーターをStringでまた、XMLに再作成します。

package com.hyon.oct133.weather;

import java.io.BufferedReader;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Service;

@Service
public class WeatherDAO {
    
	public String getKoreanWeather(HttpServletRequest req){
	try {
		URL u = new URL("http://www.kma.go.kr/wid/queryDFSRSS.jsp?zone=1150060300");
		HttpURLConnection huc = (HttpURLConnection) u.openConnection();
			
		InputStream is = huc.getInputStream();
		InputStreamReader isr = new InputStreamReader(is,"UTF-8");
		BufferedReader br = new BufferedReader(isr);
			
		
	    StringBuffer sb = new StringBuffer();	
		
		String line = null;
			while((line = br.readLine()) != null) {
				sb.append(line.replace("\r\n", ""));
			}
			
			return sb.toString();
		}catch(Exception e) {
		 e.printStackTrace();
		 return null;
		}
	}
}

@Controller
public class WeatherController {

	@Autowired
	private WeatherDAO wDAO;
	
	
	@RequestMapping(value= "/k.weather.get", method=RequestMethod.GET,
			produces = "application/xml; charset=UTF-8")
	public @ResponseBody String getWeather(HttpServletRequest req){
		return wDAO.getKoreanWeather(req);
	}
}

以前はパーサーでいちいちデーターをわけましたが、その作業はQueryと連携し、viewから呼び出すことができます。

<script type="text/javascript" defer>

   $(function(){
	  
	   $.ajax({
		 url: 'k.weather.get',
		 success: (result) =>{
			 
			 let ar = []; 
			
			 let hourTh =$('<th></th>').text('시간');
			 let tempTh =$('<th></th>').text('기온');
			 let wfKorTh =$('<th></th>').text('날씨');
			 
			 let trr = $('<tr></tr>').append(hourTh,tempTh,wfKorTh);
			 $('table').prepend(trr);
			 
			 $(result).find('data').each((i,d)=>{
				
				 let hour = $(d).find('hour').text();
				 let temp = $(d).find('temp').text();
				 let wfKor = $(d).find('wfKor').text();
				 
				 let td1 = $('<td></td>').text(hour);
				 let td2 = $('<td></td>').text(temp);
				 let td3 = $('<td></td>').text(wfKor);
				 
				 let tr = $('<tr></tr>').append(td1,td2,td3);	
			     $('table').append(tr);
			     
			     ar[i] = {label: hour, y: temp * 1, lineColor: 'orange',
							markerColor: '#1E09FF'};
			 });
			 
			 var chart = new CanvasJS.Chart('chartContainer', {
					animationEnabled: true,
					theme: 'light2',
					title:{
						text: '3시간 당 온도 변화'
					},
					data: [{        
						type: "line",
				      	indexLabelFontSize: 16,
						dataPoints: ar
					}]
				});
				chart.render();
				
				
		  }
	   });	   
   });
</script>
  <script src="https://cdn.canvasjs.com/canvasjs.min.js" defer></script>
</head>
<body>
  <div id="chartContainer" style="height: 370px; width: 100%;"></div>
   <hr>
  <table border="1"></table>
</body>

Discussion