AJAX 베일 벗 기기(AJAX 개인 학습 노트)1/5 페이지

AJAX 기술 은 다양한 컴퓨터 기술 의 결정 이다.그 이름 은 Asynchronism(비동기),JavaScript,And,XML 이라는 네 단어 이니셜,즉 비동기 JavaScript 요청 처리 XML 기술 이다.간단 한 설명 은 데이터 비동기 전송 웹 페이지 부분 새로 고침 기술 이다.AJAX 가 유행 이 라 WEB 프로 그래 밍 에서 AJAX 기술 을 적용 하지 않 으 면 미 비 한 디자인 이 라 고 할 수 있다.마치 흑백 텔레비전 과 컬러텔레비전 처럼 AJAX 는 후자 이 고 기술 업데이트 의 혁명 이다!본인 은 AJAX 를 배 운 지 10 여 일 밖 에 되 지 않 아 100%파악 했다 고 할 수 는 없 지만 깨 달 은 바 가 있 습 니 다.이제 자신의 학습 경과 와 체험 을 적어 서 당신 과 함께 나 누 세 요.1.학습 경과:AJAX 기술 의 글 과 책 이 많 고 동 영상 도 적지 않 아서 최근 2 년 동안 가장 핫 한 기술 이 라 고 할 수 있 습 니 다.그러나 대부분의 책 들 이 소개 하 는 것 이 모두 가 늘 지 않 거나 중점 이 두 드 러 지지 않 아 사람들 에 게 구름 과 안개 가 자욱 한 느낌 을 준다!여기 에는 청화대학 교 등 유명 교수 들 이 쓴 책 도 적지 않다.저 는 이런 부분 을 직접 느 꼈 습 니 다.저 는 먼저 스마트 팟 캐 스 트 ajax 동 영상 튜 토리 얼 을 다운 받 았 습 니 다.몇 절 을 보고 더 이상 볼 수 없 었 습 니 다.나중에 AJAX 기술 의 책 을 샀 습 니 다.두 꺼 운 60 위안 짜 리 책 을 샀 습 니 다.또한 날씨 가 매우 더 워 서 인내심 을 가지 고 8 일 동안 계속 볼 수 없 었 습 니 다.AJAX 기술 이 심오 해서 진정 으로 이해 할 수 없 는 것 같 아서 포기 하고 등산,수영,바다 에 들 어가 아름 다운 눈썹 과 이 야 기 를 나 누고 게임 을 하 며 비교적 나 쁜 행복 한 생활 을 했 습 니 다.나중에 날씨 가 시원해 지고 여가 시간 에 AJAX 라 는 일이 생각 나 서 시원 한 맥주 몇 병,작은 식품 몇 봉지,해바라기씨 한 봉 지 를 사서 집에 서 보면 서 마 시 면 정말 편안 합 니 다!생각 지도 못 한 것 은 이 한 번 보면 모든 것 이 통 하 는 것 이다.AJAX 기술 은 이렇게 하루 동안 파악 되 었 고 AJAX 기술 에 대한 자신의 독특한 깨 달 음 도 있 었 다.AJAX 응용 은 매우 간단 해서 인 코딩 이나 소량의 인 코딩 을 사용 하지 않 아 도 된다.2.학습 체험 과 응용 에 중점 을 둔 언어 와 도구 소프트웨어:저 는 C\#언어 를 독학 하기 때문에 개발 환경 은 NET 구조 에서(ASP.NET)이 고 개발 도 구 는 VS 2008(VS 2005 도 가능)을 사용 합 니 다.학습 중점:AJAX 컨트롤 의 설치,특히 AJAX Control Toolkit 부분의 설 치 는 제 블 로그 로 그 를 자세히 보 세 요.상세 한 소개 가 있 습 니 다.여기 서 더 이상 말 하지 않 겠 습 니 다.유일한 알림 은 VS 2008 과 VS 2005 는 AJAX 컨트롤 의 설치 와 사용 에 있어 차이 가 있 지만 크 지 않 습 니 다!1.AJAX 컨트롤 5 개의 기본 컨트롤 에 대한 소 개 는 마이크로소프트 가 제공 하 는 AJAX 의 가장 기본 적 인 5 대 컨트롤 이자 가장 실 용적 인 것 입 니 다.이 를 사용 하면 코드 를 만 들 지 않 고 관련 속성 을 간단하게 설정 하면 AJAX 비동기 데이터 업데이트 효 과 를 실현 할 수 있 습 니 다.이것 은 AJAX 기술 을 배 우 는 사람 을 가장 설 레 게 하 는 바보 식 응용 으로 효과 가 좋다.이전에 작 성 된 프로그램 에서 AJAX 기술 을 응용 하고 싶다 면 이 5 대 기본 컨트롤 로 10 분 안에 해결 할 수 있 습 니 다.다음은 구체 적 으로 소개 합 니 다.(1)ScriptManager 는 스 크 립 트 관리자 로 페이지 의 Ajax 컨트롤 에 관 한 스 크 립 트 자원 을 관리 합 니 다.웹 페이지 에 하나의 ScriptManager 만 있 을 수 있 습 니 다.어떤 경우 에 도 ASP.NET Ajax 컨트롤 을 사용 하려 면 페이지 에 ScriptManager 를 추가 해 야 합 니 다.(이 컨트롤 은 일반적으로 설정 할 필요 가 없습니다.구체 적 인 속성 과 사건 을 알 고 싶 으 면 관련 자 료 를 찾 을 수 있 습 니 다.)ScriptManager 컨트롤 의 프론트 코드 형식 은 다음 과 같 습 니 다.

 
<asp:ScriptManager ID="asm1" runat=” server” > 
<AuthenticationService Path="" /> 
<ProfileService LoadProperties="" Path="" /> 
<Scripts> 
<asp:ScriptReference /> 
</Scripts> 
<Services> 
<asp:ServiceReference Path="" /> 
</Services> 
</asp:ScriptManager> 

