[전단 학습] AJAX 부분 학습 노트, 셋째 날

크로스 오 버 의 유래

실제 브 라 우 저 는 안전성 을 확보 하기 위해 ajax 에 같은 소스 정책 을 사 용 했 습 니 다

동원 은 ajax 가 요청 한 url 주소 에서 프로 토 콜, 도 메 인 이름, 포트 가 같 아야 데 이 터 를 얻 을 수 있다 는 뜻 이다.만약 그 중 어느 하나 가 다르다 면, 바로 전역

이다.

크로스 도 메 인 을 해결 하 는 방안 은 여러 가지 가 있 습 니 다. jsonp, iframe, H5 신규 API, flash 등 을 포함 하지만 현재 가장 많이 사용 되 는 방법 은 jsonp 로 해결 하 는 것 입 니 다

.
jsonp 원리

html 태그 에 따 르 면 script 태그 의 src 속성 은 도 메 인 을 넘 어 요청 을 보 낼 수 있 고 jsonp 는 이 특성 을 이용 하여 도 메 인 을 넘 을 수 있다

script 라벨 을 사용 하 는 방법 은 두 가지 가 있 습 니 다.

하 나 는 직접 정적 으로 script 라벨 을 쓰 는 것 으로 도 메 인 을 넘 어 데 이 터 를 얻 을 수 있 습 니 다.그러나 유연성 이 없 는 것 이 단점 입 니 다. 또한 탭 에 async 속성 (비동기 방식) 이 포함 되 어 있다 면 비동기 적 특성 으로 인해 데이터 코드 를 가 져 올 때 데이터 가 되 돌아 오지 않 으 면 의미 가 없습니다

동적 으로 script 탭 을 만 들 고 src 요청 주 소 를 동적 으로 설정 하여 head 탭 에 추가 합 니 다.이렇게 하면 도 메 인 을 매우 유연 하 게 만 들 수 있다

동적 생 성 및 요청 의 원 리 를 중점적으로 설명 한다.

동적 요청 방식 은 백 엔 드 언어 를 js 코드 문자열 로 되 돌려 주 는 것 이 고 이 js 코드 문자열 은 함수 호출 입 니 다.가 져 오 려 는 데 이 터 를 실제 인삼 으로 함수 에 전송 하면 호출 코드 를 되 돌 릴 때 데 이 터 를 직접 받 고 조작 할 수 있 으 며, 동적 생 성 기본 값 이 비동기 방식 이 라 고 해도 영향 을 받 지 않 습 니 다. 함수 가 향상 되 었 음 을 설명 하기 때문에 호출 코드 가 늦게 전 달 될 수도 있 습 니 다

그래서 요청 을 보 내기 전에 함 수 를 먼저 설명해 야 합 니 다. 내 부 는 데이터 에 대해 조작 하고 싶 은 코드 입 니 다.또한 더욱 유연 하기 위해 함수 명 을 매개 변수 로 백 엔 드 에 전달 할 수 있 고 백 엔 드 는 당신 이 전달 한 매개 변수 값 을 함수 명 으로 사용 할 수 있 습 니 다.사용자 정의 함수 명 에 해당 합 니 다

요약: 실제 jsonp 크로스 필드 의 본질은 백 엔 드 를 script 태그 로 되 돌려 주 는 것 입 니 다. 그리고 js 해상도 기 는 문자열 을 js 코드 로 처리 하고 실행 하기 때문에 되 돌아 오 는 json 형식 문자열 이 자동 으로 대상 으로 해석 되 고 되 돌아 오 는 함수 호출 문자열 이 해석 되 고 호출 되 는 것 을 발견 할 수 있 습 니 다.한 가지 더 주의해 야 할 것 은 jsonp 방법 으로 크로스 도 메 인 요청 을 보 내 면 get 방식 으로 만 보 낼 수 있 습 니 다. src 속성의 주 소 를 통 해 보 낼 수 있 기 때 문 입 니 다

문자 묘사 가 비교적 길 고 결합 코드 사례 를 보면 뚜렷 하 다

jqeury 패키지 jsonp 방법

jq 에 포 장 된 jsonp 크로스 도 메 인 기능 도 $.ajax() 방법 에 놓 여 있 지만 몇 가지 매개 변수 속성 은 주의해 야 합 니 다.

