Ajax 개요 및 구현 프로세스
- 高洛峰원래의
- 2016-12-06 14:07:211081검색
1. ajax 개요
1. Ajax는 Asynchronous([ə'sˈŋkrənəs) JavaScript XML의 약자로서 새로운 기술이 아니라 기존 기술을 포괄적으로 활용한 것입니다. 이 기술은 페이지를 새로 고치지 않고도 서버에 추가 데이터를 요청할 수 있어 더 나은 사용자 경험을 제공합니다
2. Ajax 기술의 핵심은 Microsoft 특성에서 처음 도입한 XMLHttpRequest 객체(약어로 XHR)입니다. XHR이 등장하기 전에는 주로 숨겨진 프레임이나 인라인 프레임을 사용하여 일부 해킹을 통해 Ajax 스타일 통신을 구현해야 했습니다.
3. XHR은 서버에 요청을 보내고 서버 응답을 구문 분석하기 위한 원활한 인터페이스를 제공합니다. 서버에서 비동기적으로 더 많은 정보를 얻을 수 있다는 것은 사용자가 클릭한 후 페이지를 새로 고치지 않고도 새 데이터를 얻을 수 있다는 것을 의미합니다. 즉, XHR 객체를 이용하여 새로운 데이터를 얻은 후 DOM을 통해 새로운 데이터를 페이지에 삽입할 수 있습니다
4. Ajax 이름에는 XML 구성 요소가 포함되어 있지만 Ajax 통신은 아무 관련이 없습니다. 데이터 형식입니다. 페이지를 새로 고치지 않고 서버에서 데이터를 가져오는 기술이지만 반드시 XML 데이터는 아닙니다
2. 작업: jQuery에 캡슐화된 네이티브 ajax 및 ajax
1. 네이티브 ajax:
Ajax 기능: 요청 보내기(set request setRequest) 응답 받기(getResponse)
A. Ajax 네이티브 방식으로 요청 보내기:
가장 중요 Ajax의 고정 부분은 http 요청입니다.
1) 연결 설정: (IE7 이상 버전은 XMLHttpRequest 지원)
var xhr = new XMLHttpRequest() //비동기 요청 객체 생성
2) Get 요청 : 형식은 (url?name1=value1&name2=value2)
xhr.open("get","01-register.php?name="+name);//初始化异步get请求
xhr.send(null); //与服务器建立连接
3) 게시물 요청
xhr.open('post','01-XMLHTTPRequest-test.php');//请求报文行 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); /*post请求设置请求头*/ xhr.send('name=rose&age=20'); //请求报文体
4) get 요청과 post 요청의 차이점: ★get은 요청 헤더를 설정할 필요가 없지만 post는 요청 헤더를 설정해야 합니다★url을 통해 get 데이터가 전달되고, post 데이터가 send 메소드로 전달됩니다. B. Ajax 기본 방식으로 응답 수신:
/*监听服务器的响应*/
xhr.onreadystatechange=function(){
/*判断当前的响应是否成功 1.服务器做出了响应 2.响应的结果是正确的*/
if(xhr.status==200 && xhr.readyState==4){
var result=xhr.responseText;
console.log(result); //输出从服务器中获取到的数据
//接下来就可以对数据进行相应的处理了
}
};
C. 응답 데이터 처리: /*监听*/
xhr.onreadystatechange=function(){
if(xhr.status==200 && xhr.readyState==4){ /*判断状态*/
var result;
/*获取响应报文中的Content-Type*/
var ct=xhr.getResponseHeader("Content-Type");
/*判断Content-Type,进行数据的解析*/
if(ct.indexOf("xml") != -1){
result=xhr.responseXML;
}
else if(ct.indexOf("json") !=-1){
result=JSON.parse(xhr.responseText);
}
else{
result=xhr.responseText;
}
/*调用回调函数--委托--代理*/
success && success(result);
}
};
jQuery로 캡슐화된 ajax$.ajax({
type: 请求方式(get/post),
url: "register.php",
data: 发送请求数据,
beforeSend:function(){返回false可以取消本次ajax请求},
success:function(result){ 成功响应后调用 },
error:function(err){ 错误响应时调用 },
complete:function(){ 响应完成时调用(包括成功和失败) }
});
jQuery는 양식을 직렬화하는 특별한 방법을 제공합니다. $('form').serialize(): //양식을 직렬화합니다(예: 형식 key=val & key =val);