오류 가 발생 하기 쉬 운 속성 과 방법 에 중심 을 두 고 소개 합 니 다.1.ScriptMode 속성:전송 모드 를 지정 합 니 다.하나의 매 거 속성,네 개의 값:Auto,Debug,Release,Inherit.Auto:기본 값 입 니 다.웹.config 에서 retail 설정 절의 값 에 따라 스 크 립 트 를 보 내 는 모드 를 결정 합 니 다.retail 노드 값 이 true 라면 발표 모드 의 스 크 립 트 를 클 라 이언 트 에 보 낼 것 입 니 다.그렇지 않 으 면 디 버 깅 버 전 을 보 낼 것 입 니 다.Debug:retail 속성 값 이 false 일 때 ScriptManager 컨트롤 은 Debug 버 전의 스 크 립 트 를 클 라 이언 트 에 보 냅 니 다.Release:retail 속성 값 이 false 일 때 ScriptManager 컨트롤 은 Release 버 전의 스 크 립 트 를 클 라 이언 트 에 보 냅 니 다.Inherit:Auto 와 용법 은 같 지만 보통 사용 하지 않 습 니 다.2.Services 속성:현재 페이지 에서 참조 하 는 WEB 서 비 스 를 지정 합 니 다.노드 를 사용 하면 WEB 서 비 스 를 등록 할 수 있 습 니 다.ScritpManage 컨트롤 은 모든 등 록 된 웹 서비스 에 클 라 이언 트 대 리 를 생 성 합 니 다.(2)ScriptManager Proxy 는 ScriptManager 의 확장 으로 모판 페이지 나 사용자 컨트롤 을 사용 하 는 프로젝트 에 사용 되 는 스 크 립 트 관리자 입 니 다.프로젝트 페이지 에 ScriptManager 가 사용 되 었 을 때,모판 페이지 나 사용자 컨트롤 에서 ScriptManager Proxy 를 사용 하여 ScripManager 의 작업 을 대리 할 수 있 습 니 다.속성 상 기본적으로 ScriptManager 컨트롤 과 같 습 니 다.(3)UpdatePanel 은 가장 광범 위 한 Ajax 컨트롤 을 사용 하여 페이지 에 UpdatePanel 을 삽입 하면 페이지 의 부분 새로 고침 을 실현 할 수 있 습 니 다.페이지 에 여러 개의 UpdatePanel 이 있 을 수 있 고 UpdataPanel 간 에 도 서로 끼 워 넣 을 수 있 습 니 다.(응용 중점)Updatapanel 은 페이지 부분 리 셋 을 실현 하 는 컨트롤 입 니 다.UpdatePanel 컨트롤 의 프론트 코드 는 다음 과 같 습 니 다.

 
<asp:UpdatePanel runat="server" ID="udp1"> 
<ContentTemplate> //   
             
