form 전송 방식의 문제 :
부분 변경이 안되고 전체가 변경된다.
동기방식 / 비동기방식
ajax 기본틀
var v_ajax = new XMLHttpRequest();
v_ajax.open("메소드", "url", true);
v_ajax.onreadystatechange = function(){
if(v_ajax.readyState == 4 && v_ajax.status == 200){
v_ajax.responseText;
}
}
v_ajax.send();ajax를 변수로 받아 변수명.open("method","url",비동기=true / 동기=false)
<script type="text/javascript">
var v_ajax = new XMLHttpRequest(); // 통신 대신 해줄 아저씨 생성
v_ajax.open("get", "/cnpt/insert", true) // 아저씨가 할일 지정 - true는 비동기, false는 동기
v_ajax.onreadystatechange = function(){ // 상황 변화 있으면 연락주세요
if(v_ajax.readyState == 4 && v_ajax.status == 200){ // 통신이 잘 완료되었다면
console.log(v_ajax,responseText);
}
}
v_ajax.send(); //아저씨 일 하세요
console.log("콘솔에 찍기");
</script>basic.html
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
/* function f_aaa(){
for(var i=1; i<=2; i++){
alert(i);
}
}
//AJAX는 밥줄, 비동기(asynchronouse) -> 이벤트와 같이 이해
setTimeout( function(){ // 대표적 비동기 함수
alert("2초뒤에 뜬다");
}, 2000);
//setTimeout은 대표적인 비동기 함수
f_aaa();
alert("안녕"); //f_aaa함수가 끝나야 실행됨 */
var v_ajax = new XMLHttpRequest(); // 통신객체 생성
v_ajax.open("get","roze.txt",true); // 통신객체에게 일을 시키려면 open이라는 메소드를 사용
// v_ajax.open("method","url",동기=false/비동기=true);
//통신아저씨가 상태가 바뀔 때마다 알려줌 (이벤트)
v_ajax.onreadystatechange = function(){
if(v_ajax.readyState == 4 && v_ajax.status == 200){ // 통신이 다 끝난 상태, 다른 건 관심없음
console.log(JSON.parse(v_ajax.responseText));
// alert(v_ajax.responseText);
// alert(v_ajax.responseXML);
/*
var v_xmldoc = v_ajax.responseXML;
var v_names = v_xmldoc.getElementsByTagName("name")[0];
console.log(v_names);
*/
}
}
v_ajax.send(); // 할일 하세요 명령
// alert("안녕 안녕"); //요거 뜨는 순서로 비동기/동기 여부를 알 수 있음
</script>jQuery.html
- jQuery에서 쓰는 Ajax를 만들어보기
<!DOCTYPE html>
<meta charset="UTF-8">
<script>
/* ajax 기본틀
var v_ajax = new XMLHttpRequest();
v_ajax.open("메소드", "url", true);
v_ajax.onreadystatechange = function(){
if(v_ajax.readyState == 4 && v_ajax.status == 200){
v_ajax.responseText;
}
}
v_ajax.send();
*/
//변수명으로 쓸수 있는 특수문자 $와 _
var $ = {}; // 내 맘대로 namespace용 빈 객체 생성(돈이 벌려요)
$.ajax = function(p_set){
var v_ajax = new XMLHttpRequest();
v_ajax.open(p_set.method, p_set.url, true);
v_ajax.onreadystatechange = function(){
if(v_ajax.readyState == 4 && v_ajax.status == 200){
if(p_set.dataType == "json"){
p_set.success(JSON.parse(v_ajax.responseText));
}else{
p_set.success(v_ajax.responseText);
}
}
}
v_ajax.send()
}
$.ajax({
method:"get",
url:"roze.txt",
dataType :"text",
success:function(p_rslt){
console.log(p_rslt);
}
});
$.ajax({
method:"get",
url:"rose.csv",
success:function(p_rslt){
console.log(p_rslt);
}
});
</script>
AJAX의 제약사항 - CORS 제약사항을 준다.
이유 : AJAX는 내용을 받아서 가공할 수 있기 때문에
위와 같은 오류가 뜬다.
