|
|
머리말
JSON(Javascript Object Notation) 은 이름 그대로 자바스크립트에서 객체를 표현하는 방법 입니다.
ASP.NET MVC 는 마이크로소프트에서 만든 서버 개발 프레임워크 입니다. MVC(Model-View-Controller) 패턴을 따릅니다. MVC 패턴을 이루는 요소는 모델, 뷰, 컨트롤러 입니다.
시작하기
ASP.NET MVC3 의 응용프로그램을 생성한다. HomeController.cs 파일에서 마우스 우측을 하여 뷰를 추가한다.
생성을 하면 /View/Home/Index.cshtml 의 파일이 생성돼 있습니다. 이것은 HomeController 클래스의 Index() 메서드 위치와 일치합니다.
public ActionResult MyFirstStringAction()
{
return Content("<h1>Hello ASP.NET MVC</h1>");
}
http://localhost:4474/home/MyFirstStringAction 로 접속하면 수행결과를 확인 할 수 있습니다.
간단한 html 태그를 제공하는 웹 서비스를 만들어 보았습니다. 액션 MyFirstStringAction 을 만들고 문자열을 Content() 매서드에 매개 변수로 넣어 리턴합니다.
JSON 웹서비스만들기
public ActionResult MyFirstJsonAction()
{
var willReturn = new { name = "제시카", gender = "여자", part = "보컬" };
return Json(willReturn, JsonRequestBehavior.AllowGet);
}
객체를 만들고 Json() 메서드를 사용하여 리턴합니다.
리턴결과
http://localhost:4474/home/ MyFirstJsonAction 로 접속하면 수행결과를 확인 할 수 있습니다.
{"name":"제시카","gender":"여자","part":"보컬"}
XML 웹서비스 만들기
public ActionResult MyFirstXMLAction()
{
var willReturn = "";
willReturn += "<people>";
willReturn += " <person>";
willReturn += " <name>제시카</name>";
willReturn += " <gender>여자</gender>";
willReturn += " <part>보컬</part>";
willReturn += " </person>";
willReturn += " <person>";
willReturn += " <name>이하니</name>";
willReturn += " <gender>여자</gender>";
willReturn += " <part>미스코리아</part>";
willReturn += " </person>";
willReturn += " <person>";
willReturn += " <name>강호동</name>";
willReturn += " <gender>남자</gender>";
willReturn += " <part>MC</part>";
willReturn += " </person>";
willReturn += "</people>";
return Content(willReturn, "text/xml");
}
JSON 만들때 보다 어렵거나 복잡하지 않다.
요청 매개변수 처리
public ActionResult ActionWithData()
{
var name = Request["name"];
var age = Request["age"];
return Content("<h1>" + name + ":" + age + "</h1>");
}
프로젝트 실행시 : http://localhost:4474/home/ActionWithData?name=parkkwangho&age=31
name과 age의 값을 전송하여 주어야 합니다.
실제로 호출하여 사용하기
Index.cshtml 소스코드
@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
<title>Index</title>
<script>
var request = new XMLHttpRequest();
request.open('GET', '/HOME/ActionWithData?name=parkkwangho&age=31', false);
//Ajax 를 수행
request.send();
//출력
alert(request.responseText);
</script>
</head>
<body>
</body>
</html>
실행결과는 전송한 name, age 에 따라서 리턴된 값을 확인할 수 있다.
모든 브라우저에서 동작하는 Ajax 요청 만들기
<script>
// XMLHttpRequest 객체를 생성하는 함수
// 현존하는 모든 브라우저에서 동작합니다.
function createRequest() {
var request;
try {
request = new XMLHttpRequest();
} catch (exception) {
try {
request = new ActiveXObject('Msxml2.XMLHTTP');
} catch (innerException) {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
}
return request;
}
// 페이지 로드시 수행
window.onload = function () {
// 객체를 생성
var request = new createRequest();
request.open('GET', '/HOME/ActionWithData?name=parkkwangho&age=31', false);
//Ajax 를 수행
request.send();
//출력
alert(request.responseText);
}
</script>
마무리
다음에는 동기방식과 비동기 방식으로 구현하는 것을 해보자!~
2012/09/03 - [개발언어/ASP.NET] - jQuery 비동기 처리
|
|