</ContentTemplate> 
<Triggers> //          ：      
<asp:AsyncPostBackTrigger ControlID="" EventName="" /> //        controlID(       ID) EventName（        ） 
<asp:PostBackTrigger ControlID="" /> //     ，       ，        ，  ajax         ，        ！ 
</Triggers> 
</asp:UpdatePanel> 

중요 한 속성 과 이벤트:Children AsTriggers:UpdateMode 속성 값 이 Conditional 일 때 UpdatePanel 의 하위 컨트롤 을 설정 하 는 이 단계 요청 서버 가 UpdatePanel 의 업 데 이 트 를 일 으 킬 수 있 는 지 여부 입 니 다.RenderMode:UpdatePanel 이 프론트 데스크 톱 HTML 코드 스타일 로 해 석 됨 을 나타 내 며,기본 값 은 Block 즉

로 해 석 됩 니 다.이 속성 이 Inline 으로 설정 되 었 을 때 UpdatePanel 은Triggers:현재 UpdatePanel 업 데 이 트 를 촉발 하 는 컨트롤 과 이 벤트 를 설정 합 니 다.(이것 은 중점)UpdateMode:현재 UpdatePancl 의 업데이트 모드 를 설정 합 니 다:Always 와 Conditional.Always 로 설정 하면 UpdatePanel 은 현재 Trigger 가 있 든 없 든 업 데 이 트 됩 니 다.Condition al 로 설정 되 었 을 때 현재 UpdatePancl 이 Trigger 나 ChildTrigger 를 설정 할 때 만 현재 UpdatePanel 컨트롤 이 페이지 를 업데이트 하거나 제출 하거나 서버 에서 Update()방법 을 호출 할 때 만 UpdatePanel 을 업데이트 합 니 다.특별히 설명해 야 할 속성 과 이벤트:Trigger 속성:현재 UpdatePanel 이 사용 하 는 제출 서버 방식 을 표시 합 니 다.동기 제출 또는 비동기 제출 두 가지 가 있 습 니 다.동기 화 제출 은 제출 할 컨트롤 ID 만 지정 하면 전체 페이지 에 제출 됩 니 다.비동기 제출 은 비동기 제출 을 촉발 하 는 컨트롤 ID 와 서버 쪽 의 이 벤트 를 설정 해 야 합 니 다.페이지 에 여러 개의 UpdatePanel 이 공존 합 니 다.페이지 에 여러 개의 UpdatePanel 이 공존 할 때 페이지 에 있 는 모든 UpdatePanel 컨트롤 의 UpdateMode 속성 을 Conditional 로 설정 해 야 합 니 다.그렇지 않 으 면 모든 UpdatePanel 부분 업데이트 가 실행 되면 모든 페이지 의 UpdatePanel 을 업데이트 합 니 다.이 유 는 간단 합 니 다.페이지 에 있 는 모든 UpdatePanel 컨트롤 의 UpdateMode 는 기본적으로 Always 입 니 다.여러 개의 UpdatePanel 플러그 인 사용:여러 개의 UpdatePanel 컨트롤 플러그 인 을 사용 할 때 병렬 된 UpdatePanel 업데이트 에 서로 영향 을 주지 않 습 니 다.그러나 두 개의 UpdatePanel 이 서로 끼 워 넣 을 때 내부 에 있 는 UpdatePanel 부분 업데이트 시 곳곳에 있 는 UpdatePanel 에 영향 을 주지 않 지만 바깥쪽 의 UpdatePanel 부분 업데이트 시 내부 에 끼 워 넣 은 모든 UpdatePanel 을 업데이트 합 니 다.(4)말 그대로 UpdateProgress 는 페이지 부분 새로 고침 과정 에서 의 작업 을 수행 합 니 다.UpdateProgress 는 새로 고침 과정 에서 사용자 상태 에 대한 우호 적 인 정 보 를 제공 할 수 있 습 니 다.예 를 들 어 고객 에 게'데 이 터 를 불 러 오고 있 습 니 다'등 입 니 다.UpdateProgress 컨트롤 프론트 코드 는 매우 간단 합 니 다.다음 과 같 습 니 다.

 
<asp:UpdateProgress runat="server" ID="upg1"> 
<ProgressTemplate> //   