dataType 속성의 값 은 반드시 명시 적 으로 지정 해 야 한다 jsonp

jsonp 속성 은 함수 명 매개 변수의 중간 매개 변수 이름 을 지정 하 는 데 사 용 됩 니 다. 예 를 들 어 ?callback = fun 이 매개 변 수 는 jsonp 가 바로 callback 이라는 값 을 설정 하 는 데 사 용 됩 니 다

jsonpcallback 속성 은 함수 명 매개 변수 중의 값, 즉 백 엔 드 에 사용 할 함수 명 을 지정 하 는 데 사 용 됩 니 다. 바로 상기 예 에서 설정 fun 이라는 값

입 니 다.

데 이 터 를 되 돌려 주 는 리 셋 함 수 를 조작 하고 여전히 사용 success 속성

ajax 와 jsonp 총화

ajax 와 jsonp 크로스 도 메 인 두 가지 요청 발송 방식 에 대해 기본 지식 을 배 웠 습 니 다.업무 중 에 더욱 깊이 연구 할 수 있 고 현재 능숙 하 게 사용

ajax 든 jsonp 든 모두 폼 을 통 해 보 낸 데이터 가 아니 라 는 점 을 분명히 해 야 한다. 보통 전단 에서 폼 을 사용 하 는 장면 은 몇 가지 고정된 수요

이다.
렌 더 링 데이터 템 플 릿 엔진

템 플 릿 엔진 의 주요 목적 은 데 이 터 를 얻 은 후의 처리 코드 를 읽 기 쉽 고 유지 하기 편리 하 며 표준화 하 는 것 이다.프로그래머 마다 스타일 이 많 든 적 든 다 르 기 때문에 요청 한 데 이 터 를 처리 할 때 방식 도 다르다

후기 유지보수 가 불편 해 져 템 플 릿 엔진

을 출시 했다.

템 플 릿 엔진 의 실제 기능 은 특유 의 형식 을 통 해 데이터 처리 코드 를 작성 하고 최종 적 으로 엔진 렌 더 링 으로 코드 세 션

이 되 는 것 입 니 다.
artTemplate

많은 대형 인터넷 회사 들 이 자신의 템 플 릿 엔진 을 내 놓 았 는데 예 를 들 어 BAT 가 모두 있다.여기 서 텐 센트 의 템 플 릿 엔진 artTemplate 를 중점적으로 배 웁 니 다. 렌 더 링 효율 이 매우 높 기 때 문 입 니 다

템 플 릿 기능: html 로 작성 하지만 조건 판단 과 순환 이 있 습 니 다

대체적인 용법:

script 탭 에 템 플 릿 코드 를 작성 합 니 다. 이 탭 은 type=text/html, html 텍스트 형식

을 설정 해 야 합 니 다.

그리고 다른 script 태그 에서 템 플 릿 API 를 사용 합 니 다. template(' id'， ) 방법 으로 html 코드 로 렌 더 링 하고 마지막 으로 추가

템 플 릿 엔진 의 API 를 사용 하여 데이터 대상 을 전송 하면 그 안에 있 는 속성 을 자동 으로 해석 하기 때문에 속성 이름 을 직접 호출 하면 됩 니 다

렌 더 링 할 값 자체 가 html 태그 라면 엔진 은 자동 으로 일반 문자 로 전 의 됩 니 다.값 앞 에 # 번 호 를 붙 이면 뜻 을 바 꾸 지 않 고 html 태그 로 해석 합 니 다

한 탭 에 따로 템 플 릿 을 쓰 지 않 으 려 면 템 플 릿 내용 을 문자열 로 연결 한 다음 template.compile( ) 방법 으로 렌 더 링 함 수 를 만 들 고 이 함수 (render) 를 호출 하여 처리 할 데 이 터 를 실제 인삼 으로 전송 하면 html 세 션

으로 렌 더 링 할 수 있 습 니 다.

사용 매 뉴 얼 중의 사례 를 밝 혀 야 한다. 모든 용법 매 뉴 얼 에 설명 이 있다

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

[전단 학습] AJAX 부분 학습 노트, 셋째 날

좋은 웹페이지 즐겨찾기