728x90
반응형

* Ajax 란?

 - 비동기 JavaScript 와 XML 을 말한다. 간단히 말하면, 서버측 Scripts 와 통신하기 위한 XMLHttpRequest 객체를 사용하는 것을 말한다

서버측으로 다양한 형식(JSON, XML, HTML 및 일반 텍스트 형식들)의 정보를 주고 받을 수 있다. 

비동기성을 통해 페이지 전체를 리프레쉬 하지 않고 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있다.

서버로부터 받은 데이터로 작업을 한다


* Asynchronous JavaScript And Xml

1) 기존 방식의 사이트

 - 웹 어플리케이션의 기존 구현 방식의 특징

 - 웹브라우저가 웹 서버에 요청을 전송한다

 - 웹서버는 JSP/PHP/ASP 등의 서버측 어플리케이션을 사용해서 사용자의 요청을 처리한 뒤, 처리 결과를 HTML로 생성해서 웹 브라우저에 전송한다.

 - 웹 브라우저는 응답으로 받은 HTML을 분석한 뒤 그 내용을 화면에 그려준다.

 - 웹 브라우저가 웹 서버와 통신을 하고, 요청 결과는 HTML로 생성되고, 사용자의 입장에서는 페이지 이동이 발생하게 된다.

2) Ajax 방식의 사이트

 - 제시어 기능이 있다. 이는 '사용자에게 즉각적인 반응과 풍부한 UI 경험을 제공'한다는 것이다.

 - Ajax 는 ActiveX 와 같이 특정한 웹 브라우저에서만 제공하는 기능에 의존하지 않는다. 어떤 브라우저를 사용하든지 상관없이 웹 어플리케이션을 사용할 수 있게 된다.

3) Ajax 의 주요 구성요소

 - XMLHttpRequest : 웹 서버와 통신을 담당한다. 사용자의 요청을 웹 서버에 전송하고, 웹 서버로부터 받은 결과를 웹 브라우저에 전달한다.

 - DOM : 문서의 구조를 나타낸다. 폼 등의 정보나 화면 구성을 조작할 때 사용한다.

 - CSS : 글자색, 배경색, 위치, 투명도 등 UI 와 관련된 부분을 담당한다.

 - JavaScript : 사용자가 마우스를 드래그하거나 버튼을 클릭하면, XMLHttpReqeust 객체를 사용해서 웹 서버에 요청을 전송한다. 

또한, XMLHttpRequest 객체로부터 응답이 오면 DOM, CSS 등을 사용해서 화면을 조작한다.

4) 이벤트 발생 과정

 - 사용자가 이벤트를 발생시키면 JavaScript는 DOM을 사용해서 필요한 정보를 구한 뒤, XMLHttpRequest 객체를 통해서 웹 서버에 요청을 전달한다.

 - 웹 서버는 XMLHttpRequest로부터의 요청을 알맞게 처리한 뒤, 그 결과를 XML 이나 단순 텍스트로 생성해서 XMLHttpRequest 에 전송한다.

 - 서버로부터 응답이 도착하면 XMLHttpRequest 객체는 JavaScript에 도착 사실을 알리게 되고, JavaScript는 응답 데이터와 DOM을 조작해서 사용자 화면에 반영한다

5) Ajax 가 기존과 다른 차이점

 - 웹 브라우저가 아닌 XMLHttpRequest 객체가 웹 서버와 통신한다.

 - 웹 서버의 응답 결과가 HTML이 아닌 XML 또는 단순 text이다

 - 페이지 이동 없이 결과가 화면에 반영된다.


* 서버로의 비동기 통신 기술과 동적 클라이언트 스크립팅 기법을 하나로 묶은 것.

* 웹 브라우저가 직접 웹 서버와 통신하며 데이터를 주고 받는 것과 다르게 자바스크립트가 DOM을 이용해서 XMLHttpRequest 객체를 통해서 웹 서버에게 요청을 전달한다. 웹 서버는 요청을 처리하고 그 결과를 XML 이나 text로 생성해서 다시 XMLHttpRequest에게 넘긴다.그리고 그 결과는 다시 자바스크립트가 받아서 DOM을 이용해 조작해서 화면에 반응한다.



출처: http://smiler.tistory.com/entry/Ajax란?category=615519 [아직은 내가 쓴 글보다 퍼온 글이 훨씬 많음]

728x90
반응형
저작자표시 비영리 변경금지

'Web Programming > front-end' 카테고리의 다른 글

jQuery input 배열 값 가져오기  (0) 2018.08.30
오른쪽 마우스 금지 소스 / 드래그 금지 소스  (1) 2014.04.09
<thead><tbody>  (0) 2013.09.30
<colgroup>  (0) 2013.09.25
<div>코딩  (0) 2013.09.25
728x90
반응형

자바스크립트로 스크립트를 만들다 보면 생각외로 종종 input 배열의 값을 컨트롤 해야 할때가 있다.