<div alige=”ecnter” style=”width:1100px”> //                
<img src=”image/loading.gif” align=middle /> 
</div> 
</ProgressTemplate> 
</asp:UpdateProgress> 

중점 속성:Associated UpdatePanel ID:UpdateProgress 를 촉발 하 는 UpdatePanel 의 ID 를 설정 합 니 다.보통 페이지 에 여러 개의 UpdatePanel 이 있 는 경우 에 사 용 됩 니 다.DisplayAfter:진도 정 보 는 몇 밀리초 를 표시 합 니까?DynamicLayout:불 값 속성,현재 UpdateProgress 가 프론트 데스크 톱 에 직접 설명 하 는 것 이 아니 라 동적 으로 그 릴 지 설정 합 니 다.(5)WinForm 개발 에서 많은 프로그래머 들 이 Timer 컨트롤 의 기능 에 매 료 되 었 다.Timer 컨트롤 은 전체 페이지 를 제출 하거나 일부 페이지 를 새로 고침 하 는 등 정기 적 으로 사건 을 촉발 할 수 있 습 니 다.Timer 컨트롤 의 정 의 는 상당히 간단 합 니 다.컨트롤 만 설명 하면 됩 니 다.코드 는 다음 과 같 습 니 다.중점 속성:Enabled:Timer 컨트롤 을 시작 하고 Tick 이 벤트 를 실행 할 지 여부 입 니 다.Interval:Timer 컨트롤 은 Tick 이벤트 의 간격 이 벤트 를 촉발 합 니 다.단위 ms.Tick:Timer 컨트롤 은 Enabled 속성 을 true 로 설정 할 때 Interval 속성 이 제 한 된 시간 마다 이 벤트 를 실행 합 니 다.알림:보통 Timer 컨트롤 을 UpdatePanel 에 두 지 않 으 면 부분 업데이트 시 간격 을 다시 설정 합 니 다.프론트 코드:

 
<asp:ScriptManager ID=”ScriptManagel” runat=”server”></asp:ScriptManager> 
<asp:Timer ID=”Timer1” runat=”server” onTick=”Timer1_Tick” Interval=”1000” > 
</asp:Timer> 
<asp:UpdatePanel runat="server" ID="udp1"> 
<ContentTemplate> 
             
</ContentTemplate> 
<Triggers> 
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" /> 
</Triggers> 
</asp:UpdatePanel> 

2.AJAX 기본 원리 와 사례 코드 AJAX 기술:제 이 해 는 자바 Scritp 앞 배경 매개 변수 전달 기술 입 니 다.여기 매개 변 수 는 매개 변수 값 이나 데이터 흐름 일 수 있 습 니 다.AJAX 의 기본 원 리 를 배우 면 AJAX 확장 컨트롤 에 대한 응용 에 도움 이 되 고 빠 지지 않 는 일부분 입 니 다.다음은 학습자 가 AJAX 응용 원 리 를 체득 할 수 있 도록 AJAX 가 가장 많이 사용 하 는 방식 두 가 지 를 열거 합 니 다.초보 자가 일부 코드 를 이해 하지 못 하면 관련 명령 과 자 료 를 찾 을 수 있 습 니 다!응용 방식 1:일상적인 ASP.NET Ajax 실현 에서 이런 방식 은 가장 간단 하고 자주 사용 하 는 개발 방식 이다.이러한 방식 의 전형 적 인 실현 절 차 는 다음 과 같다.XML HttpRequest 대상 을 만 들 고 특정한 Ajax 처리 페이지 를 요청 한다.Ajax 처리 페이지 는 PageLoad 이벤트 에서 XML HttpRequest 대상 의 비동기 요청 을 받 습 니 다.Ajax 처리 페이지 는 요청 내용 에 따라 해당 하 는 응답 을 합 니 다.응답 은 this.Response.Write 또는 this.Response.OutPutStream 으로 응답 텍스트 나 응답 하 는 XML 문 서 를 Response 대상 에 넣 는 방식 을 사용 할 수 있 습 니 다.프론트 자 바스 크 립 트 스 크 립 트 는 XML HttpRequest 대상 의 responseText 나 responseXml 를 통 해 서버 응답 을 받 고 페이지 내용 을 동적 으로 수정 하여 Ajax 비동기 무 리 셋 응용 을 실현 합 니 다.
1 2 3 4 5 다음 페이지 전문 을 읽다