posted by 방랑군 2012. 1. 7. 22:04




1. 
    <script type="text/javascript">
        $(document).ready(function () {
            $("#button").click(function () {
                $.ajax({
                    type: "post",
                    url: "Service1.asmx/GetDataset",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    dataFilter: function (data) {
                        //debugger
                        alert(data);
                        var msg;
                        if (typeof (JSON) !== 'undefined' && typeof (JSON.parse) === 'function') {
                            msg = JSON.parse(data);
                        } else {
                            msg = eval('(' + data + ')');
                        }
                        if (msg.hasOwnProperty('d')) {
                            return msg.d;
                        } else {
                            return msg;
                        }
                    },
                    success: function (data) {
                        //debugger
                        alert(data);
                        $("#groupName").text(data.groupName);
                        $("#memberList").text(data.memberList);
                    }
                });
            });
        });
    </script>

2.
    // ASP.NET AJAX를 사용하여 스크립트에서 이 웹 서비스를 호출하려면 다음 줄의 주석 처리를 제거합니다. 
    [System.Web.Script.Services.ScriptService]

.
.
 
        [WebMethod]
        public string GetDataset()
        {            
            DataSet ds = GetDS();
            JavaScriptSerializer jss = new JavaScriptSerializer();
            DataSetConverter dsc = new DataSetConverter();
            IDictionary<string, object> retVal = dsc.Serialize(ds, jss);
            string result = jss.Serialize(retVal);
            return result;
        } 
        private DataSet GetDS()
        {
            DataSet ds;

            VTFramework.DB.vCS_DB_MSSQL db = new VTFramework.DB.vCS_DB_MSSQL("data source='localhost';initial catalog='REQUEST_MANAGE';password='simple2009';user id='sa';");

            db.mLoad();

            ds = db.mGetEx("SELECT * from [REQUEST_MANAGE].[dbo].[USER_MANAGE]");

            db.mDispose();

            return ds;
        }

3.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using System.Web.Script.Serialization;
using System.Data;
using System.Collections;
using System.Collections.ObjectModel;

namespace AjaxWithJson
{
    public class DataSetConverter : JavaScriptConverter
    {
        public override IEnumerable<Type> SupportedTypes
        {
            //Define the DataTable as a supported type.
            get { return new ReadOnlyCollection<Type>(new List<Type>(new Type[] { typeof(DataSet) })); }
        }
        public override IDictionary<string, object> Serialize(object obj, JavaScriptSerializer serializer)
        {
            Dictionary<string, object> dtDic = new Dictionary<string, object>();
            DataSet ds = obj as DataSet;
            foreach (DataTable dt in ds.Tables)
            {
                // Create the representation.
                Dictionary<string, object> rowDic = new Dictionary<string, object>();
                int i = 0;
                foreach (DataRow row in dt.Rows)
                {
                    //Add each entry to the dictionary.
                    Dictionary<string, object> colDic = new Dictionary<string, object>();
                    foreach (DataColumn col in row.Table.Columns)
                    {
                        colDic.Add(col.ColumnName, row[col]);
                    }
                    rowDic.Add("row" + (i++).ToString(), colDic);
                }
                dtDic.Add(dt.TableName, rowDic);
            }
            return dtDic;
        }
        public override object Deserialize(IDictionary<string, object> dictionary, Type type, JavaScriptSerializer serializer)
        {
            if (dictionary == null)
                throw new ArgumentNullException("dictionary");
            if (type == typeof(DataTable))
            {
                // Create the instance to deserialize into.
                DataTable list = new DataTable();
                // Deserialize the ListItemCollection's items.
                ArrayList itemsList = (ArrayList)dictionary["Rows"];
                for (int i = 0; i < itemsList.Count; i++)
                    list.Rows.Add(serializer.ConvertToType<DataRow>(itemsList[i]));
                return list;
            }
            return null;
        }
    }
}


4. ASHX

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;
using System.Web.SessionState;

namespace AjaxWithJson
{
    /// <summary>
    /// ConfirmBitmapHandler의 요약 설명입니다.
    /// </summary>
    public class ConfirmBitmapHandler : IHttpHandler, IRequiresSessionState 
    {

