Ajax 개요 및 구현

이번에는 Ajax 개요 및 구현에 대해 소개해 드리겠습니다. Ajax 개요 및 구현의 주의사항은 무엇인가요?

Ajax는 Asynchronous JavaScript XML의 약자로 새로운 기술이 아니라 기존 기술을 포괄적으로 활용한 것입니다. 이 기사에서는 Ajax의 개요와 구체적인 구현 방법을 자세히 소개합니다. 도움이 필요한 친구들이 읽어보시길 바랍니다

1. ajax 개요

1. Ajax는 비동기식입니다. 기술의 활용. 이 기술은 페이지를 새로 고치지 않고도 서버에 추가 데이터를 요청할 수 있어 더 나은 사용자 경험을 제공합니다

2. Ajax 기술의 핵심은 Microsoft에서 처음 도입한 기능인 XMLHttpRequest 개체(줄여서 XHR)입니다. XHR이 등장하기 전에는 주로 숨겨진 프레임이나 인라인 프레임을 사용하여 일부 해킹을 통해 Ajax 스타일 통신을 구현해야 했습니다.

3. XHR은 서버에 요청을 보내고 서버 응답을 구문 분석하기 위한 원활한 인터페이스를 제공합니다. 서버에서 비동기적으로 더 많은 정보를 얻을 수 있다는 것은 사용자가 클릭한 후 페이지를 새로 고치지 않고도 새 데이터를 얻을 수 있다는 것을 의미합니다. 즉, 페이지 새로 고침을 사용하여 서버에서 데이터를 가져올 수 있지만 반드시 XML 데이터일 필요는 없습니다

2. 작업: jQuery에 캡슐화된 네이티브 ajax 및 ajax

1. 네이티브 ajax:

ajax 기능: 요청 보내기(set request setRequest) 응답 받기(getResponse)

A. Ajax 기본 방식으로 요청 보내기:

Ajax에서 가장 중요하고 고정된 부분은 http 요청입니다.

1) 연결 설정: (IE7 이상 버전은 XMLHttpRequest를 지원합니다.)

var xhr = new XMLHttpRequest(); //비동기 요청 객체 생성

2) 요청 받기: 형식은 다음과 같습니다. be ( url?name1=value1&name2=value2)var xhr = new XMLHttpRequest(); //创建异步请求对象

2)Get请求：格式必须是（url?name1=value1&name2=value2）

xhr.open("get","01-register.php?name="+name);//初始化异步get请求
xhr.send(null); //与服务器建立连接

3)Post请求

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需要设置请求头

★get的数据传递通过url进行，而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);rrreee

3)요청 게시

rrreee4) get과 post 요청의 차이점:

★Get은 요청 헤더를 설정할 필요가 없지만 post는 요청 헤더를 설정해야 합니다.

★get의 데이터는 url을 통해 전달되고 post의 데이터는 send 메소드로 전달됩니다. B, 응답을 수신하는 ajax 기본 방법 ：

rrreee

C. 응답 데이터 처리:

rrreee jQueryrrreeejQuery에 캡슐화된 ajax는 양식을 직렬화하는 특별한 방법을 제공합니다: 서버의 응답 상태를 모니터링해야 합니다. 이에 따라 서버에서 얻은 데이터를 처리합니다. 2) Readystate: 응답 상태, XMLHTTP 요청의 현재 상태를 반환합니다(0) Uninitialized이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 관련 기사를 주목하세요. PHP 중국어 웹사이트! 추천 도서:

$(' form').serialize(): //양식을 직렬화합니다(예: 형식 key=val & key=val);3.Response	1) onreadystatechange는 JavaScript 이벤트 중 하나이며 XMLHttpRequest의 상태를 모니터링하는 데 사용됩니다
	readyState state
상태 설명
🎜이 단계에서는 XMLHttpRequest 객체가 생성되었는지 확인하고 초기화 해제를 위해 open() 메서드 호출을 준비합니다. 값이 0이면 개체가 이미 존재한다는 의미입니다. 그렇지 않으면 브라우저에서 개체가 존재하지 않는다는 오류를 보고합니다. 🎜🎜🎜🎜🎜🎜(1) Loading 🎜🎜🎜🎜이 단계에서는 XMLHttpRequest 개체가 초기화됩니다. 즉, open() 메서드가 호출되고 매개 변수(method, url, 진실). 그리고 send() 메서드를 호출하여 서버에 요청 보내기를 시작합니다. 값 1은 요청이 서버로 전송되고 있음을 나타냅니다. 🎜🎜🎜🎜🎜🎜(2) 로딩 완료🎜	이 단계에서는 서버로부터 응답 데이터를 수신합니다. 하지만 얻은 것은 서버 응답의 원시 데이터일 뿐이며 클라이언트에서 직접 사용할 수 없습니다. 값 2는 모든 응답 데이터가 수신되었음을 나타냅니다. 그리고 데이터 분석의 다음 단계를 준비하세요.
(3) Interaction	이 단계에서는 수신된 서버 측 응답 데이터를 구문 분석합니다. 즉, 서버 측 응답 헤더가 반환한 MIME 유형에 따라 데이터를 responseBody, responseText 또는 responseXML 속성을 통해 접근할 수 있는 형식으로 변환하여 클라이언트에서 호출할 수 있도록 준비합니다. 상태 3은 데이터가 구문 분석되고 있음을 나타냅니다.
(4) 완료	이 단계에서는 모든 데이터가 클라이언트에서 사용할 수 있는 형식으로 파싱되어 파싱이 완료되었음을 확인합니다. 값 4는 데이터 구문 분석이 완료되었으며 XMLHttpRequest 객체의 해당 속성을 통해 데이터를 얻을 수 있음을 나타냅니다. ​​​자세한 내용은 문의해 주세요. 살펴보기——네트워크 전송 프로토콜(http 프로토콜)

Ajax 로그인 기능 구현

Ajax 비동기 로딩 구현

위 내용은 Ajax 개요 및 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!