div 2개에 AJAX동시적용
myajax.js라는 파일 안에 sendGet(‘divA’,’price.jsp’,’price=3000′) 라는 자바스크립트 함수를 만들어봤다. 이 함수는 ‘price=3000’을 get방식으로 넘겨줬을 때, ‘price.jsp’를 ‘divA’라는 div 안에 ajax방식으로 출력해주는 함수이다.
그런데 이 메소드에는 문제가 하나 있다.
만약 sendGet(‘divA’,’price.jsp’,’price=3000′) 함수와 sendGet(‘divB’,’price.jsp’,’price=2500′) 함수 두 개가 있다고 하자. 두 함수를 각각 실행하면 제대로 돌아가지만, 연달아서 실행하면 실행되지 않는다. 다시 말해 function temp(){ }라는 함수를 만들어서 그 안에 두 줄을 연달아 넣는다면, 한 쪽 div에는 출력되지만 다른 쪽 div에는 출력되지 않는다.
이를 해결하기 위해 만든 메소드가 sendGet2 이다.
sendGet2(‘divA’,’divB’,’price.jsp’,’price=3000′)라는 자바스크립트 함수를 실행했을 때, divA와 divB 안에 같은 파일을 ajax로 뿌려준다.
index.jsp
|
<%@ page language=”java” contentType=”text/html; charset=EUC-KR”
pageEncoding=”EUC-KR”%>
<!DOCTYPE html>
<html>
<head>
<meta charset=”EUC-KR”>
<title>Insert title here</title>
<script src=”myajax.js” type=”text/javascript”></script>
<script type=”text/javascript”>
function up(){
document.frm.price.value=parseInt(document.frm.price.value)+1;//parseInt: 정수화
}
function down(){
document.frm.price.value=parseInt(document.frm.price.value)-1;//parseInt: 정수화
}
</script>
</head>
<body>
<a href=”javascript:sendGet2(‘divA’,’divB’,’price.jsp’,’price=’+document.frm.price.value)”>두 칸 동시출력</a>
<p><p><p>
<form name=”frm”>
<input type=”text” name=”price” value=”2015″>
<a href=”javascript:up()”>UP</a>
<a href=”javascript:down()”>DOWN</a>
</form>
<p><p><p>
<div id=”divA” style=”border:1px solid #000000; width:50%; display:table-cell;”></div>
<div id=”divB” style=”border:1px solid #000000; width:50%; display:table-cell;”></div>
<p><p><p>
<a href=”javascript:sendGet(‘divA’,’price.jsp’,’price=’+document.frm.price.value)”>왼쪽만 대입</a>
<a href=”javascript:sendGet(‘divB’,’price.jsp’,’price=’+document.frm.price.value)”>오른쪽만 대입</a>
</body>
</html>
|
price.jsp
|
<%@ page language=”java” contentType=”text/html; charset=EUC-KR”
pageEncoding=”EUC-KR”%>
<%@ taglib prefix=”c” uri=”http://java.sun.com/jsp/jstl/core” %>
<c:set var=”price” value=”${param.price}”/>
<!DOCTYPE html>
<html>
<head>
<meta charset=”EUC-KR”>
<title>Insert title here</title>
</head>
<body>
가격은 ${price}입니다.
</body>
</html>
|
myajax.js
|
var httpRequest=null;
var pView=null;
var pView2=null;
function createHttpRequest(){
if(window.ActiveXObject) //IE
{ return new ActiveXObject(“Msxml2.XMLHTTP”); }
else if(window.XMLHttpRequest)//Crome,FireFox
{ return new XMLHttpRequest(); }
else//NOT SUPPORT
{ return null; }
}
//포스트
function sendPost(divId,pFile,pValue){
httpRequest=createHttpRequest();
httpRequest.open(“POST”,pFile,true);
httpRequest.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
httpRequest.send(pValue); //id=aaa&pwd=1234
pView=divId;
httpRequest.onreadystatechange=pResult;
}
//겟
function sendGet(divId,pFile,pValue){
httpRequest=createHttpRequest();
if(pValue==null||pValue==””){
httpRequest.open(“GET”,pFile,true);
}
else{
httpRequest.open(“GET”,pFile+”?”+pValue,true);}//id=aaa&pwd=1234
httpRequest.send(null);
pView=divId;
httpRequest.onreadystatechange=pResult;
}
//결과를 div에 출력
function pResult(){
if(httpRequest.readyState==4){
if(httpRequest.status==200){
var div=document.getElementById(pView);
div.innerHTML=httpRequest.responseText;
}
}
}
////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
//포스트: div 2개에 출력하기 위한 메소드
function sendPost2(divId1,divId2,pFile,pValue){
alert(“divId1” + “divId2” + “pFile” + “pValue”);
httpRequest=createHttpRequest();
httpRequest.open(“POST”,pFile,true);
httpRequest.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
httpRequest.send(pValue); //id=aaa&pwd=1234
pView=divId1;
pView2=divId2;
httpRequest.onreadystatechange=pResult2;
}
//겟: div 2개에 출력하기 위한 메소드
function sendGet2(divId1,divId2,pFile,pValue){
httpRequest=createHttpRequest();
if(pValue==null||pValue==””){
httpRequest.open(“GET”,pFile,true);
}
else{
httpRequest.open(“GET”,pFile+”?”+pValue,true);}//id=aaa&pwd=1234
httpRequest.send(null);
pView=divId1;
pView2=divId2;
httpRequest.onreadystatechange=pResult2;
}
//div 2개에 결과출력
function pResult2(){
if(httpRequest.readyState==4){
if(httpRequest.status==200){
var div=document.getElementById(pView);
div.innerHTML=httpRequest.responseText;
var div=document.getElementById(pView2);
div.innerHTML=httpRequest.responseText;
}
}
}
|