본문 바로가기
개발언어/ASP.NET

[ASP.NET MVC] jQuery 비동기 처리

by 엔돌슨 2012. 9. 3.
반응형
jQuery 비동기 처리


<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.onreadystatechange = function (event) {

                if (request.readyState == 4) { //모든 데이터를 받음

                    if (request.status == 200) { // 2XX 성공

                        document.body.innerHTML = request.responseText;

                    }

                }

            };

            request.open('GET', '/HOME/ActionWithData?name=parkkwangho&age=31', true);

            request.send(); //Ajax 를 수행

        };

    </script>


비동기 처리로 웹서비스 호출

결과 :


        // 페이지 로드시 수행

        window.onload = function () {

            // 객체를 생성

            var request = new createRequest();


            // 비동기화 처리

            request.onreadystatechange = function (event) {

                if (request.readyState == 4) { //모든 데이터를 받음

                    if (request.status == 200) { // 2XX 성공

                        var json = eval('(' + request.responseText + ')');

                        var willIn = '';

                        for (var i in json) {

                            willIn += '<h1>' + i + ':' + json[i] + '</h1>';

                        }

                        document.body.innerHTML = willIn;

                    }

                }

            };

            request.open('GET', '/HOME/MyFirstJSONAction', true);

            request.send(); //Ajax 를 수행

        };



수행결과

name:제시카

gender:여자

part:보컬


xml 데이타를 적절하게 받아서 처리하는 코드입니다.



Ajax 웹서비스 호출하기

ajax 호출을 합니다.

        $(document).ready(function () {

            $.ajax('/Home/MyFirstStringAction', {

                success: function (data) {

                    $('body').append(data);

                }

            });

        });


결과

Hello ASP.NET MVC


Ajax 호출 구조

            $.ajax({

                url: '/Home/ActionWithData',

                data: { name: 'parkkwangho', age: 31 },

                success: function (data) {

                    $('body').append(data);

                }

            });




DataBase 연결하기




실무에서 로컬데이타 베이스를 사용하지 않지만, 데모를 위해서 사용하였습니다. 데이타베이스를 추가하고 오른쪽 서버탐색기에서 DB에 Table을 추가 하여 줍니다. 

People 테이블을 추가한 후 Id 컬럼은 기본키로 지정을 하여야  ASP.NTE MVC3에서 데이타를 가져오게 됩니다. 또한 ID사용 속성에서 "예"로 설정하여 데이타가 추가시 자동인데싱 되게 설정합니다.


그리고 Models 에 LINQ to SQL 를 추가하여 줍니다. PeopleDataClasses 라고 파일을 생성합니다. People 데이타베이스를 드래그 하여 추가하면 속성에 PeopleDataClassesDataContent 라고 나옵니다.

(Peopledataclasses 를 선택후 속성의 Name을 확인합니다.)

PeopleDataClassesDataContent   이름을  간편하게 PeopleDB 로 변경하여 사용합니다.


코드

        public ActionResult GetPeopleJSON()

        {

            var peopleDB = new PeopleDB();

            return Json(peopleDB.People, JsonRequestBehavior.AllowGet);

        }


데이타의 내용을 JSON 형태로 리턴 받을 수 있습니다. 


결과

[{"Id":1,"Name":"김연아","Gender":"여","Region":"미국 로스엔젤레스","BloodType":"B"},{"Id":2,"Name":"김아름","Gender":"여","Region":"서울 강서구","BloodType":"AB"},{"Id":3,"Name":"차인성","Gender":"남","Region":"서울 영등포","BloodType":"O"},{"Id":4,"Name":"김아링","Gender":"여","Region":"서울 서초구","BloodType":"B"},{"Id":5,"Name":"연수지","Gender":"여","Region":"부산 해운대","BloodType":"O"},{"Id":6,"Name":"김차성","Gender":"남","Region":"도쿄","BloodType":"AB"},{"Id":7,"Name":"아랑리","Gender":"여","Region":"일본","BloodType":"O"},{"Id":8,"Name":"아알안","Gender":"여","Region":"서울","BloodType":"B"},{"Id":9,"Name":"김타라","Gender":"남","Region":"서울","BloodType":"B"},{"Id":10,"Name":"차알아","Gender":"남","Region":"서울","BloodType":"B"},{"Id":11,"Name":"니라안","Gender":"남","Region":"서울","BloodType":"A"},{"Id":12,"Name":"앙갱나","Gender":"남","Region":"일본","BloodType":"A"},{"Id":13,"Name":"김알니","Gender":"여","Region":"중국","BloodType":"AB"},{"Id":14,"Name":"박앙라","Gender":"여","Region":"도쿄","BloodType":"O"},{"Id":15,"Name":"사하람","Gender":"남","Region":"큐슈","BloodType":"O"},{"Id":16,"Name":"김사랑","Gender":"남","Region":"서울 인사동","BloodType":"A"},{"Id":17,"Name":"짐케리","Gender":"여","Region":"서울 서초","BloodType":"A"},{"Id":18,"Name":"차랑니","Gender":"여","Region":"서울 강남","BloodType":"O"},{"Id":19,"Name":"소인르","Gender":"남","Region":"서울 강남","BloodType":"A"},{"Id":20,"Name":"소은미","Gender":"남","Region":"서울 영등포","BloodType":"O"},{"Id":21,"Name":"인성림","Gender":"여","Region":"서울 강서구","BloodType":"A"}]






데이타 입력처리


데이타 입력 수행하기
http://localhost:4474/Home/InsertPerson?name=o&gender=여&region=o=bloodtype=ab

// 데이타를 가져옵니다.

        public ActionResult GetPeopleJSON()

        {

            var peopleDB = new PeopleDB();

            return Json(peopleDB.People, JsonRequestBehavior.AllowGet);

        }


        // 데이타추가

        public ActionResult InsertPerson(string name, string gender, string region, string bloodType)

        {

            var willAdd = new People();

            willAdd.Name = name;

            willAdd.Gender = gender;

            willAdd.Region = region;

            willAdd.BloodType = bloodType;


            try

            {

                var peopleDB = new PeopleDB();

                peopleDB.People.InsertOnSubmit(willAdd);

                peopleDB.SubmitChanges();

                return Content("INSERT SUCCESS");

            }

            catch (Exception ex)

            {

                // 데이타 입력에 실패할 경우

                return HttpNotFound();

            }

        }


        //데이타 삭제

        public ActionResult DeletePerson(int id)

        {

            try

            {

                var peopleDB = new PeopleDB();

                var willDelete = peopleDB.People.Single(x => x.Id == id);


                peopleDB.People.DeleteOnSubmit(willDelete);

                peopleDB.SubmitChanges();

                return Content("DELETE SUCCESS");

            }

            catch (Exception ex)

            {

                return HttpNotFound();

            }

        }


        public ActionResult UpdataPerson(int id, string region)

        {

            try

            {

                var peopleDB = new PeopleDB();

                var willUpdata = peopleDB.People.Single(x => x.Id == id);


                willUpdata.Region = region;

                peopleDB.SubmitChanges();

                return Content("Update SUCCESS");

            }

            catch

            {

                return HttpNotFound();

            }

        }