$.ajaxSetup() 메서드 정의

.NET프로그래밍/jQuery 1.3.2 2009. 11. 16. 10:56 |


    $.ajaxSetup()


     

  1. 한 페이지에서 동일하게 반복되는 $.ajax() 메서드에 동일한 설정을 유지
    • $.ajax()를 여러 번 사용시 반복되는 인자 생략 가능

     

  2. $.ajax()에서 사용하는 인자를 그대로 사용




저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

getJSON()을 대체하는 ajax() 메서드  (0) 2009.11.17
getScript()메서드의 기능을 ajax()메서드로 대체  (0) 2009.11.17
$.ajax()의 매개변수 형태  (0) 2009.11.13
jQuery Ajax 관련 API  (0) 2009.11.13
데이터 출력  (0) 2009.11.13
Posted by holland14
:

$.ajax()의 매개변수 형태

.NET프로그래밍/jQuery 1.3.2 2009. 11. 13. 08:28 |


 

$.ajax()의 매개변수 형태


 

url : 요청을 보낼 서버 URL(ASP.NET/WebService, JSP, ASP, PHP, CGI)

 

type : HTTP 메서드, 기본값은 GET,   POST와 GET 중 선택

 

data : 서버로 전송되는 데이터

 

dataType : 응답 결과의 데이터 형식

가용한 형식 : xml, html, json, jsonp,script, text

 

timeout : 요청에 대한 응답 제한 시간(millisecond)

 

contentType : 서버 전송시의 content-type, application/x-wwwform-urlencoded 기본

 

success  : 응답이 성공하는 경우 호출되는 콜백함수

 

error : 에러 발생시 실행되는 콜백함수

 

complete : 요청이 완료되었을 때 호출되는 콜백함수

 

asyn : false로 지정하면 비동기 호출 전송. True 설정시 동기 호출




저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

getScript()메서드의 기능을 ajax()메서드로 대체  (0) 2009.11.17
$.ajaxSetup() 메서드 정의  (0) 2009.11.16
jQuery Ajax 관련 API  (0) 2009.11.13
데이터 출력  (0) 2009.11.13
jQuery Ajax - 폼에 있는 값을 서버로 전송하기 (submit 메서드)  (0) 2009.11.13
Posted by holland14
:

jQuery Ajax 관련 API

.NET프로그래밍/jQuery 1.3.2 2009. 11. 13. 08:28 |

    jQuery Ajax 관련 API

     

  1. http://docs.jquery.com 학습 필수

    2.  

    jQuery.load(url, data, callback) : Ajax 기능으로 HTML을 로드하고 DOM에 삽입

     

    jQuery.getJSON(url, data, callback) : HTTP GET방식으로 JSON 데이터 로드

     

    jQuery.getScript(url, callback) : HTTP GET 방식으로 자바스크립트 파일 삽입

     

    jQuery.get(url, data, callback, type) : HTTP GET 방식으로 원격 페이지 로드

     

    jQuery.post(url, data, callback, type) : HTTP POST 방식으로 원격 페이지 로드

     

    jQuery.ajax(options) : Ajax 기능을 사용하여 원격 페이지를 로드




저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

$.ajaxSetup() 메서드 정의  (0) 2009.11.16
$.ajax()의 매개변수 형태  (0) 2009.11.13
데이터 출력  (0) 2009.11.13
jQuery Ajax - 폼에 있는 값을 서버로 전송하기 (submit 메서드)  (0) 2009.11.13
jQuery Ajax - load() 메서드로 서버에 데이터 전송 및 받기  (0) 2009.11.13
Posted by holland14
:

데이터 출력

.NET프로그래밍/jQuery 1.3.2 2009. 11. 13. 08:28 |



데이터 출력 : 메모 데이터를 출력
    - ASP.NET 서버 컨트롤 사용
    - HTML에서 jQuery와 서버측스크립트에서 JSON 출력
    - HTML과 HttpHandler 사용 : ASP.NET 교재 26장...
          *.ashx 사용 ("제네릭 처리기"형식의 파일)
                 이미지 출력
                 JSON 출력
    - XML 웹 서비스

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