        public void ProcessRequest(HttpContext context)
        {
           // context.Response.ContentType = "text/plain";
           // context.Response.Write("Hello World");

                context.Response.ContentType = "image/jpeg";
               // 이미지 사이즈
               int lenX = 80, lenY = 30;     
               Bitmap bm              = new Bitmap( lenX, lenY );
               Graphics g             = Graphics.FromImage( bm );
               // 배경으로 그라데이션 처리
               LinearGradientBrush bgGr = new LinearGradientBrush(
                       new Point(0,0),
                       new Point(lenX, lenY),
                       Color.Blue,
                       Color.Black);                             

               g.FillRectangle( bgGr, 0, 0, lenX, lenY );              

               // 5자리 숫자의 난수를 발생하여 텍스트를 만든다  
               string text = string.Empty;
               Random rnd = new Random();
               for(int i=0; i<5; i++)
               {
                       text += rnd.Next(9).ToString();
               }

               // 텍스트를 그린다.
               Brush textBrush        = new SolidBrush( Color.White );
               g.DrawString( text, new Font("굴림", 15), textBrush, 10, 5, StringFormat.GenericDefault );              

               // 스트림에 비트맵을 쓴다.
               bm.Save( context.Response.OutputStream, ImageFormat.Jpeg );               

               // 5자리 숫자를 세션에 담는다.
               context.Session["ValidateString"] = text;
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }



-------------------------------------------------------
 
posted by 방랑군 2012. 1. 7. 20:55

출처 :  http://blog.naver.com/PostView.nhn?blogId=inidu2&logNo=110077631974&categoryNo=0&parentCategoryNo=33&viewDate=&currentPage=2&postListTopCurrentPage=1&userTopListOpen=true&userTopListCount=10&userTopListManageOpen=false&userTopListCurrentPage=2

닷넷에서 jquery를 사용 $.post() 사용하여 ajax로 처리를 하는데 ashx에서 세션 생성이 안되고 읽기만 가능하도록 되어 있어서 한참 동안 삽질.

네이년에도 안나와서 구글 찾아보니 나온다.

 

 

A reminder to myself and others, when you want to get access to your Session State from an ASHX or HttpHandler, you need to implement IReadOnlySessionState:

<% @ webhandler language="C#" class="DownloadHandler" %>

using System;
using System.Web;
using System.Web.SessionState;

public class DownloadHandler : IHttpHandler, IReadOnlySessionState
{
   public bool IsReusable { get { return true; } }
   
   public void ProcessRequest(HttpContext ctx)
   {
       ctx.Response.Write(ctx.Session["fred"]);
   }
}

 

세션을 사용하려면 IReadOnlySessionState, IRequiresSessionState 를 써야 한다.

 

원문 : http://www.hanselman.com/blog/GettingSessionStateInHttpHandlersASHXFiles.aspx

 
posted by 방랑군 2012. 1. 7. 20:53

출처 :  http://blog.naver.com/PostView.nhn?blogId=inidu2&logNo=110093831632&categoryNo=0&parentCategoryNo=33&viewDate=&currentPage=1&postListTopCurrentPage=1&userTopListOpen=true&userTopListCount=10&userTopListManageOpen=false&userTopListCurrentPage=1


환경: jQuery-1.4.2, ASP.NET 2.0, VISUAL STUDIO 2008

파일 첨부: Calling Web Method and Web Service with jQuery.zip

 

jQuery가 제공하는 jQuery.ajax() API를 사용하면 ASP.NET Ajax를 사용하여 웹 서비스나 웹 메서드를 호출 하는 코드를 jQuery를 통하여 구현이 가능하다. (ScriptManager 컨트롤을 사용 하지 않아도 된다)

jQuery.ajax() API는 내부적으로 Ajax(Asynchronous HTTP) 요청을 수행하며 매개변수를 통하여 post get 방식 호출 모두 가능 하다.

 

문법은 아래와 같으며 자세한 내용은 jQuery 사이트의 API 부분을 살펴 보자.

 

 $.ajax(options)

 요청의 생성 방법과 통보 받을 콜백을 제어하고자 전달된 options을 사용하여 Ajax 요청을 전송 한다.

 

 매개변수

 options   (Object) 요청에 대한 매개변수를 정의하는 프로퍼티를 소유한 객체 인스턴스

 

 반환값

 XHR

 

Options 매개변수는 이 함수의 동작을 제어하는 데 다양한 범위의 값을 명시할 수 있다. 모두 살펴 보는 것 보다 자주 쓰이는 항목을 위주로 설명을 하도록 하겠다.

이름

 타입

 설명

 url

  String

  요청 URL

 type

  String

  사용할 HTTP 메서드. 일반적으로 POST나 GET을 사용한다.

 data

  Object

  요청에 전달되는 프로퍼티를 가진 객체. GET 요청이면 데이터는 쿼리 문자열로 제공된다. POST 요청이면 데이터는 요청의 본문으로 제공된다.

 dataType

  String

  응답의 결과로 반환되는 데이터의 종류를 식별하는 키워드. 유효한 값은 다음과 같다. xml, html, json, jsonp, script, text

 timeout

  Number

 Ajax 요청의 제한시간을 밀리초 단위로 설정한다.

 contentType

  String

 요청에 명시되는 콘텐츠 타입.

 success

  Function

 응답이 성공 상태 코드를 반환하면 호출 되는 함수.

 error

  Function

 응답이 에러 상태 코드를 반환하면 호출 되는 함수.

 complete

  Function

 요칭이 완료 되면 호출 되는 함수.

 

 

이제부터 실제 코드를 구현 하여 보자.

우선 웹 사이트를 하나 생성 하고 아래와 같은 과정을 따라 하여 보자.

 

1. jQuery를 사용하여 Page Method 호출하기.

예제 코드: CallingWebMethod.aspx

 

생성 된 웹 사이트에 Page Method 호출 코드를 구현 할 페이지를 하나 만든다.

나는 CallingWebMethod.aspx 페이지를 생성 하였다.

jQuery 라이브러리를 참조 하여야 한다<head> 영역에 아래와 같은 코드를 추가한다.

 

    

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"type="text/javascript"></script>

 

 

코드 비하인드(CallingWebMethod.aspx.cs)로 넘어가서 ASP.NET Ajax를 이용하여 페이지 메서드를 호출 할 때처럼 static으로 메서드를 하나 선언 하고 [WebMethod] Attribute를 부여 한다System.Web.Services네임 스페이스도 추가 하여 주어야 한다.

 

CallingWebMethod.aspx.cs

 

using System.Web.Services;

 

public partial class CallingWebMethod : System.Web.UI.Page

{

[WebMethod]