Input 배열은 동일 페이지 내에서 Input으로 정의되는 항목에 대하여 중복되는 Name이 존재할경우 배열처럼 사용이 가능하다. 보통은 Checkbox를 이용할때 많이 사용한다고 볼 수 있다. 




내용이 간단하여 아래 예제만 봐도 쉽게 이해할 수 있다.



<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Input Array</title>

<script src="https://code.jquery.com/jquery-1.7.2.js"></script>

<script type="text/javascript">

 

    $(document).ready(function(){

       

 

      // 체크박스 배열 Loop

      $("input[name=chk]").each(function(idx){    

         

        // 해당 체크박스의 Value 가져오기

        var value = $(this).val();

 

        var eqValue = $("input[name=chk]:eq(" + idx + ")").val() ;

         

        console.log(value + ":" + eqValue) ;

         

      });

       

       

      // 배열의 특정순서의 Value 가져오기

      var orange = $("input[name=chk]:eq(2)").val() ;

      console.log(orange);

       

 

       

      // 배열의 특정순서 Value 변경하기

      $("input[name=chk]:eq(2)").val("포도") ;

       

      var chgFruit = $("input[name=chk]:eq(2)").val() ;

      console.log(chgFruit) ;

       

    });

 

</script>

</head>

<body>

    <input type="checkbox" name="chk" id="chk" value="바나나">바나나

    <input type="checkbox" name="chk" id="chk" value="딸기">딸기

    <input type="checkbox" name="chk" id="chk" value="오렌지">오렌지

</body>

</html>





출처: http://fruitdev.tistory.com/192?category=568934 [과일가게 개발자]

728x90
반응형
저작자표시 비영리 변경금지

'Web Programming > front-end' 카테고리의 다른 글

Ajax 란?  (0) 2018.09.04
오른쪽 마우스 금지 소스 / 드래그 금지 소스  (1) 2014.04.09
<thead><tbody>  (0) 2013.09.30
<colgroup>  (0) 2013.09.25
<div>코딩  (0) 2013.09.25
728x90
반응형

<body  oncontextmenu="return false" ondragstart="return false" onselectstart="return false">

 

=> 페이지 전체
  

<div id="mouse_no" oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
이곳에선 오른쪽 마우스 클릭 및 <br>드래그가 안되요!
</div>

 

=> 특정영역

 

 

contextmenu="return false"       우클릭 방지
ondragstart="return false"         드래그 방지
onselectstart="return false"       선택 방지

 

**jquery

=> 스크립트로 하면 알툴바로 뚤린다.

 

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script> 
$(document).ready(function(){
 $(document).bind("contextmenu", function(e) {
  return false;
 });
});
$(document).bind('selectstart',function() {return false;}); 
$(document).bind('dragstart',function(){return false;}); 
</script>
728x90
반응형
저작자표시 비영리 변경금지

'Web Programming > front-end' 카테고리의 다른 글

Ajax 란?  (0) 2018.09.04
jQuery input 배열 값 가져오기  (0) 2018.08.30
<thead><tbody>  (0) 2013.09.30
<colgroup>  (0) 2013.09.25
<div>코딩  (0) 2013.09.25
728x90
반응형

표에서 머리글 행을 표시할때 사용함.

<body>

<section>

<h1>thead태그</h1>

<table>

<caption>caption</

<colgroup>

<col >

<col >

</

<thead>

<tr>

<th>header #1</

<th>header #2</

</tr>

</thead>

<tfoot>

<tr>

<td>

<td>

</

<tbody>

<tr>

<td>body

<td>

</tr>

</tbody>

</table>

</section>

 

...

728x90
반응형
저작자표시 비영리 변경금지

'Web Programming > front-end' 카테고리의 다른 글

jQuery input 배열 값 가져오기  (0) 2018.08.30
오른쪽 마우스 금지 소스 / 드래그 금지 소스  (1) 2014.04.09
<colgroup>  (0) 2013.09.25
<div>코딩  (0) 2013.09.25
<frameset>  (0) 2013.09.25
728x90
반응형

<colgroup>
     <col width="20">
     <col width="150">
     <col>
     <col width="20">

</colgroup>
    <tr>
     <td height="9" class="rtable_lt"></td>
     <td class="rtable_t"></td>
     <td class="rtable_t"></td>
     <td class="rtable_rt"></td>
    </tr>

 

728x90
반응형
저작자표시 비영리 변경금지

'Web Programming > front-end' 카테고리의 다른 글

jQuery input 배열 값 가져오기  (0) 2018.08.30
오른쪽 마우스 금지 소스 / 드래그 금지 소스  (1) 2014.04.09
<thead><tbody>  (0) 2013.09.30
<div>코딩  (0) 2013.09.25
<frameset>  (0) 2013.09.25

+ Recent posts

티스토리툴바