$.ajax()의 매개변수 형태  (0) 2009.11.13
jQuery Ajax 관련 API  (0) 2009.11.13
jQuery Ajax - 폼에 있는 값을 서버로 전송하기 (submit 메서드)  (0) 2009.11.13
jQuery Ajax - load() 메서드로 서버에 데이터 전송 및 받기  (0) 2009.11.13
jQuery Ajax - post 방식으로 서버에 데이터 전송 및 받기  (0) 2009.11.13
Posted by holland14
:

jQuery Ajax - 폼에 있는 값을 서버로 전송하기 (submit 메서드)

.NET프로그래밍/jQuery 1.3.2 2009. 11. 13. 08:27 |

 

[submitMethod.htm]



<!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>폼에 있는 값을 서버로 전송하기</title>

    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('#btn').click(function () {

                $('#pnlDisplay').load("05.FrmResponseData.aspx", {'Msg':$('#msg').val()});

            });

        });

    </script>

</head>

<body>

    <div id="frmSend">

        <form action="05.FrmResponseData.aspx">

            <input type="text" name="msg" value="" id="msg" />

            <input type="submit" value="전송" />

        </form>

    </div>

    <hr />

    <input type="button" id="btn" value="Ajax방식" />

    <div id="pnlDisplay">

    여기에 출력

    </div>

</body>

</html>

 

 


-------------------------------------------------------------------------------------

 


[실행결과]


--> 첫 화면.





--> '텍스트박스'에 '안녕하세요'텍스트 입력 후 '전송'버튼을 마우스로 클릭하면...




--> 아래그림과 같이 출력된다.(폼에 있는 값이 서버로 전송되어 출력된다.)




--> 이번에는 '텍스트박스'에 'Ajax방식'텍스트 입력 후 'Ajax방식'버튼을 마우스로 클릭하면...




--> 아래그림과 같이 출력된다.(-> 비동기적으로 실행된다.)



 

 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

jQuery Ajax 관련 API  (0) 2009.11.13
데이터 출력  (0) 2009.11.13
jQuery Ajax - load() 메서드로 서버에 데이터 전송 및 받기  (0) 2009.11.13
jQuery Ajax - post 방식으로 서버에 데이터 전송 및 받기  (0) 2009.11.13
jQuery Ajax - get 방식으로 서버에 데이터 전송 및 받기  (0) 2009.11.13
Posted by holland14
:

jQuery Ajax - load() 메서드로 서버에 데이터 전송 및 받기

.NET프로그래밍/jQuery 1.3.2 2009. 11. 13. 08:27 |

 

[loadMethod.htm]



<!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>load 메서드로 서버에 데이터 전송 및 받기</title>

    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('#btn').click(function () {

                $('#pnlDisplay').load("05.FrmResponseData.aspx", { 'Msg': $(this).val() });

            });

        });

    </script>

</head>

<body>

    <input type="button" id="btn" value="서버로부터 HTML 가져오기" />

    <div id="pnlDisplay">

    여기에 출력

    </div>

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]


--> 첫 화면. 아래그림에서 '버튼'을 마우스로 클릭하면...






--> 아래그림과 같이 '버튼'아래에 출력된다.("load() 메서드"로 서버에 데이터 전송 및 받기를 한 결과이다.)




 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

데이터 출력  (0) 2009.11.13
jQuery Ajax - 폼에 있는 값을 서버로 전송하기 (submit 메서드)  (0) 2009.11.13
jQuery Ajax - post 방식으로 서버에 데이터 전송 및 받기  (0) 2009.11.13
jQuery Ajax - get 방식으로 서버에 데이터 전송 및 받기  (0) 2009.11.13
jQuery Ajax - 서버측 데이터 출력 페이지 만들어서 실행  (0) 2009.11.13
Posted by holland14
:

jQuery Ajax - post 방식으로 서버에 데이터 전송 및 받기

.NET프로그래밍/jQuery 1.3.2 2009. 11. 13. 08:26 |

 

[postMethod.htm]



<!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>post 방식으로 서버에 데이터 전송 및 받기</title>

    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('#btn').click(function () {

                $.post("05.FrmResponseData.aspx", { 'Msg': 'Post방식으로전송' }, function (data) {

                    $('#pnlDisplay').html(data);

                });

            });

        });

    </script>