    public static string GetDate()

    {

        return DateTime.Now.ToString();

    }

}

 

 

CallingWebMethod.aspx 페이지로 돌아와 위의 GetDate() 메서드를 호출 하고 결과를 표시할 UI 영역을 작성 하도록 하자.

날짜를 가져와 표시할 <div> HTML 컨트롤을 하나 배치 한다.

 

CallingWebMethod.aspx

 

<div id="Result">

        Click here for the time.   

</div>

 

 

이제는 실제로 jQuery를 사용하여 Page Method를 호출하고 위의 <div> 에 결과 값을 표시 하는 코드를 자바스크립트로 작성 하도록 하겠다.

 

CallingWebMethod.aspx

 

<script language="javascript" type="text/javascript">

        $(document).ready(function() {

            // Result div onclick 핸들러를 추가하고 핸들러 코드는 페이지 메서드를 호츨 한다.

            $("#Result").click(function() {

                $.ajax({

                    type: "POST",

                    url: "CallingWebMethod.aspx/GetDate",

                    data: "{}",

                    contentType: "application/json; charset=utf-8",

                    dataType: "json",

                    success: function(msg) {

                        // 페이지 메서드 반환 값을 Result div에 삽입한다.

                        $("#Result").text(msg.d);

                    }

                });

            });

        });

</script>

 

 

위의 코드가 복잡해 보일지는 몰라도 사실은 매우 간단하다.

주의해서 보야 할 부분은 $.ajax({ ... }); 이 부분인데 내부 매개 변수는 모두 jQuery.ajax(settings) APIsettings 에 해당 하는 부분이다.

url 옵션에 정확한 페이지명 (페이지명/메소드명)만 지정 하여 준다면 정상적으로 동작 할 것이며 success옵션에 호출 성공시에 처리할 코드를 작성 하여 주면 된다.

 

전체 코드는 첨부 파일의 CallingWebMethod.aspx 페이지를 확인 하여 보자.

 

 

2. jQuery를 사용하여 Web Service 호출하기.

예제 코드CallingWebService.aspx

 

jQuery를 사용하여 웹 서비스를 호출 하는 것 또한 위에서 살펴본 페이지 메서드와 크게 다르지 않으며 다만url 영역에 웹서비스 주소만 적절하게 넘겨 주면 된다.

 

생성 된 웹 사이트에 Web Service 호출 코드를 구현 할 페이지를 하나 만든다.

나는 CallingWebService.aspx 페이지를 생성 하였다.

jQuery 라이브러리를 참조 하는 코드나 UI를 담당할 div는 동일 하다.

 

이제 호출 대상이 될 웹 서비스를 생성 하도록 한다웹 사이트에 WebService.asmx를 추가 한다.

WebService.cs를 열고 호출할 메서드 코드를 작성 한다.

 

메서드 명은 동일 하며 [WebMethod] Attribute 또한 부여한다단 이 웹 서비스를 ajax가 호출 할 수 있도록 하기 위해서는 웹 서비스 생성시에 적용 되어 있는 주석 부분을 제거 하여[System.Web.Script.Services.ScriptService속성이 활성화 되도록 하여야 한다.

 

WebService.cs

 

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

// ASP.NET AJAX를 사용하여 스크립트에서 이 웹 서비스를 호출하려면 다음 줄의 주석 처리를 제거합니다.

[System.Web.Script.Services.ScriptService]

public class WebService : System.Web.Services.WebService

{

    public WebService ()

{

        //디자인된 구성 요소를 사용하는 경우 다음 줄의 주석 처리를 제거합니다.

        //InitializeComponent();

    }

 

    [WebMethod]

    public string GetDate()

    {

        return DateTime.Now.ToString();

    }

}

 

 

CallingWebService.aspx 페이지로 돌아와 위 웹 서비스의 GetDate() 메서드를 호출 하는 코드를 작성 하자.

 

CallingWebService.aspx

 

<script language="javascript" type="text/javascript">

        $(document).ready(function() {

            // Result div onclick 핸들러를 추가하고 핸들러 코드는 웹서비스 메서드를 호츨 한다.

        $("#Result").click(function() {

                $.ajax({

                    type: "POST",

                    url: "WebService.asmx/GetDate",

                    data: "{}",

                    contentType: "application/json; charset=utf-8",

                    dataType: "json",

                    success: function(msg) {

                        // 페이지 메서드 반환 값을 Result div에 삽입한다.

                        $("#Result").text(msg.d);

                    }

                });

            });

        });

    </script>

 

 

코드는 url 옵션 영역을 제외 하고 jQuery를 사용하여 Page Method 호출하기에서 살펴 본 것과 거의 동일 하다.

url 옵션에 웹서비스명/메서드명으로 수정 된 것을 주의 깊게 보자.

 

 

이렇게 jQuery를 사용하여 직접 웹 서비스나 페이지 메서드를 호출 하면 약 100KB 이상의 자바스크립트 코드와 3개의 추가적인 HTTP 요청을 제거 할 수 있다.

 

 

위에서 작성 한 모든 코드를 파일 첨부 한다.

Calling Web Method and Web Service with jQuery.zip

 

Reference:

http://api.jquery.com/jQuery.ajax/

http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

http://encosia.com/2008/03/27/using-jquery-to-consume-aspnet-json-web-services/

 
posted by 방랑군 2012. 1. 7. 19:37

출처 :  http://inidu2.blog.me/110093858922

닷넷을 사용하면서 제일 불편하고 짜증나는 것 중에 하나가 쓸데없는 코드가 너무 많다는 것과 애매모호한 PostBack 이다.

jQuery를 사용하면서 그런 느낌은 더욱 심해졌다.

그래서 사용한 방식이 서버단 처리를 모두 제네릭 처리기로 하였는데 뭔가 다른 방법을 써 보고 싶었다.

MVC가 요즘 뜨는거 같아서 그거로 할까 알아봤지만 뷰가 완전히 독립된 것이 아닌 닷넷 코드 혼합이다.

 

내가 원하는 것은 닷넷 코드가 전혀 들어가지 않은 순수 html + javascript + css로만 구성된 뷰페이지를 구성하는 것이다.

그래서 나온 결론은 웹서비스!

하지만 웹서비스는 기본으로 XML을 지원한다.

JSON을 사용하는 방법을 찾아봤지만 희안하게 한글 자료가 별로 없다. (검색 능력이 떨어지는지 없을리가 없는데~)

암튼 힘들게 찾은 사이트 물론 영어다.

설명은 자세히 되어 있는거 같은데 해석이 안되니~ 다른 한글 자료 찾아보다가 마땅한게 없어서 그냥 영문 사이트 소스보면서 대충 이해했다.

 

생각했던 것 보다는 훨씬 간단했다.

웹서비스 사이트 하나 만들고 거기에 원하는 데이타 뿌려주면 된다.

초간단으로 만든 예제.

이번에도 걸그룹이다. 레인보우~

웹서비스에 Rainbow 클래스를 하나 만들고 GetMember 메소드를 통해서 그룹명과 멤버리스트를 json 형식으로 가져오는 것이다.

사용법만 알면 어려움이 없기 때문에 흐름만 알면 충분하다.

내용이 별로 없어서 이번에도 녹화.

설명글 10번 읽는것보다 작업 내용 한번 직접 보는게 빠르다.

 

닷넷 3.5 이상에서는 보안상 결과값이 {"d": "data"} 형태로 리턴된다. 따라서 스크립트로 처리할때 한번 필터링(dtaFilter) 해준다

 

 

Rainbow.html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Rainbow</title>
    
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {

            $("#button").click(function() {
                $.ajax({
                    type: "post",
                    url: "Service1.asmx/GetMember",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    dataFilter: function(data) {
                        var msg;
                        if (typeof (JSON) !== 'undefined' && typeof (JSON.parse) === 'function') {
                            msg = JSON.parse(data);
                        } else {
                            msg = eval('(' + data + ')');
                        }

                        if (msg.hasOwnProperty('d')) {
                            return msg.d;
                        } else {
                            return msg;
                        }
                    },
                    success: function(data) {
                        alert(data.groupName);
                        $("#groupName").text(data.groupName);
                        $("#memberList").text(data.memberList);
                    }
                });
            });
        });
    </script>
    
