【初心者向け/ITスクール 61日】AJAX
はじめに
今日は、ITスクールに通った61日目の日で、今日学んだ知識を記事にシェアしたいと思います。本記事が、ITを勉強を始めた方々にもロードマップになればいいと思います。
今日はJQueryを通して、AJAX関数からXMLを読ん出来ることを体験しました。
AJAX
<body>
<table id="fruitTbl" border="1">
</table>
<hr>
<button id="btn">Button</button>
<hr>
<input id="searchinput" name="f_price"> <button id="btn2">Send Price</button>
DTO
Spring, DTO ,myBatis, DBを連携するにはinput nameを同じ名前することが必修です。同じnameがあれば、内部からマッピングされ、データーをDTOをfieldを通して、交換します。
しかし、Viewの場合は少し近います。
viewはidを設定し、ajax関数を呼び出し、f_priceで作られたxmlのデーターをVIEWに表示します。
まず、ボターンを押せば、サーバーにデーターが入り、xmlを作成します。
そのためにはDTO classに @XmlRootElementを付け、Setterメソッドに@XmlElementタグを付けます。
追加のポイントとしては、動的QueryをListに変換し、xmlに送るため、DTO classとDTOをListにもっているxml専用クラスを作成します。
package com.hyon.oct1212.fruit;
import java.math.BigDecimal;
import javax.xml.bind.annotation.XmlElement;
import javax.xml.bind.annotation.XmlRootElement;
@XmlRootElement
public class Fruit {
private String f_name;
private BigDecimal f_price;
public Fruit() {
// TODO Auto-generated constructor stub
}
public Fruit(String f_name, BigDecimal f_price) {
super();
this.f_name = f_name;
this.f_price = f_price;
}
public String getF_name() {
return f_name;
}
@XmlElement
public void setF_name(String f_name) {
this.f_name = f_name;
}
public BigDecimal getF_price() {
return f_price;
}
@XmlElement
public void setF_price(BigDecimal f_price) {
this.f_price = f_price;
}
}
package com.hyon.oct1212.fruit;
import java.util.List;
import javax.xml.bind.annotation.XmlElement;
import javax.xml.bind.annotation.XmlRootElement;
@XmlRootElement
public class Fruits {
private List<Fruit> fruit;
public Fruits() {
// TODO Auto-generated constructor stub
}
public Fruits(List<Fruit> fruit) {
super();
this.fruit = fruit;
}
public List<Fruit> getFruit() {
return fruit;
}
@XmlElement
public void setFruit(List<Fruit> fruit) {
this.fruit = fruit;
}
}
DAO(model)
<select id="getPriceFruit" resultType="com.hyon.oct1212.fruit.Fruit"
parameterType="com.hyon.oct1212.fruit.Fruit">
select * from OCT12_FRUIT where f_price <=#{f_price} order by f_price
</select>
inputに入力された値を受け入れ、Queryを転送するには#{}が必要なので、parameterTypeを必ず指定します。
public void getPriceFruit(Fruit f, HttpServletRequest req) {
try {
req.setAttribute("fruits", ss.getMapper(FruitMapper.class).getPriceFruit(f));
}catch(Exception e) {
e.printStackTrace();
req.setAttribute("r", "등록 실패");
}
}
public Fruits getPriceFruitXML(Fruit f,HttpServletRequest req) {
return new Fruits(ss.getMapper(FruitMapper.class).getPriceFruit(f));
}
returnされたFruitsオブジェクトは@XmlRootElementアノテーションにより、オブジェクトをXMLに変換しリターンします。
それなら、このXMLはどういう風にリターンしましょうか？
Controller
@RequestMapping(value="/fruit.getPriceFruitXML", method= RequestMethod.GET,
produces = "application/xml; charset=UTF-8")
public @ResponseBody Fruits getPriceFruitXML(Fruit f,HttpServletRequest req) {
return fDAO.getPriceFruitXML(f,req);
}
この場合、オブジェクトはXMLになりリターンされますが、どこにリターンしましょうか？
答えはページではなく、MappingされたvalueサイトにXMLをリターンします。
先ほど、#AJAXからリクエストパラメータであるf_price から動的Queryが適用できる世設定したので、以下のようにURLを検索すれば、XMLデーターを見ることができます。
....../fruit.getPriceFruitXML?f_price=5000
ここの5000は入力ボターンからではなく、手で直接打つしかありません。
inputから入力したf_priceはMyBatisからDTOに入ることで役割を果たし、pageではなく、XML
の#{f_price}で終わりらしいです。
詳しい原理は理解しておりませんが、input buttonから入力したprice以下の情報を見るためにはVIEWから何かをする必要があります。
View
この時、使うのがAJAXで、xml, jsonなどのデーターをサイトにもってくる機能です。
<input id="searchinput" name="f_price"> <button id="btn2">Send Price</button>
ここの場合はidとnameを両方活用します。idからはvalueを持ってきてから、nameからはparameterに付ける必要があります。
$('#btn2').click(() => {
let frVal = $("#searchinput").val();
$.ajax({
url:'fruit.getPriceFruitXML',
data: {f_price: frVal},
success : function(maketable){
$("#fruitTbl").empty();
$(maketable).find('fruit').each((i,f) => {
$('#fruitTbl')
.append('<tr><td>'
+ $(f).find('f_name').text()
+ '</td><td>'
+ $(f).find('f_price').text()
+'</td></tr>');
});
}
});
});
AJAXに入力した、URL(fruit.getPriceFruitXML)＋ Dataは (f_price: frVal)は以下のように変換されます。
input: frValを入力した後、ボターンを押す
＝＞
/fruit.getPriceFruitXML?f_price=frVal
/と?はajaxでは自動的に！
このようなメカニズムで、DBからのAPIを持ってくることができます。直接DBにアクセスすることは保安にも問題になるので、実務ではJsonをAPIに作成して、このように非同期処理でデーターを持ってくるようです。
以上です！
Discussion