</head>

<body>

    <input type="button" id="btn" value="서버로부터 HTML 가져오기" />

    <div id="pnlDisplay">

    여기에 출력

    </div>

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]

--> 첫 화면. 아래그림에서 '버튼'을 마우스로 클릭하면...






--> 아래그림과 같이 '버튼'아래에 출력된다.("post 방식"으로 서버에 데이터 전송 및 받기를 한 결과이다.)


 

 

 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

jQuery Ajax - 폼에 있는 값을 서버로 전송하기 (submit 메서드)  (0) 2009.11.13
jQuery Ajax - load() 메서드로 서버에 데이터 전송 및 받기  (0) 2009.11.13
jQuery Ajax - get 방식으로 서버에 데이터 전송 및 받기  (0) 2009.11.13
jQuery Ajax - 서버측 데이터 출력 페이지 만들어서 실행  (0) 2009.11.13
jQuery Ajax - jQuery.get() 메서드 (XML파일 로드하기)  (0) 2009.11.13
Posted by holland14
:

jQuery Ajax - get 방식으로 서버에 데이터 전송 및 받기

.NET프로그래밍/jQuery 1.3.2 2009. 11. 13. 08:26 |

 

[getMethod.htm]

<!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>get 방식으로 서버에 데이터 전송 및 받기</title>

    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $('#btn').click(function () {

                $.get(

                    "05.FrmResponseData.aspx",          //[1] 서버측 스크립트 언어 : ASP.NET, JSP, PHP

                    { 'Msg': $(this).val() },           //[2] 쿼리스트링 : ?키1=값1&키2=값2

                    function (data) {                   //[3] 콜백함수 : 결과값 받기, data로 받아옴

                        $('#pnlDisplay').html(data);   

                    }

                ); // end $.get()

            });

        });

    </script>

</head>

<body>

    <input type="button" id="btn" value="서버로부터 HTML 가져오기" />

    <div id="pnlDisplay">여기에 출력</div>

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]

--> 첫 화면. 아래그림에서 '버튼'을 마우스로 클릭하면...






--> 아래그림과 같이 '버튼'아래에 출력된다.("get 방식"으로 서버에 데이터 전송 및 받기를 한 결과이다.)

 

 


 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

jQuery Ajax - load() 메서드로 서버에 데이터 전송 및 받기  (0) 2009.11.13
jQuery Ajax - post 방식으로 서버에 데이터 전송 및 받기  (0) 2009.11.13
jQuery Ajax - 서버측 데이터 출력 페이지 만들어서 실행  (0) 2009.11.13
jQuery Ajax - jQuery.get() 메서드 (XML파일 로드하기)  (0) 2009.11.13
jQuery Ajax - jQuery.getScript() 메서드 (하나의 완성된 자바스크립트 파일을 동적 로드/실행)  (0) 2009.11.13
Posted by holland14
:

jQuery Ajax - 서버측 데이터 출력 페이지 만들어서 실행

.NET프로그래밍/jQuery 1.3.2 2009. 11. 13. 08:25 |



"서버측 데이터 출력 페이지"를 만들기 위해 "웹 폼(Web Form)"형식의[FrmResponseData.aspx] 파일을 만든다.


[FrmResponseData.aspx]소스코드 위쪽의 "Inherits"부분과 [FrmResponseData.aspx.cs]의 "클래스 선언부분"을 아래의 분홍색으로 칠해진 부분과 같이 수정한다.("Inherits"부분과 "클래스 선언부분"을 숫자로 시작하면 오류가 나기 때문이다.)



[FrmResponseData.aspx]에서 위쪽코드에 수정한 부분.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="05.FrmResponseData.aspx.cs" Inherits="Ajax_Request_FrmResponseData" %>



[FrmResponseData.aspx.cs]에서 클래스 선언부분에 코드 수정한 부분.

using System;

 

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