    <style type="text/css">
    #content { paddding:20px; }
    #groupName { font-weight:bold; font-size:20px; }
    #memberList { color:Blue; }
    </style>
</head>
<body>

    <div id="content">
        <div id="groupName">그룹명</div>
        <div id="memberList">멤버리스트</div>
        <input type="button" value="클릭!" id="button" />
    </div>
</body>
</html>

 

 

Service1.asmx.cs

기본 생성 코드에서   [System.Web.Script.Services.ScriptService] 이부분 주석을 풀어주면 json을 사용할 수 있다.

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace WebService2
{
    /// <summary>
    /// Service1의 요약 설명입니다.
    /// </summary>
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // ASP.NET AJAX를 사용하여 스크립트에서 이 웹 서비스를 호출하려면 다음 줄의 주석 처리를 제거합니다. 
    [System.Web.Script.Services.ScriptService]
    public class Service1 : System.Web.Services.WebService
    {

        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }

        [WebMethod]
        public Rainbow GetMember()
        {
            Rainbow r = new Rainbow();

            r.groupName = "Rainbow";
            r.memberList = "김재경,고우리,김지숙,노을,오승아,정윤혜,조현영";

            return r;
        }
    }


    public class Rainbow
    {
        public string groupName;
        public string memberList;
    }
}


 
posted by 방랑군 2012. 1. 4. 04:24
출처 :  http://fallove.blog.me/70101916122

최근 이슈가 되고 있는 Json(Javascript Object Notation)은 텍스트 타입의 데이터 처리 방식에 있어서 XML을 대체할 만한 또 다른 형태이다.

장점이라면 XML DOM 호출에 비해 처리 속도가 뛰어나며, Cross-site Domian에서도 사용이 가능하다.

 

현재 관리하고 있는 사이트를 좀 더 가볍게 하기 위해 기존 XML이나 DataSet의 형태를 Json으로 작업하기 위해 관련 자료를 찾아보던 중

Codeplex에서 소개하고 있는 Json.NET framework을 사용해 보았다...

 

