온고 js 시리즈 (12) - ajax & & 장단 점 & node 백 엔 드
도끼 정정: Ajax
JavaScript - Ajax & node 백 엔 드
2005 년 Jesse James Garrett 는 'Ajax: A new Approach to Web Applications' 라 는 제목 의 글 을 발표 했다.그 는 이 글 에서 Ajax, 즉 Asynchronous JavaScript And XML 이라는 기술 을 소개 했다.이 기술 은 전체 페이지 를 새로 고치 지 않 고 서버 에 데 이 터 를 요청 할 수 있어 더 좋 은 사용자 체험 을 가 져 올 수 있다.
XMLHttpRequest
Ajax 기술 핵심 은 XMLHttpRequest 대상 (XHR 로 약칭) 으로 서버 에 요청 을 보 내 고 서버 응답 을 분석 하 는 원활 한 인 터 페 이 스 를 제공 합 니 다.서버 에서 더 많은 정 보 를 비동기 방식 으로 얻 을 수 있 으 며, 웹 페이지 를 새로 고치 지 않 은 상태 에서 서버 의 최신 데 이 터 를 페이지 로 업데이트 할 수 있 습 니 다.IE7 +, Firefox, Opera, Chrome, Safari 는 모두 원생 XHR 대상 을 지원 합 니 다.
var xhr = new XMLHttpRequest(); // XMLHttpRequest이 제 는 IE6 를 호 환 하지 않 아 도 된다 고 하지만 개발 원 가 를 조금 이라도 올 리 지 않 아 도 된다 는 말 이 있다.하지만 공부 할 때 는 잘 만 져 야 합 니 다.IE6 및 이하, 그러면 우 리 는 ActiveX 대상 을 MSXML 라 이브 러 리 를 통 해 실현 해 야 한다.호 환:
function CreateXHR() {
if(window.XMLHttpRequest){
return new XMLHttpRequest();
}else{
return new ActiveXObject('Microsoft.XMLHTTP');
}
}
var xhr = new CreateXHR(); Ajax 구현
1. 정례 화 된 XML HttpRequest
var xhr = new CreateXHR();2. 서버 연결
XHR 대상 을 사용 할 때 open () 방법 을 먼저 호출 해 야 합 니 다. 세 가지 인 자 를 받 아들 여야 합 니 다. 보 낼 요청 형식 (get, post), 요청 한 URL 과 비동기 여 부 를 표시 합 니 다. true 는 비동기 이 고 false 는 동기 화 입 니 다.
xhr.open('get', 'xzavier', true); open () 방법 은 진정 으로 요청 을 보 내지 않 고 보 낼 수 있 도록 요청 을 시작 합 니 다.send () 전에 요청 머리 를 사용자 정의 로 설정 하 는 방법 이 있 습 니 다. setRequestHeader ('key', 'value');오픈 방법 뒤에 놓 고 send 방법 전에 놓 으 세 요.단, 일반적으로 post 에서 양식 을 제출 할 때 사용 합 니 다:
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
3. 요청 보 내기
open () 방법 이 준 비 된 후에 send () 방법 으로 요청 을 보 내 고 send () 방법 으로 인 자 를 받 아들 여 요청 주체 로 보 내 는 데 이 터 를 받 습 니 다.필요 하지 않 으 면 null 을 작성 해 야 합 니 다.
xhr.send(null); send () 방법 을 실행 하면 서버 에 요청 이 전 송 됩 니 다.
4. 응답 받 기
서버 에 요청 을 보 내 면 응답 을 받 은 데 이 터 는 XHR 대상 의 속성 을 자동 으로 채 웁 니 다.모두 네 개의 속성 이 있 습 니 다. 앞의 세 개 를 자주 사용 합 니 다.
responseText
status HTTP
statusText HTTP
responseXML "text/xml" "application/xml"， XML DOM 응답 을 받 은 후, 응답 이 성공 적 으로 돌 아 왔 는 지 확인 하기 위해 status 속성 을 첫 번 째 로 검사 합 니 다.보통 HTTP 상태 코드 는 200 을 성공 의 표식 으로 합 니 다.HTTP 상태 코드:
HTTP
200 OK
400 Bad Request
404 Not found URL
500 Internal Server Error
503 ServiceUnavailable 비교적 자주 사용 하 는 상태 코드 를 열거 합 니 다. 상세 한 것 은 상태 코드 동기 화 방식 입 니 다.
var oButton = document.getElementById('myButton');
oButton.onclick = function() {
var xhr = new createXHR();
xhr.open('get', 'xzavier', false); //false
xhr.send(null);
if (xhr.status == 200) {
console.log(xhr.responseText);
} else {
console.log('error status:' + xhr.status + 'info:' + xhr.statusText);
}
}동기 화 는 이 기술 의 사용 방식 일 뿐, 매우 드 물 며, 비동기 호출 을 사용 하 는 것 이 야 말로 자주 사용 하 는 것 이다.비동기 호출 을 사용 할 때 readystatechange 이 벤트 를 촉발 한 다음 ready State 속성, 속성 값 을 검출 해 야 합 니 다:
0 open()
1 open() ， send()
2 send() ，
3
4 비동기 방식:
var oButton = document.getElementById('myButton');
oButton.onclick = function() {
var xhr = new createXHR();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
alert(xhr.responseText);
} else {
console.log('error status:' + xhr.status + 'info:' + xhr.statusText);
}
}
}
xhr.open('get', '/xzavier', true); //true
xhr.send(null);
}전체 ajax 비동기
서버 요청 을 제공 하 는 과정 에서 GET 와 POST 두 가지 방식 이 있 습 니 다.GET: 일반적으로 정보 획득 에 사 용 됩 니 다. URL 로 파 라 메 터 를 전달 하 는 것 은 정 보 를 보 내 는 수량 에 제한 이 있 습 니 다. 보통 2000 개의 문자 POST: 일반적으로 서버 의 자원 을 수정 하 는 데 사 용 됩 니 다. 보 낸 정보 에 제한 이 없습니다. GET: 주소 표시 줄 을 통 해 값 을 전달 하 는 POST: 폼 을 제출 하여 값 을 전달 하 는 것 입 니 다. 다음 과 같은 경우 POST 요청 을 사용 하 십시오.
GET 요청 은 서버 에 정 보 를 조회 하 는 데 가장 흔 한 요청 형식 입 니 다.필요 시 서버 에 제출 할 수 있 도록 검색 문자열 인 자 를 URL 의 끝 에 추가 할 수 있 습 니 다.
xhr.open('get', 'xzavier?name=' + name + '&sex='+ sex , true);
URL 후의 물음표 로 서버 에 키 값 대 데 이 터 를 전달 하고 서버 는 응답 데 이 터 를 되 돌려 받 습 니 다.특수 문자 전송 에 발생 하 는 문 제 는 encodeURIComponent () 를 사용 하여 인 코딩 처리 할 수 있 습 니 다. 중국어 문자 의 반환 및 전송 은 페이지 저장 과 utf - 8 형식 으로 설정 하면 됩 니 다.
xhr.open('get', 'xzavier?name=' + encodeURIComponent(name) + '&sex='+ encodeURIComponent(sex) , true);POST
POST 요청 은 매우 많은 데 이 터 를 포함 할 수 있 습 니 다. 우 리 는 폼 을 사용 하여 제출 할 때 많은 POST 전송 방식 을 사용 합 니 다.POST 가 요청 한 데 이 터 를 보 내 면 URL 뒤 를 따 르 지 않 고 send () 방법 으로 서버 에 데 이 터 를 제출 합 니 다.서버 에 POST 요청 을 보 내 는 것 은 분석 메커니즘 때문에 요청 머리 처리 가 필요 합 니 다.
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');Ajax 패키지
jquery 의 ajax 방법 은 매우 좋 습 니 다. 많은 코드 를 써 서 get 인지 post 인지, 비동기 인지 동기 화 할 필요 가 없습니다.물론, 자신 이 사용 하면 jquery 는 이미 완벽 합 니 다. 자신 이 포장 한 것 보다 훨씬 잘 사용 되 고 있 습 니 다. 물론 전 세계 인터넷 의 대부분 은 jquery 플러그 인 을 사용 하고 있 습 니 다.여기 서 jquery 의 ajax 는 말 하지 않 고 우리 스스로 하 나 를 포장 합 니 다. 하 나 를 포장 하 는 것 도 기초 지식 에 대한 공고 함 과 향상 입 니 다.
//
function params(data) {
var arr = [];
for (var i in data) {
arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
}
return arr.join('&');
}
function ajax(obj) {
var xhr = createXHR();
obj.data = params(obj.data);
if (obj.async === true) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
callback();
}
};
}
if (obj.method === 'get'){
obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data;
}
xhr.open(obj.method, obj.url, obj.async);
if (obj.method === 'post') {
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(obj.data);
} else {
xhr.send(null);
}
if (obj.async === false) {
callback();
}
function callback() {
if (xhr.status == 200) {
obj.success(xhr.responseText);
} else {
console.log('error status:' + xhr.status + 'info:' + xhr.statusText);
}
}
}사용:
var oButton = document.getElementById('myButton');
oButton.onclick = function() {
ajax({
method : 'post',
url : 'xzavier',
data : {
'name' : 'xzavier',
'sex' : 'man'
},
success : function (result) {
console.log(result);
},
async : true
});
}학습 용 으로 다른 곳 에 사용 하려 면 포장 해 야 할 것 이 아직 많다.
백 엔 드 구현
백 엔 드 지식 을 조금 독학 할 수 있어 서 공부 하기에 편리 하 다.예 를 들 어 phop, 물론, 지금 node 가 앞에서 이렇게 잘 나 가 는데 어떻게 사용 하지 않 을 수 있 습 니까?여 기 는 node 설치, 건설 프로젝트 등 지식 을 많이 이야기 하지 않 고 나중에 좀 더 익 혀 서 쓰 세 요.
var oButton = document.getElementById('myButton');
var sName = document.getElementById('isName').value;
oButton.onclick = function() {
ajax({
method : 'post',
url : 'isuser',
data : sName,
success : function () {
console.log('useable name');
},
async : false
});
}node 단: node 학습 (박 령 의 책: 깊이 들 어가 서 nodeJs) / / 사용자 등록 시 사용자 이름 이 존재 하 는 지 판단 합 니 다.
app.post('/isuser', function(req, res) {
var username = req.body.username;
User.isUser(username, function(status){ // ， ，
if(status == 'OK'){
res.send(200);
}else{
res.send(404);
}
});
});
Ajax 장단 점
Ajax 가 가 져 온 장점: 1. 비동기 모드 를 통 해 동적 리 셋 을 실현 하고 사용자 체험 을 향상 시 켰 습 니 다. 2. 브 라 우 저 와 서버 간 의 전송 을 최적화 시 켰 고 불필요 한 데이터 왕복 을 줄 였 습 니 다. 대역 폭 점용 을 줄 였 습 니 다. 3. Ajax 가 클 라 이언 트 에서 실 행 했 고 서버 가 맡 았 던 일 부 를 맡 았 으 며 큰 사용자 의 서버 부하 도 줄 였 습 니 다.
Ajax 의 단점: 1. Ajax 는 브 라 우 저 back 버튼 2, 보안 문 제 를 지원 하지 않 습 니 다. Ajax 는 서버 와 상호작용 하 는 디 테 일 을 노출 했 습 니 다. 3. 검색엔진 에 대한 지원 이 약 합 니 다. 4. 프로그램의 이상 메커니즘 을 파 괴 했 습 니 다. 5. 디 버 깅 이 쉽 지 않 지만 연구 개발 자 는 기술 단점 을 극복 하고 보완 하 며 기술적 장점 을 발휘 하 는 존재 O (∩ ∩) O ~
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Chrome 확장 프로그램을 Manifest V3로 마이그레이션하면서 얻은 교훈의 Manifest V3 마이그레이션 기록입니다. 기존 Chrome 확장 프로그램은 Manifest V3로 마이그레이션하지 않는 한 2023년에 작동이 중지됩니다. Mouse Dictionary는 2018년에 출시된...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