{

    protected void Page_Load(object sender, EventArgs e)

    {


 



-------------------------------------------------------------------------




[FrmResponseData.aspx]

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="05.FrmResponseData.aspx.cs" Inherits="Ajax_Request_FrmResponseData" %>

 

<!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 id="Head1" runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

   

    </div>

    </form>

</body>

</html>

 

 

-------------------------------------------------------------------------------------

 


[FrmResponseData.aspx.cs]


using System;

 

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

{

    protected void Page_Load(object sender, EventArgs e)

    {

        Response.ContentType = "text/html";

        string html = "<div>안녕<div style=''>" + Request["Msg"] + "," +

                DateTime.Now.ToLongTimeString() + "</div></div>";

        Response.Clear();

        Response.Write(html);

        Response.End();

    }

}

 



-------------------------------------------------------------------------------------




[실행결과]

--> 첫 화면.






--> 아래그림과 같이 인터넷주소창에서 맨 끝부분에 빨간사각형으로 표시된 부분처럼 입력하고 새로고침을 하면... 





--> 아래그림과 같이 출력된다.






 

 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

jQuery Ajax - post 방식으로 서버에 데이터 전송 및 받기  (0) 2009.11.13
jQuery Ajax - get 방식으로 서버에 데이터 전송 및 받기  (0) 2009.11.13
jQuery Ajax - jQuery.get() 메서드 (XML파일 로드하기)  (0) 2009.11.13
jQuery Ajax - jQuery.getScript() 메서드 (하나의 완성된 자바스크립트 파일을 동적 로드/실행)  (0) 2009.11.13
JSON(JavaScript Object Notation) - jQuery Ajax - jQuery.getJSON() 메서드 (비동기적으로 JSON파일 로드)  (0) 2009.11.13
Posted by holland14
:

jQuery Ajax - jQuery.get() 메서드 (XML파일 로드하기)

.NET프로그래밍/jQuery 1.3.2 2009. 11. 13. 08:25 |



"새 항목 추가"로 "XML" 형식의 파일인 [Company.xml]과 "Html" 형식의 파일인 [jQuery.get.htm]을 만들고 각각 코드를 아래와 같이 작성한다.






[Company.xml]


<?xml version="1.0" encoding="utf-8" standalone="yes"?>

<Company CompanyType="Private">

    <CompanyName>닷넷코리아</CompanyName>

    <CompanyNumber>1234</CompanyNumber>

    <CompanyAddress>서울</CompanyAddress>

    <Name>레드플러스</Name>

</Company>




-------------------------------------------------------------------------------------




[jQuery.get.htm]


<!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>XML파일 로드하기</title>

    <script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

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

                $.get('04.Company.xml', function (data) {

                    $('#ctlGrid').empty();

                    $(data).find('Company').each(function () {

                        var $entry = $(this); // 현재 시점의 레코드셋

                        // 특성(Attribute)을 읽어오기

                        var html = "<div>" + $entry.attr('CompanyType') + "</div>";     // Private

                        // 하위 엘리먼트 읽어오기

                        html += "<div>" + $entry.find("CompanyName").text() + "</div>"; // 닷넷코리아

                        $('#ctlGrid').append($(html));

                    });

                });

            });

        });   

    </script>

</head>

<body>

    <input type="button" id="btn" value="회사소개" />

    <div id="ctlGrid"></div>

</body>

</html>

 



-------------------------------------------------------------------------------------

 


[실행결과]

--> 첫 화면. 아래그림에서 '회사소개'버튼을 마우스로 클릭하면...





--> 아래그림과 같이 '회사소개'버튼 아래에 텍스트가 출력된다.
 




 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

jQuery Ajax - get 방식으로 서버에 데이터 전송 및 받기  (0) 2009.11.13
jQuery Ajax - 서버측 데이터 출력 페이지 만들어서 실행  (0) 2009.11.13
jQuery Ajax - jQuery.getScript() 메서드 (하나의 완성된 자바스크립트 파일을 동적 로드/실행)  (0) 2009.11.13
JSON(JavaScript Object Notation) - jQuery Ajax - jQuery.getJSON() 메서드 (비동기적으로 JSON파일 로드)  (0) 2009.11.13
jQuery Ajax - jQuery.load() 메서드 (동적으로 원격 페이지 로드)  (0) 2009.11.13
Posted by holland14
:

티스토리툴바