        public string Serialize(object value)
        {
            Type type = value.GetType();

            JsonSerializer json = new JsonSerializer();

            json.NullValueHandling = NullValueHandling.Ignore;

            json.ObjectCreationHandling = ObjectCreationHandling.Replace;
            json.MissingMemberHandling = MissingMemberHandling.Ignore;
            json.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;

 

            if (type == typeof(DataRow))
                json.Converters.Add(new DataRowConverter());
            else if (type == typeof(DataTable))
                json.Converters.Add(new DataTableConverter());
            else if (type == typeof(DataSet))
                json.Converters.Add(new DataSetConverter());

 

            StringWriter sw = new StringWriter();
            JsonTextWriter writer = new JsonTextWriter(sw);
            if (this.FormatJsonOutput)
                writer.Formatting = Formatting.Indented;
            else
                writer.Formatting = Formatting.None;

 

            writer.QuoteChar = '"';
            json.Serialize(writer, value);

 

            string output = sw.ToString();
            writer.Close();
            sw.Close();

 

            return output;
        }

        public object Deserialize(string jsonText, Type valueType)
        {
            JsonSerializer json = new JsonSerializer();

 

            json.NullValueHandling = NullValueHandling.Ignore;
            json.ObjectCreationHandling = ObjectCreationHandling.Replace;
            json.MissingMemberHandling = MissingMemberHandling.Ignore;
            json.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;

 

            StringReader sr = new StringReader(jsonText);
            JsonTextReader reader = new JsonTextReader(sr);
            object result = json.Deserialize(reader, valueType);
            reader.Close();

 

            return result;
        }

 

 

위 두개의 Method는 테이터 타입의 정보를 Json 형태로 변환이 가능하다.

예로 DataSet의 데이터를 Json으로 변환해 보자..

 public void SetJson()

{

    string JsonFileNM = "Test_JsonFile.jsf";

    string JsonString = string.Empty;

    DataSet ds =  null;

 

    ds = Test.GetData(...);

    JsonString = Serialize(ds);

     ....

     //*******************//

     // JsonFileNM로 파일 저장  //

     //*******************//

 ...

}

 

public DataSet GetJson(Sstring jsonText)

{

    DataSet ds = (DataSet)Deserialize(jsonText, typeof(DataSet)));

    return ds;

}

 

Json.NET framework의 특징은 다음과 같다.

-Flexible JSON serializer to convert .NET objects to JSON and back again
-LINQ to JSON for reading and writing JSON
-Writes indented, easy to read JSON
-Convert JSON to and from XML
-Supports Silverlight and Windows Phone

 

CodePlex에서 관련 소스를 download가 가능하다.

http://json.codeplex.com/

http://www.west-wind.com/Weblog/posts/471835.aspx

 
posted by 방랑군 2012. 1. 4. 03:12
출처 : http://yyman.tistory.com/232

오늘 새벽에 올린 '[ASP.NET] 웹 서비스 구현 하기(Ajax) - Javascript로 호출 - Hello World'에 이어서 JQuery(JSON)을 이용하여 데이터를 가져오는 방법에 대해 소개하겠습니다.

[보충 자료]

그 전에 앞서 이전에 소개해드린 강좌에서 빠진 내용을 하나 소개하겠습니다.
매개 변수입니다.

function chHelloWorld2() {
WebApplication1.WebService1.HelloWorld2($get("txtName").value, OnSuccess);
}

이 부분에서 $get("txtName").value, OnSuccess가 있습니다.

Web Service에서 실제로 구현된 코드는 아래와 같습니다.

[WebMethod]
public string HelloWorld2(string s1)
{
return "Hello World" + s1;
}

자바 스크립트 부분을 보충하자면 아래와 같이 정의할 수 있겠습니다.
네임스페이스.클래스.함수(매개 변수1, 매개 변수2, …, 매개 변수n, OnSuccess, OnFailure)
(Parameters: ControlId,Method name,Parameter1,Parameter2...n,CallbackMethod)



두 개의 입력을 받아서 출력하려면 웹 서비스를 다음과 같이 수정할 수 있습니다.

[WebMethod]
public string HelloWorld2(string s1, string2)
{
return "Hello World" + s1;
}

물론 클라이언트 부분에서도 수정해줘야 합니다.
Input(HTML 사용자 컨트롤)이 txtName1, txtName2라고 가정합니다.

function chHelloWorld2() {
WebApplication1.WebService1.HelloWorld2($get("txtName1").value, $get("txtName2").value, OnSuccess);
}



본론) JSON을 이용한 데이터 받기



위의 예제처럼 Alert을 이용하여 출력하는 예제입니다.

1. 솔루션 구성



WebService1.asmx과 index.aspx은 Visual Studio에서 생성할 수 있지만, 나머지 이상한 파일들은 별도로 내려받아야 합니다.


