HTML 우클릭 금지와 드레그 금지
contextmenu="return false" 우클릭 방지
ondragstart="return false" 드래그 방지
onselectstart="return false" 선택 방지
<HTML>
<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
내용
</body>
</HTML>
'DEVELOPMENT > Javascript' 카테고리의 다른 글
var 키워드의 변수 범위 (0) | 2016.06.01 |
---|---|
javascript grap library (0) | 2014.03.06 |
[Android]app <---> javascript 통신 (0) | 2011.04.18 |
[jquery] ajax 사용하기 (0) | 2010.12.17 |
javascript 정리 (0) | 2010.12.17 |
[jquery] ajax 사용하기
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
기본형을 보시면 ajax() 라는 메서드안에 속성 3개를 가진 객체를 생성한후 인자로 때려넣고 있군요.
동적으로 js파일을 로드해서 실행시키는 기능을합니다. 기능이 재밌어 보이긴하는데, 실제로 별로 안쓸것같네요 -_-;
타입2.
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
some.php 에 POST 타입으로 name 과 location 을 parameter 로 넘기고있네요. success 프라퍼티는 서버에서 http response 를 받은후에 수행될 콜백함수를 지정합니다. "데이타가 저장되었어염" 라고 알려주네요.
갠적으로 이 타입을 가장많이 사용하고있습니다. 실무에서도 가장많이 사용되죠.
타입3.
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});
cache 라는 프라퍼티가 추가되었군요. test.html 을 가장 최근에 수정된 페이지로 받겠다는거죠.
"캐쉬를 사용하지 않겠다" 이겁니다. html 을 받은후에 results라는 아이디를 가진 엘리먼트의 자식노드로써 추가하고있네요. 쌩 dom api 로 쓰면 이렇겠죠. document.getElementById("results").innerHTML = html;
음 근데 이거랑은 좀 차이점이있어요. append 는 "result 엘리먼트의 자식이 존재할경우, 가장 마지막 자식으로 붙인다" 라는 규칙을 가지고있거든요. 반면에 innerHTML 으로넣으면 자식이 존재하든안하든 덮어써버리는거죠. 기존의 html 엘리먼트는 사라지고 새로운 엘리먼트로 교체되는 개념입니다.
타입4.
var html = $.ajax({
url: "some.php",
async: false
}).responseText;
async(비동기) 라는 프라퍼티가 추가되었군요. false를 때려넣었으니까 "동기"로 요청한다는말이네요.
뭔말이냐면, some.php로 request를 날린후에 response가 오기전까지는 브라우저를 블락킹 시켜버립니다.
유저의 어떠한 인터렉션도 허용되지않죠. 보시면 콜백함수를 때려넣는 success라는 프라퍼티도없네요
그럼 어떻게 응답데이타를 받나염? 바로 저렇게요. var html = $.ajax().responseText;
어차피 서버로부터 response 가 오기전까지는 스크립트수행이 블락되어있으니까 저 코드가 가능한겁니다.
웹플밍을 하다보면 이 타입을 "써야만" 할때가 종종있더군요.
타입 5.
var xmlDocument = [create xml document];
$.ajax({
url: "page.php",
processData: false,
data: xmlDocument,
success: handleResponse
});
[출처] http://boast.tistory.com
'DEVELOPMENT > Javascript' 카테고리의 다른 글
HTML 우클릭 금지와 드레그 금지 (0) | 2013.11.05 |
---|---|
[Android]app <---> javascript 통신 (0) | 2011.04.18 |
javascript 정리 (0) | 2010.12.17 |
[jquery] JQuery Ajax 사용하기 (0) | 2010.07.23 |
[javascript] 위도, 경로를 이용한 거리 계산 소스 (0) | 2010.07.14 |
javascript 정리
<script language="javascript"> <script language="javascipt" src="src.js">
이벤트 처리!!
window 객체의 프로퍼티
frame 객체
document 객체
navigator 객체
event 객체
screen 객체
form 객체
location 객체
link 객체
anchor 객체
history 객체
image 객체
area 객체
Array 객체
Boolean 객체
Function 객체
Global 객체
Math 객체
Number 객체
Object 객체
String 객체
|
내용출처 : [기타] 블로그 집필 - 뎅구르르까껑의 블로그 |
'DEVELOPMENT > Javascript' 카테고리의 다른 글
[Android]app <---> javascript 통신 (0) | 2011.04.18 |
---|---|
[jquery] ajax 사용하기 (0) | 2010.12.17 |
[jquery] JQuery Ajax 사용하기 (0) | 2010.07.23 |
[javascript] 위도, 경로를 이용한 거리 계산 소스 (0) | 2010.07.14 |
유용한 jQuery 플러그인 리스트 (0) | 2010.06.18 |
[jquery] JQuery Ajax 사용하기
jquery 에서는 상당히 심플한 인터페이스를 제공합니다.. 플젝하다가 갖다썼는데 상당히 만족스럽네요
여러가지 ajax 타입을 소개할까합니다. 재밌는것도 몇개있네요.
타입1.
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
});
기본형을 보시면 ajax() 라는 메서드안에 속성 3개를 가진 객체를 생성한후 인자로 때려넣고 있군요.
동적으로 js파일을 로드해서 실행시키는 기능을합니다. 기능이 재밌어 보이긴하는데, 실제로 별로 안쓸것같네요 -_-;
타입2.
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
some.php 에 POST 타입으로 name 과 location 을 parameter 로 넘기고있네요. success 프라퍼티는 서버에서 http response 를 받은후에 수행될 콜백함수를 지정합니다. "데이타가 저장되었어염" 라고 알려주네요.
갠적으로 이 타입을 가장많이 사용하고있습니다. 실무에서도 가장많이 사용되죠.
타입3.
$.ajax({
url: "test.html",
cache: false,
success: function(html){
$("#results").append(html);
}
});
cache 라는 프라퍼티가 추가되었군요. test.html 을 가장 최근에 수정된 페이지로 받겠다는거죠.
"캐쉬를 사용하지 않겠다" 이겁니다. html 을 받은후에 results라는 아이디를 가진 엘리먼트의 자식노드로써 추가하고있네요. 쌩 dom api 로 쓰면 이렇겠죠. document.getElementById("results").innerHTML = html;
음 근데 이거랑은 좀 차이점이있어요. append 는 "result 엘리먼트의 자식이 존재할경우, 가장 마지막 자식으로 붙인다" 라는 규칙을 가지고있거든요. 반면에 innerHTML 으로넣으면 자식이 존재하든안하든 덮어써버리는거죠. 기존의 html 엘리먼트는 사라지고 새로운 엘리먼트로 교체되는 개념입니다.
타입4.
var html = $.ajax({
url: "some.php",
async: false
}).responseText;
async(비동기) 라는 프라퍼티가 추가되었군요. false를 때려넣었으니까 "동기"로 요청한다는말이네요.
뭔말이냐면, some.php로 request를 날린후에 response가 오기전까지는 브라우저를 블락킹 시켜버립니다.
유저의 어떠한 인터렉션도 허용되지않죠. 보시면 콜백함수를 때려넣는 success라는 프라퍼티도없네요
그럼 어떻게 응답데이타를 받나염? 바로 저렇게요. var html = $.ajax().responseText;
어차피 서버로부터 response 가 오기전까지는 스크립트수행이 블락되어있으니까 저 코드가 가능한겁니다.
웹플밍을 하다보면 이 타입을 "써야만" 할때가 종종있더군요.
타입 5.
var xmlDocument = [create xml document];
$.ajax({
url: "page.php",
processData: false,
data: xmlDocument,
success: handleResponse
});
출처 : http://boast.tistory.com/entry/JQuery-Ajax-사용하기
'DEVELOPMENT > Javascript' 카테고리의 다른 글
[jquery] ajax 사용하기 (0) | 2010.12.17 |
---|---|
javascript 정리 (0) | 2010.12.17 |
[javascript] 위도, 경로를 이용한 거리 계산 소스 (0) | 2010.07.14 |
유용한 jQuery 플러그인 리스트 (0) | 2010.06.18 |
[jquery] Form 플러그인 함수 (0) | 2010.04.06 |
유용한 jQuery 플러그인 리스트
- Accessibility
스타일시트와 텍스트 크기 조절, 화면 접근하기 어려운 장애우를 위한 플러그인 인듯함
데모 : http://webrocket.ulmb.com/ability/#demo - Accordion
아코디언 인터페이스
데모 : http://jquery.bassistance.de/accordion/demo/ - AlphaNumeric
정해진 문자 숫자만 입력 받는 플러그인
데모 : http://itgroup.com.ph/alphanumeric/ - Ajax File Upload
파일 업로드시 로딩 그래프 표시
데모 : http://www.phpletter.com/Demo/AjaxFileUpload-Demo/ - appendDom
이플러그인은 DOM요소를 보다 직관적고 쉽게 만들 수 있도록 합니다. - appendText
텍스트를 html엔티티 형태로 변환해서 추가 하는 플러그인 - blockUI
(유용함) 전체 페이지에서 유저 인터페이스를 차단 후 메시지 오버레이 만드는 플러그인
데모 : http://malsup.com/jquery/block/#demos - BogoFolders
파일 메뉴 인터페이스를 통해 텍스트 보는 플러그인 - BogoTabs
기본적인 탭 인터페이스 - Calendar
날짜 선택기. jQuery UI 에 포함된 플러그인 - Checkbox manipulation
체크 박스 인데 마치 라디오 버튼 같은..? - Chili
(유용함) 웹 페이지 상의 코드 문법 강조 - Click Menu
드롭 다운 메뉴 생성 플러그인 - clueTip
다양한 형태의 툴팁 플러그인 - Color Animations
div 배경을 이용한 애니메이션. 신기하네. - Color Picker
색상 선택 플러그인 - columnHover
테이블 열, 행 강조 - ContextMenu
컨텍스트 메뉴 플러그인 - Confirmer
유저의 컨펌 액션을 체크 하는 플러그인 - Cycle
(유용함) 이미지 갤러리 플래시 같은 롤링 효과 - date picker
날짜 선택기
데모 : http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/- Delicious
Read delicious bookmarks from a user to display on a webpage.- Dimensions
Get accurate window and document attributes across browsers.- Equalize Columns
Make columns the same height as the longest column.- FCKEditor Plugin
Adds a rich text editor to a textarea.- Field
Expand the ability to retrieve and set values in forms.- Form
(유용함) Change HTML forms to submit via Ajax.- Gallery Viewer
JavaScript image gallery.- getUrlParam
Function to get url parameters.- Google Feed Plugin
Display any RSS feed to a webpage.- Gradient
Adds a gradient to a div without needing an image.- Grid Column Sizing
Table column draggable resizing.- Grid Row Sizing
Expand and collapse table rows.- hoverIntent
Prevents unintended hover events.- idTabs
Add tabbed interface to a website.- Impromptu
Create modal windows and messages.- jQuery Localisation
Applies localisation packages based on the user's language preference.- jBox
UI dialog widget.- jCalendar
Aids selecting of dates inline on a page.- jCarousel Lite
Simple carousel for images and HTML content.- jCodeViewer
Syntax highlighting for displaying code on webpages.- jdMenu Hierarchical Menu
Generates dropdown menus.- jEditable
Live editing of elements on a webpage.- jFeed
XML feed parser.- jPanView
Replaces big images with a zoom viewer in HTML.- jqDnR
Drag'n'Resize elements on a page.- jQMaps
Interact with Google maps.- jqModal
Display notices, dialogs, and modal windows in a web browser.- Treetable
Make a tree view out of an HTML table.- Tree View
(유용함) Tree view controls.- Suggest
Add autocomplete to input fields.- YAV
Form validation library.- jqUploader
Provides a status bar for uploading images.- jScrollPane
Customize your scrollbars.- jTagEditor
(유용함) Turn a textarea into a tag editor.- jVariations
Create a control panel to manipulate elements on a page.- Keyboard Navigation
Dynamically determine which element to focus on based on it's position on the screen.- labelOver
Overlay labels over an input field.- LavaLamp
Navigation menu with a 'lava' effect.- Lazy Load
Only load images that are in the current window.- Live Query
Adds event listeners to elements.- Masked Input
Add mask to inputs to aid user data entry (phone numbers, etc).- Media
(유용함) Unobtrusive conversion of standard markup into rich media content.- Extra selectors for JQuery
Add more selectors to jQuery.- Mousewheel
Mousewheel event handler.- Mousehold Event
Add repeating event as the user holds down the mouse.- Multiple File Upload
Select multiple files one by one as it adds to a queue list.- newsticker
Create a fading news ticker.- Password Strength Meter
Indicator to show the strength of a users password.- PopupWindow
Creates an preview popup of destination link.- Query String Object
Useful for sending URL parameters.- Select box manipulation
Remove and add options from a select list or dropdown in many ways.- selectCombo
Tool for making dependant dropdowns with Ajax.- Star Rating
Generates star rating from input fields- Grid
동적 Ajax 그리드 컨트롤
데모 : http://trirand.com/blog/jqgrid/jqgrid.html- slideViewer
Image gallery as slides.- Spoilers
Hide content behind an image until user action is taken.- tableHover
Row and column highlighting with variations.- tableFilter
Search box is added to each column header to filter table.- tablesorter
Client side table sorting.- Taconite
(유용함) Easily make multiple DOM updates using the results of a single AJAX call.- Textgrad
Add gradients to whole blocks of text.- Time Entry
Sets an input field up to accept a time value.- Tooltip
Add tooltips from title page.- Validation
(유용함) Add live validation to forms.- WYMeditor
(유용함) Web-based XHTML WYSIWYM editor.- Zoomi
Zoomable thumbnails.- XSLT
Transform XML/XSL from JavaScript.- XAP
Ajax library.
http://marcgrabanski.com/article/list-of-useful-jquery-plugins
- Delicious
[출처] 유용한 jQuery 플러그인 리스트|작성자 루든
'DEVELOPMENT > Javascript' 카테고리의 다른 글
[jquery] JQuery Ajax 사용하기 (0) | 2010.07.23 |
---|---|
[javascript] 위도, 경로를 이용한 거리 계산 소스 (0) | 2010.07.14 |
[jquery] Form 플러그인 함수 (0) | 2010.04.06 |
location.href 와 location.replace() (0) | 2010.03.31 |
단위환산 프로그램 소스 (0) | 2010.01.04 |
[jquery] Form 플러그인 함수
fieldValue(excludeUnsuccessful);
확장 집합 내의 전송할 수 있는 폼 컨트롤의 값을 배열 형태의 값으로 반환한다.
값이 없다면 빈 배열을 반환
excludeUnsuccessful: (Boolean) true이거나 생략하면, 확장 집합 내의 전송할수 없는 컨트롤은 무시된다
ex)
$('frm *').fieldValue(); //전송할수 있는 값들을 배열 형태로 반환
$('frm *').fieldValue(false); //전송할수 없는 값들까지 모두 배열 형태로 반환
fieldSerialize(), formSerialize()
확장 집합에서 값을 수집하여 올바르게 URL 인코딩된 이름/값 쌍으로 형식화된 쿼리 문자열로 반환한다.
formSeialize()메서드는 확장 집합 내의 폼을 받아서 폼에 있는 전송 가능한 자식 컨트롤의 모든 값들을 직렬화 한다. 하지만 fieldSerialize()메서드는 확장 집합 내의 모든 컨트롤을 직렬화 하며 이는 폼의 일부만 직렬화할 때 유용하다.
ex)
$('#frm').formSerialize(); //form 태그의 모든 값들을 직렬화하여 반환한다.
$('#frm input').fieldSerialize(); //form 태그의 input type 의 모든 값들을 직렬화하여 반환한다.
clearForm();
확장 폼의 값들을 모두 지운다.
- 텍스트, 패스워드, 텍스트 영역 컨트롤의 값을 지운다.
-<select> 엘리먼트의 선택을 취소한다.
-체크박스와 라디오 버튼의 선택을 해제한다.
ex)
$('#frm').clearForm();
resetForm();
확장 폼의 값들을 초기값으로 재설정한다.
<selected, checked, value 값들은 초기 셋팅된 값으로 되돌려 놓는다.>
ex) $('#frm').resetForm();
ajaxSubmit(options);
대상폼에 있는 모든 전송 가능한 컨트롤의 이름과 값을 가져오며, 이 값을 Ajax 요청으로 전송한다.
이 메서드에 요청을 만드는데 필요한 정보를 제공하거나, 대상 폼의 설정 값에서 기본 값으로 이용 할 수 있다.
폼을 전송할 때 부도는 이벤트 결과로 스크립트를 사용하여 요청을 전송하려 할 때 쓰면 좋다.
options(매개변수)
url :
(String) Ajax 요청이 전송될 URL, 생략하면 URL은 대상 폼의 action 속성값을 가져온다.
type :
(String) GET, POST 값, 생략하면 폼의 method 속성값을 가져오며 속성값도 존재하지 않을 경우 GET로 설정된다.
dataType :
(String) 응답으로 예상되는 데이터 타입으로 응답 본문이 후처리되는 방식을 결정, 값은 다음값중에서 선택되어
진다.
xml - XML 데이터로 취급, 모든 success 콜백은 responseXML 도큐멘트로 전달
json - JSON 구조로 취급, JSON은 평가되고 결과가 sucess 콜백으로 전달
script - 자바스크립트로 취급된다. 스크립트는 전역 콘텍스트로 평가된다.
생략하면 target과 같은 또 다른 옵련이 명시되는 경우를 제외하고 데이터에 대한 후처리는 없다.
target : (String|Object|Element) 응답 본문을 콘텐츠로 전달 받은 DOM 엘리먼트를 하나 이상 명시해야 한다.
이것은 jQuery 셀럭터를 나타내는 문자열, 대상 엘리먼트를 포함하는 jQuery 확장 집합, 엘리먼트의 직접적인 참조일수 있다. 생략하면 응답 본문을 받는 엘리먼트는 없다.
beforeSubmit : (Function) Ajax 요청을 전송하기 전에 호출될 콜백 함수를 명시, 폼 데이터의 유효성 등의 함수를 사용할때 유용하다. 생략하면 전처리 콜백은 실행되지 않는다. 매개변수는 다음과 같은 것이 있다.
- 요청에 매개변수로 전달된 데이터 값들의 배열, 객체는 배열, name/value 를 가진다.
- 커맨드가 적용된 jQuery의 일치된 집합
- 커맨드에 전달된 options 객체
success :
(Function)이 명시되고 성공적인 상태의 응답이 반환된 후에 호출될 콜백 함수로 생략하면 호출되지 않는다. 그리고 세개의 매개변수를 받는다.
- dataType 옵션에 따라 해석된 응답 본문
- success를 포함한 문자열
- 커맨트가 적용된 jQuery의 일치된 집합
clearForm :
(Boolean)true로 지정하면 성공적으로 전송한 후 폼을 지운다.
resetForm :
(Boolean)true로 지정하면 성공적으로 전송한 후 폼을 재 설정한다.
ex)
$('frm').ajaxSubmit();
$('frm').ajaxSubmit({target : 'target'});
$('frm').ajaxSubmit(function(response){
//todo
});
ajaxForm(options);
대상 폼에 적용하여 폼 전송이 발생하면 전송은 ajaxSubmit() 커맨드에 의해 발생한 Ajax 요청으로 재지정된다. 메서드에 전달된 options 매개변수는 ajaxSubmit()호출 시 전달된다.
ex)
$(function(){
$("#submitBtn").click(function(){
$("#frm").ajaxForm({
dataType:'html',
beforeSubmit: frmCheck, //폼유효성 검사
success:function(data, rst){
$('#obj').innerHTML = data;
}
});
});
});
download : http://plugins.jquery.com/project/form
'DEVELOPMENT > Javascript' 카테고리의 다른 글
[javascript] 위도, 경로를 이용한 거리 계산 소스 (0) | 2010.07.14 |
---|---|
유용한 jQuery 플러그인 리스트 (0) | 2010.06.18 |
location.href 와 location.replace() (0) | 2010.03.31 |
단위환산 프로그램 소스 (0) | 2010.01.04 |
Ajax 정복하기 (0) | 2009.10.10 |
location.href 와 location.replace()
location.href = url; //history에 남는다.
location.replace(url); //history에 남지 않는다.
고로 replace로 옮겨진 페이지는 history.go(-1), history.back()으로 아무리 찾아갈려구 해도 갈수가 없다.
'DEVELOPMENT > Javascript' 카테고리의 다른 글
유용한 jQuery 플러그인 리스트 (0) | 2010.06.18 |
---|---|
[jquery] Form 플러그인 함수 (0) | 2010.04.06 |
단위환산 프로그램 소스 (0) | 2010.01.04 |
Ajax 정복하기 (0) | 2009.10.10 |
크로스 브라우저 투명 코드 처리 (0) | 2009.09.21 |
Flex - Javascript 간의 통신
Flex개발시 웹 페이지와의 통신이 필요할 경우가 종종.. 아니 수시로 발생한다.
물론 Flex로만 개발된 사이트라면 문제가 되지 않겠지만, 기존사이트를 유지 보수하거나, Javascript로 되어 있던 영역을 Flex로 재개발 할때 많이 발생 될것이다.
Flex의 ExternalInterface 클래스를 통해서 통신이 가능하다.
Flex에서 Javascript함수를 호출할 때는 아래와 같이 호출한다.
반대로 Javascript에서 Flex함수 호출은
'DEVELOPMENT > FLEX & AIR' 카테고리의 다른 글
[FLEX] Arial Font 사용시 사이즈 오류 문제 (0) | 2010.02.24 |
---|---|
Flex 에서 Log 남기기 (0) | 2010.02.22 |
FLEX - Style Exploer (0) | 2010.01.19 |
Flex 흐르는 텍스트 효과 (0) | 2010.01.12 |
[Caster] XML만을 사용시 서버측 XML 객체 상호변환 (0) | 2009.12.24 |
Ajax 정복하기
최범균의 ajax를 공부를 하면서 필요한 부분을 기술하였으며 해당 부분은 ajax.js로 만들어서 사용을 할수가 있습니다.
var ajax = {};
ajax.xhr = {};
ajax.Event = {};
/*
* Ajax(Asynchronous Javascript and XML) 개념 익히기
*
* XMLHttpRequest 사용하기
*
* XMLHttpRequest 객체를 사용해서 요청 전송할때 필요한 함수
*
* open() : 요청의 초기화. GET/POST선택. 접속할 URL 입력
* send() : 웹 서버에 요청 전송
* onreadystatechange = callbackFunction
*
* open() 인자 설명
*
* 1번째 인자 : HTTP 메소드 지정 (form 메소드)
* 2번째 인자 : 접속할 URL
* 3번째 인자 : 동기/비동기 방식 지정
*
* ex)
*
* GET 방식일 경우
*
* httpRequest = getXMLHttpRequest();
* httpRequest.open("GET", "/test.jsp", true);
* httpRequest.send(null);
*
* POST 방식일 경우
*
* httpRequest = getXMLHttpRequest();
* httpRequest.open("GET", "/test.jsp", true);
* httpRequest.send("id=admin&pw=1234");
*/
/*
* onreadystatechange 프로퍼티 설명
*
* XMLHttpRequest 객체에 onreadystatechange 프로퍼티에 콜백 함수를 지정하면 웹 서버로부터
* 응답이 도착했을 때 콜백 함수가 호출된다. 이 때 실제로 onreadystatechange에서 명시한 콜백 함수
* 는 readyState라는 프로퍼티의 값이 변경될 때마다 호출된다.
*
*
* readyState 프로퍼티 설명
*
* 0 : UNINITIALIZED - 객체만 생성되고 아직 초기화되지 않은 상태(open 메서드가 호출되지 않음)
* 1 : LOADING - open 메서드가 호출되고 아직 send 메서드가 불려지지 않은 상태
* 2 : LOADED - send 메서드가 불려졌지만 status와 헤더는 도착하지 않은 상태
* 3 : INTERACTIVE - 데이터의 일부만 받은 상태
* 4 : COMPLETED - 데이터를 전부 받은 상태. 완전한 데이터의 이용 가능
*
* ex)
* function callbackFunction(){
* if(httpRequest.readyState == 1){
*
* }else if(...){
*
* }else if(httpRequest.readyState == 4){
* //서버로부터 응답이 도착
* //완료후 작업할 내용을 작성한다.
* }
* }
*
*/
/*
* 서버로부터의 응답 상태 : status / statusText
*
* 웹 서버로부터 응답이 도착하면 웹 서버에서 처리가 올바르게 수행되었는지 확인해야 한다.
* 웹 서버는 작업을 올바르게 실행했는지, 처리 도중에 에러가 발생했는지등의 상태 코드를 통해서 알려주는데,
* XMLHttpRequest 객체는 웹 서버가 전달한 상태 코드를 status 프로퍼티에 저장한다. status 프로퍼티에
* 저장되는 주요 상태 코드는 다음과 같다.
*
* HTTP 주요 상태 코드
*
* 200 : OK - 요청설명
* 403 : Forbidden - 접근 거부
* 404 : Not Found - 페이지 없음
* 500 : Internal Server Error - 서버 오류 발생
*
* ex)
*
* function callbackFunction(){
* if(httpRequest.readyState == 4){
* if(httpRequest.status == 200){
* //정상적인 수행
* //완료후 작업할 내용 작성
* }else{
* alert('에러 발생' + httpRequest.status);
* }
* }
* }
*/
/*
* 응답 데이터 사용하기 : responseText, responseXML
*
* XMLHttpRequest에서 정상적인 요청이 이루어질 경우 요청한 페이지에서 넘겨준 값을 알맞게 처리할때
* 사용한다. 텍스트 형식과, XML형식이 있다.
*
* function callbackFunction(){
* if(httpRequest.readyState == 4){
* if(httpRequest.status == 200){
* var txt = httpRequest.responseText; //text일 경우
* var xml = httpRequest.responseXML; //XML 형식인 경우
*
* alert(txt);
* }
* }
* }
*/
/*
* 동기 방식과 비동기 방식의 실행 차이
*
* XMLHttpRequest의 open() 함수는 인자를 세 개를 받는데, 그 중 마지막 인자는 동기/비동기 여부를
* 표시한다. 아래 코드처럼 open() 함수에 세 번째 인자 값을 true로 지정하기 되면 비동기 방식으로 호출된다.
*
* 1. httpRequest = getXMLHttpRequest();
* 2. httpRequest.onreadystatechange = callbackFunction;
* 3. httpRequest.open('GET', '/test.jsp', true) <-- 마지막 인자
* 4. httpRequest.send(null);
* 5. //비동기 방식
* 6. callSomeFunction();
*
*
* 비동기 방식 - send()함수가 호출된 뒤 곧바로 6.줄의 callSomeFunction 함수가 실행된다.
* 동 기 방식 - send()함수가 호출되면, 서버와의 통신이 완전히 완료된 이후에 send() 함수 이후의
* 코드 6.줄의 callSomeFunctiong함수가 실행된다.
*/
/*
* 파라미터의 한글 처리 방법 : "name=" + encodeURIComponent('한글');
*/
/*
* ajax 실행
*
* 사용법
* new ajax.xhr.Request('targetPage.jsp', 'num=1&id=test', targetFunction, 'POST');
* @param url 요청 URL
* @param params 인자값
* @param callback 콜백함수
* @param method POST,GET
*/
ajax.xhr.Request = function(url, params, callback, method){
this.url = url;
this.params = params;
this.callback = callback;
this.method = method;
this.send();
}
ajax.xhr.Request.prototype = {
/**
* Ajax HttpRequest 객체를 구한다.
* @return
*/
getXMLHttpRequest: function(){
if(window.ActiveXObject){ //IE에서 XMLHttpRequest 구하기
try{
return new ActiveXObject("Msxml2.XMLHTTP"); //IE중에서도 Microsoft.XMLHTTP 보다 이전 버전 이므로 먼저 구한다.
}catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e1){
return null;
}
}
}else if(window.XMLHttpRequest){ //IE 이외의 파폭,오페라 같은 브라우저에서 XMLHttpRequest 구하기
return new XMLHttpRequest;
}else{
return null;
}
},
/**
* Ajax 통신을 한다.
* @return
*/
send: function(){
this.req = this.getXMLHttpRequest();
var httpMethod = this.method ? this.method : 'GET';
if(httpMethod != 'GET' && httpMethod != 'POST'){
httpMehtod = 'GET';
}
var httpParams = (this.params == null || this.params == '') ? null : this.params;
var httpUrl = this.url;
if(httpMethod == 'GET' && httpParams != null){
httpUrl = httpUrl + "?" + httpParams;
}
this.req.open(httpMethod, httpUrl, true);
this.req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
var request = this;
this.req.onreadystatechange = function(){
request.onStateChange.call(request);
}
this.req.send(httpMethod == 'POST' ? httpParams : null);
},
/**
* 콜백함수 호출
* @return
*/
onStateChange: function(){
this.callback(this.req);
}
}
/**
* 이벤트 리스너 등록
*/
ajax.Event.addListener = function(element, name, observer, useCapture){
useCapture = useCapture || false;
if(element.addEventListener){ //기타 브라우저
element.addEventListener(name, observer, useCapture);
}else if(element.attachEvent){ //IE 브라우저
element.attachEvent('on' + name, observer);
}
}
/**
* 등록된 이벤트 리스너 삭제
*/
ajax.Event.removeListener = function(element, name, observer, useCapture){
useCapture = useCapture || false;
if(element.removeEventListener){ //기타 브라우저
element.removeEventListener(name, observer, useCapture);
}else if(element.detachEvent){ //IE 브라우저
element.detachEvent('on' + name, observer);
}
}
/**
* 이벤트 대상 반환
*/
ajax.Event.getTarget = function(event){
if(event == null) return null;
if(event.target) return event.target; //W3C 표준 이벤트 타켓
else if(event.srcElement) return event.srcElement; //구버전의 IE 타겟
return null;
}
/*
* 마우스 이벤트 종류
*
* click : 마우스 버튼 클릭시 발생
* dbclick : 마우스 버튼 더블 클릭 발생시 발생(비표준)
* mousedown : 마우스 버튼이 눌렸을 때
* mouseup : 마우스 버튼을 뗐을 때
* mouseover : 마우스가 영역 안으로 들어왔을 때
* mousemove : 마우스가 영역 안에서 이동할 때
* mouseout : 마우스가 영역 밖으로 나갈 때
*
*/
/*
* 마우스 클릭 버튼 판별하기
*
* button 프로퍼티를 사용(event.button)
* 또는 which 프로퍼티 사용(파이어폭스, 사파리, 모질라 지원)
*
* button 프로퍼티 (파이어 폭스/모질라)
* 0 : 일반버튼(보통 왼쪽 버튼)
* 1 : 추가 버튼(보통 가운데, 또는 휠 관련)
* 2 : 콘텍스트 버튼(보통 오른쪽 버튼)
*
* button 프로퍼티 IE
* 1 : 왼쪽 마우스 버튼 (단 click 이벤트일 경우는 0 을 반환)
* 2 : 오른쪽 마우스 버튼
* 3 : 휠(가운데)
*
* which 프로퍼티 사용 (IE 경우 undefind 값이 없음)
* 1 : 왼쪽
* 3 : 오른쪽
* 2 : 휠(가운데)
*
*/
/*
* 마우스 발생 위치 정보
*
* clientX : 웹 브라우저에서 출력되는 영역에서 X 좌표값을 반환 --> X
* clientY : 웹 브라우저에서 출력되는 영역에서 Y 좌표값을 반환
* screenX : 전체 화면에서 X 좌표값을 반환한다. --> X
* screenY : 전체 화면에서 Y 좌표값을 반환한다.
*
*/
/*
* 브라우저 안에 스크롤 된 마우스의 마우스의 좌표 구하기
*
* scrollLeft, scrollTop를 이용
*
* clientX, clientY의 마우스 좌표를 구한 영역에 위에 코드를 사용하여 스크롤 된
* 영역만큼 더해준다.
*/
/*
* 마우스 이벤트로 작업을 할 경우는 오른쪽 마우스 클릭은 가급적 사용하지 않느것이 좋다
* 이유는 클릭 이벤트 자체를 지원하지 않는 브라우저가 있기 때문이다.
*/
/**
* 마우스 좌표값을 반환한다.
*/
ajax.Event.getMouseXY = function(event){
var mouseX = event.clientX;
var mouseY = event.clientY;
var dd = document.documentElement; //W3C 표준 (최신 브라우저에서는 지원)
var db = document.body; //구버전의 경우 (document.documentElement 미지원 경우)
if(dd){
mouseX += dd.scrollHeight;
mouseY += dd.scrollTop;
}else if(db){
mouseX += db.scrollHeight;
mouseY += db.scrollTop;
}
return {x: mouseX, y: mouseY};
}
/**
* 마우스 왼쪽 버튼 클릭 여부를 boolean 형식으로 반환한다.
*/
ajax.Event.isLeftButton = function(event){
return (event.which) ? //which 프로퍼티 여부가 존재하는지 여부
evnet.which == 1 && event.button == 0 : //파이어폭스/모질라
(event.type == 'click') ? event == 0 : event.button == 1; //IE경우
}
/**
* 마우스 오른쪽 버튼 클릭 여부를 boolean 형식을 반환한다.
*/
ajax.Event.isRightButton = function(event){
return event.button == 2; //오른쪽 버튼의 경우는 IE, 파이어폭스/모질라가 모두 동일
}
/*
* 키보드 이벤트
*
* keydown : 키보드를 누를 때 발생한다.
* keyup : 키보드에서 뗄 때 발생한다.
* keypress : 키보드를 누를 때 발생한다.(비표준)
*/
/*
* 키보드 이벤트 프로퍼티
*
* keyCode : 키 코드값
* ctrlKey : Ctrl 키를 누른 경우 true
* shiftKey : Shift 키를 누른 경우 true
* altKey : Alt 키를 누른 경우 true
*/
'DEVELOPMENT > Javascript' 카테고리의 다른 글
location.href 와 location.replace() (0) | 2010.03.31 |
---|---|
단위환산 프로그램 소스 (0) | 2010.01.04 |
크로스 브라우저 투명 코드 처리 (0) | 2009.09.21 |
[javascript] 사이트 즐겨찾기 추가하기 (0) | 2009.09.17 |
favicon 생성 (0) | 2009.09.17 |
[javascript] 사이트 즐겨찾기 추가하기
특정 사이트를 즐겨찾기에 추가하는 방법임다..
굳이 설명이 필요 없으리라..
<head>
<title>즐겨찾기 추가</title>
<script language="javascript">
/**
* 해당 사이트를 즐겨찾기에 추가한다.
* 이 스크립트를 사용하기 위해서는 각 브라우저마다 기능 여부를 체크후에 사용
*
**/
function addBookMark(){
var url = "http://hmjkor.tistory.com";
var title = "맹돌이의 블로그입니다.";
window.external.AddFavorite(url, title);
}
</script>
</head>
<body>
<a href="javascript:addBookMark();">즐겨찾기 추가</script>
</body>
</html>
'DEVELOPMENT > Javascript' 카테고리의 다른 글
Ajax 정복하기 (0) | 2009.10.10 |
---|---|
크로스 브라우저 투명 코드 처리 (0) | 2009.09.21 |
favicon 생성 (0) | 2009.09.17 |
[javascript] 현재 페이지를 시작페이지로 설정하기 (0) | 2009.09.17 |
[javascript] 바탕화면에 사이트 바로가기 만들기 (0) | 2009.09.15 |