Jquery 홈페이지(http://www.jquery.com)에서 내려받으실 수 있습니다. 귀찮으신 분들은 첨부된 파일을 내려받으시면 됩니다.

2. WebService1.asmx 설정 하기

[WebService1.asmx.cs]


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
namespace WebApplication1
{
/// <summary>
/// WebService1의 요약 설명입니다.
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// ASP.NET AJAX를 사용하여 스크립트에서 이 웹 서비스를 호출하려면 다음 줄의 주석 처리를 제거합니다.
[System.Web.Script.Services.ScriptService]
public class WebService1 : System.Web.Services.WebService
{
[WebMethod]
public string HelloWorld3(string s1, string s2)
{
return s1 + " " + s2;
}
}
}


[WebService1.asmx]

<%@ WebService Language="C#" CodeBehind="WebService1.asmx.cs" Class="WebApplication1.WebService1" %>

3. Index.aspx 파일 설정 하기

[index.aspx]


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="WebApplication1.index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-1.4.4.min.js" type="text/javascript">
</script>
<script src="js/jquery-ui-1.8.8.custom.min.js" type="text/javascript">
</script>

<script language="javascript" type="text/javascript">
function HelloQuery() {
$.ajax({
type: "POST",
url: "
http://localhost:50000/WebService1.asmx/HelloWorld3",
data: '{"s1":"' + $get("txtName1").value + '", "s2":"' + $get("txtName2").value + '"}',
processData: false,
contentType: "Application/json; charset=utf-8",
dataType: "json",
success: function (data) {
alert(data.d);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input name="txtName1" id="txtName1" type="text" />
<input name="txtName2" id="txtName2" type="text" />
<a href="#" onclick="HelloQuery()">TEST</a>
</div>
<asp:ScriptManager runat="server">
<Services>
<asp:ServiceReference Path="~/WebService1.asmx" />
</Services>
</asp:ScriptManager>
</form>
</body>
</html>

http://localhost:50000/WebService1.asmx/HelloWorld3

선언된 파일의 주소를 모르시면 본인이 만드신 ASMX파일을 접속하셔서 확인하셔도 됩니다.

* 구문 확대해서 살펴보기

data: '{"s1":"' + $get("txtName1").value + '", "s2":"' + $get("txtName2").value + '"}',


data : ' { " 매개변수1 " : " ' + $get("클라이언트 input name 값").value + ' " ,
" 매개변수2 " : " ' + $get("클라이언트 input name 값").value + ' " ,


" 매개변수n " : " ' + $get("클라이언트 input name 값").value + ' " } '


ex) 매개 변수가 하나일 때

data:'{"s1":"' + $get("클라이언트 input name 값").value + '"}'



사용자 환경에 맞게 적절히 연구하시어 잘 사용하시기 바라는 마음으로 글을 정리해봅니다.
글을 정리하면서 느낀 것은 Visual Studio.NET에 맞게 설계된 것과 공개 소스에 맞게 설계된 것의 차이는 엄청난 자본의 투입으로 말미암아 편리한 것이지만, 한 소프트웨어 환경에서 구현해야만 하는 불편한 점이 있습니다.
이식성은 Jquery 아저씨가 확실히 좋습니다.
아무쪼록 Jquery를 활용하는 것과 웹 서비스의 Hello World 강좌를 이것으로 정리합니다.



참고 자료) http://alexandershapovalov.com/how-to-call-wcf-services-from-javascript-jquery-and-aspnet-ajax-39/ 
posted by 방랑군 2012. 1. 4. 02:43
출처: http://blog.naver.com/PostView.nhn?blogId=kimgas2000&logNo=90132135285


jQuery.ajax (options)

HTTP 통신에서 페이지를로드합니다. 이 함수는 jQuery의 AJAX 통신의 기본 부분에서 실제로 $. get및 $. post 같은 함수를 사용하는 것이 쉽게 구현할 수 있습니다. 그러나 이러한 추상화된 함수는 구현의 용이성과 교환에 오류시 콜백과 같은 복잡한 기능을 잃고 있습니다. 그런 처리를 구현하려면, 역시 핵심이다이 함수를 사용해야합니다. $. ajax 함수는 반환값으로 XMLHttpRequest 객체를 반환합니다. 대부분의 경우이 개체를 직접 조작하는 것은 없다고 생각되지만, 예를 들어 던져 버린 요청을 중단하는 경우 등, 필요하면 이용하십시오. 이 함수는 인수를 하나만 취하지만, 실제로는 해시에서 키 - 값 조합은 많은 옵션을받습니다. 다음에 그 목록을 싣고 있으므로 참고하시기 바랍니다.


async / boolean
비동기 통신 플래그. 기본값은 true (비동기 통신)에서 요청이 던져에서 응답할 때까지 사용자 에이전트는 비동기 처리를 계속합니다. false로 설정 (동기 통신)하면 통신에 응답이있을 때까지 브라우저는 잠겨 조작을 받아들이지 않을 것을주의하십시오.
beforeSend / function
AJAX에 의해 요청이 전송되기 전에 불리는 Ajax Event 입니다. 반환값을 false로 설정하면 AJAX 전송을 취소할 수 있습니다.
function (XMLHttpRequest) { 
this / / AJAX 전송 설정 옵션을 나타내는 개체
}
cache / boolean
jQuery 1.2. 초기값은 일반적으로 true이지만 dataType이 script의 경우에는 false입니다. 통신 결과를 캐시하지 않으에는 false로 설정하십시오.
complete / function
AJAX 통신 완료될 때 호출되는 함수입니다. success이나 error가 호출된 후에 호출되는 Ajax Event 입니다.
function (XMLHttpRequest, textStatus) { 
this / / AJAX 전송 설정 옵션을 나타내는 개체
}
contentType / string
서버에 데이터를 보낼 때 사용 content - type 헤더의 값입니다. 기본값은 "application / x - www - form - urlencoded"대부분의 경우이 설정으로 문제 없을 것입니다.
data / object, string
서버로 전송하는 값. 개체가 지정된 경우 쿼리 문자열로 변환되고 GET 요청으로 추가됩니다. 이 변환 처리에 대해서는, 후술하는 processData를 참조하십시오. 객체는 키와 값의 조합해야하지만, 만약 값이 배열이라면, jQuery는 같은 키를 가지는 여러 값으로 serialize합니다. 예를 들어 {foo : "bar1", "bar2"]}와 같이 지정된 경우, & foo = bar1 & foo = bar2처럼 조립할 수 있습니다.
dataFilter / function
기본 수준에서 XMLHttpRequest의 반환 데이터를 필터링합니다. 서버 로부터의 반환값을 청소하는 경우 등에 유용합니다. 함수는 첫번째 인수에 원시 데이터를 제 2 인수 dataType 값을받습니다. 필터링된 값을 반환 값으로 반환하십시오.
function (data, type) { 
/ / 필터링
/ / 마지막으로 청소 후에 데이터를 반환
return data;
}
dataType / string
서버에서 반환되는 데이터 형식을 지정합니다. 생략했을 경우는, jQuery이 MIME 타입 등을 보면서 자동으로 결정합니다. 지정 가능한 값은 다음과 같은 것입니다.
  • "xml": XML 문서
  • "html": HTML을 텍스트 데이터로. 여기에 script 태그가 포함된 경우 처리가 실행됩니다.
  • "script": JavaScript 코드를 텍스트 데이터로. cache 옵션 특히 지정이 없으면 캐시가 자동으로 비활성화됩니다. 원격 도메인에 대한 요청의 경우 POST는 GET으로 변환됩니다.
  • "json": JSON 형식 데이터로 평가하고 JavaScript의 개체로 변환합니다.
  • "jsonp": JSONP로 요청을 부르고 callback 매개 변수에 지정된 함수 회수 값을 JSON 데이터로 처리합니다. (jQuery 1.2 추가)
  • "text": 일반 텍스트.
dataType을 지정할 때는 몇 가지 가리키는 할 점이 있습니다. 아래의주의 1,2를 참조하십시오.
error / function
통신에 실패했을 때 호출되는 Ajax Event 입니다. 인수는 3 개로 차례 XMLHttpRequest 개체 오류 내용, 추가적인 예외 개체를받습니다. 제 2 인수에는 "timeout", "error", "notmodified" "parsererror"등이 돌아갑니다.
function (XMLHttpRequest, textStatus, errorThrown) { 
/ / 보통은 여기서 textStatus 및 errorThrown 값을보고 처리를 분리하거나
/ / 단순히 통신에 실패했을 때의 처리를 기술합니다.
this / / this는 다른 콜백 함수 마찬가지로 AJAX 통신할 때 옵션을 나타냅니다.
}
global / boolean
Ajax Events의 Global Events을 실행할지 여부를 지정합니다. 일반적으로 true이지만, 특별한 통신 false 수도 있습니다. 자세한 내용은 Ajax Events 를 참조하십시오.
ifModified / boolean
서버의 응답에 Last - Modified 헤더를보고, 전회 통신에서 변경이있는 경우에만 성공 상태를 반환합니다.
jsonp / string
jsonp 요청을 할 때 callback이 아닌 매개 변수이면 지정합니다. 예를 들어 {jsonp : 'onJsonPLoad'}로 지정하면 실제 요청은 onJsonPLoad = 함수 이름이 부여됩니다.
password / string
인증이 필요한 HTTP 통신시 암호를 지정합니다.
processData / boolean
data 지정한 개체를 쿼리 문자열로 변환할지 여부를 설정합니다. 기본값은 true로, 자동으로 "application / x - www - form - urlencoded"형식으로 변환합니다. DOMDocument 자체 등의 다른 형식으로 데이터를 보내기 위하여 자동 변환하고 싶지 않은 경우는 false를 지정합니다.
scriptCharset / string
스크립트를 로드할 때의 캐릭터 세트를 지정합니다. dataType이 "jsonp"혹은 "script"에서 실행되는 페이지와 호출하는 서버측의 캐릭터 세트가 다른 경우에만 지정해야합니다.
success / function
AJAX 통신이 성공하면 호출되는 Ajax Event 입니다. 돌아온 데이터와 dataType 지정한 값 2 개의 인수를받습니다.
function (data, dataType) { 
/ / data의 값을 사용하여 통신 성공시 처리를 기술합니다.
this / / this는 AJAX 전송시 설정한 옵션
}
timeout / number
제한 시간 (밀리초)을 설정합니다. $. ajaxSetup 에서 지정한 값을 통신에 따라 개별적으로 덮어쓸 수 있습니다.
type / string
"POST"또는 "GET"을 지정하여 HTTP 통신의 종류를 설정합니다. 기본값은 "GET"입니다.RESTful에 "PUT"또는 "DELETE"를 지정할 수 있지만 모든 브라우저가 지원하는 것은 아니기 때문에주의가 필요합니다.
url / string
요청을 보낼 대상 URL입니다. 기본값은 호출 페이지에 보냅니다.
username / string
인증이 필요한 HTTP 통신시 사용자 이름을 지정합니다.
xhr / function
XMLHttpRequest 객체가 생성되었을 때 호출되는 콜백 함수입니다. 이 함수는 예를 들면 IE에서 XMLHttpRequest 아니라 ActiveXObject가 만들어진 때라고합니다. 만약 특정 사이트의 XMLHttpRequest 개체의 확장과 인스턴스 관리 팩토리를 가지고있는 경우에는이 함수 생성물을 덮어쓸 수 있습니다. jQuery1.2.6 이전에서는 사용할 수 없습니다.

※주의 1 
dataType 옵션을 사용하는 경우 서버에서 응답이 올바른 MIME 타입을 반환하는지 확인하십시오. 
만약 MIME 타입과 지정된 dataType에 불일치가있는 경우, 예기치 않은 문제가 발생할 수 있습니다. 
자세한 내용은 
Specifying the Data Type for AJAX Requests (영어) 를 참조하십시오. ※주의 2dataType에 "script"을 지정하여 다른 도메인에 전송하는 경우 POST를 지정해서 요청은 GET 자동으로 변환됩니다. jQuery 1.2에서는 다른 도메인에서도 JSONP를 사용하여 JSON 데이터를 검색할 수있는 옵션이 붙었습니다. JSONP를 제공하는 서버가 "url? callback = function"와 같은 형태로 요청을받는 경우에는, jQuery가 자동으로 function을 사용하여 JSON 데이터를받습니다. 또한 매개 변수가 callback이 아닌 경우 jsonp 옵션 매개 변수 이름을 지정하여 마찬가지로 처리할 수 있습니다.

샘플
샘플 1
JavaScript 파일을 읽고 실행합니다.
$. ajax ({type : "GET", url : "test.js"dataType : "script"});
서버에 데이터를 저장하고 처리가 완료된 것을 사용자에게 알려줍니다.
$. ajax ({type : "POST", url : "some.php"data : "name = John & location = Boston", success : function (msg) {alert ( "Data Saved :"+ msg);}}) ;
HTML 페이지의 최신 버전을 가져옵니다.
$. ajax ({url : "test.html", cache : false, success : function (html) {$ ( "# results"). append (html);}});
동기 통신에서 데이터를 읽습니다. 
통신 중에 브라우저가 잠겨 있기 때문에 어떤 방식으로 통신중인 사용자 작업을 방해 궁리를해야 할 것입니다.
var html = $. ajax ({url : "some.php"async : false}). responseText;
XML 형식의 문서를 데이터로 보냅니다. 
processData 옵션을 false로 설정하여 데이터를 문자열로 자동 변환되는 것을 피할 수 있습니다.
var xmlDocument = create xml document]; $. ajax ({url : "page.php"processData : false, data : xmlDocument, success : handleResponse});

우리가 작성한 예제 :

$(function() {
$("#btn1").click(function() {
var name= $("#name").val();
var age = $("#age").val();
var url = "test5_ok.jsp";
var params = "name=" + name + "&age=" + age + "&nickName=수요일";
$.ajax({
type : "POST", // "POST"또는 "GET"을 지정하여 HTTP 통신의 종류를 설정. default는 "GET"
url:url,
data:params, // 서버로 전송하는 값
dataType:'xml', // 기본 text -> 서버에서 반환되는 데이터 형식을 지정. html, xml, text, script, json, jsonp 가 있음
success:function(args) { // AJAX 통신이 성공하면 호출되는 Ajax Event 
$(args).find("status").each(function() {
var status = $(this).text();
alert(status);
});

var str = "";
$(args).find("records").each(function() { // 태그명이 records 인 것들 중에 해당하는 것들을 불러옴
var records = $(this);
var id = records.attr("id"); // 속성명이 id
var name = records.find("name").text(); // 태그명이 name 인 것의 text를 가져옴
var age = records.find("age").text(); // 태그명이 name 인 것의 text를 가져옴
var nickName = records.find("nickName").text(); // 위와 동일

str += "id="+ id +", name=" + name + ", age=" + age + ", nickName=" + nickName + "<br/>"; 
});
$("#result").html(str); // id명이 result 인 것에 위에서 반복문으로 받은 것들을 html형식으로 찍는다.
},
beforeSend:showRequest, // AJAX에 의해 요청이 전송되기 전에 불리는 Ajax Event 
error:function(e) { // 통신에 실패했을 때 호출되는 Ajax Event 
alert(e.responseText);
}
});
});

$("#btn2").click(function() {
$("#result").empty();
});
});

function showRequest(args) { // 리턴 값이 true 일경우만 전송, false이면 전송 취소
if(!$("#name").val()) {
alert("이름을 입력하세요 !!!");
return false;
}
if(!$("#age").val()) {
alert("나이를 입력하세요 !!!");
return false;
}
return true;
}

[출처] Jquery ajax 정리|작성자 kimgas2000