Ajax 데이터 요청의 기본 사항 이해

추천 관련 기사: ajax 비디오 튜토리얼

Ajax 개요

브라우저에서 제공하는 메서드 집합으로, 페이지 새로 고침 없이 데이터를 업데이트하고 사용자의 성능을 향상시킬 수 있습니다. 웹사이트 애플리케이션 경험 탐색.

Ajax 애플리케이션 시나리오

더 많은 데이터를 로드하기 위한 페이지 풀업
새로 고침 없이 목록 데이터 페이지 매기기
양식 항목이 포커스 데이터 확인을 유지함
검색 상자 프롬프트 텍스트 드롭다운 목록

Ajax 작동 원리 및 구현

Ajax 작동 원리
Ajax는 브라우저가 요청을 보내고 응답을 받아 사용자의 페이지 탐색에 영향을 주지 않고 페이지 데이터를 부분적으로 업데이트하여 사용자 경험을 향상시키는 에이전트와 동일합니다.

Ajax 구현 단계

1. Ajax 객체 만들기

 var xhr = new XMLHttpRequest();

1. Ajax에게 요청 주소와 요청 방법을 알려주세요

xhr.open('get', 'http://www.example.com');

1. 요청 보내기

 xhr.send();

1. 서버에서 요청을 클라이언트 응답 data

xhr.onload = function () {
     console.log(xhr.responseText);
 }

서버 측 응답의 데이터 형식
실제 프로젝트에서 서버 측에서는 대부분의 경우 응답 데이터 형식으로 JSON 개체를 사용합니다. 클라이언트가 응답 데이터를 받으면 JSON 데이터와 HTML 문자열을 연결한 다음 연결한 결과를 페이지에 표시해야 합니다.
http 요청 및 응답 과정에서 요청 매개변수이든 응답 내용이든 객체 유형인 경우 결국 객체 문자열로 변환되어 전송됩니다.

JSON.parse() // 将 json 字符串转换为json对象

요청 매개변수 전달

기존 웹사이트 양식 제출

             

 

GET 요청 방법

xhr.open('get', 'http://www.example.com?name=zhangsan&age=20');

POST 요청 방법

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send('name=zhangsan&age=20');

요청 메시지
HTTP 요청 및 응답 과정에서 전달된 데이터 블록을 보고서라고 합니다. 문서에는 전송될 데이터와 일부 추가 정보가 포함되어 있습니다. 이러한 데이터와 정보는 규정된 형식을 준수해야 합니다.

요청 매개변수 형식

1. application/x-www-form-urlencoded

 name=zhangsan&age=20&sex=男

1. application/json

{name: 'zhangsan', age: '20', sex: '男'}

요청 헤더의 Content-Type 속성 값을 application/으로 지정하세요. json, 서버 측의 현재 요청 매개변수 형식은 json입니다.

JSON.stringify() // 将json对象转换为json字符串

참고: get 요청은 json 개체 데이터 형식을 제출할 수 없으며 기존 웹사이트의 양식 제출은 json 개체 데이터 형식을 지원하지 않습니다.

서버 측 응답 가져오기

Ajax 상태 코드
ajax 객체 생성, ajax 객체 구성, 요청 보내기, 서버 측 응답 데이터 수신 후 프로세스의 각 단계는 값이며 이 값은 ajax 상태 코드입니다.

0: 요청이 초기화되지 않았습니다(open()이 아직 호출되지 않았습니다)
1: 요청이 설정되었지만 전송되지 않았습니다(send()가 아직 호출되지 않았습니다)
2: 요청이
3: 요청이 처리 중입니다. 일반적으로 응답의 일부 데이터가 이미 사용 가능합니다
4: 응답이 완료되었으며 서버의 응답을 가져와 사용할 수 있습니다

xhr.readyState // 获取Ajax状态码

onreadystatechange 이벤트

이 이벤트는 Ajax 상태 코드가 변경되면 자동으로 트리거됩니다.
Ajax 상태 코드는 이벤트 처리 함수에서 획득하고 판단할 수 있습니다. 상태 코드가 4인 경우 xhr.responseText를 통해 서버측 응답 데이터를 획득할 수 있습니다.

// 当Ajax状态码发生变化时
 xhr.onreadystatechange = function () {
     // 判断当Ajax状态码为4时
     if (xhr.readyState == 4) {
         // 获取服务器端的响应数据
         console.log(xhr.responseText);
     }
 }

서버 측 응답을 얻는 두 가지 방법의 차이점

Ajax 오류 처리

1. 网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。
   可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码
2. 网络畅通，服务器端没有接收到请求，返回404状态码。
   检查请求地址是否错误。
3. 网络畅通，服务器端能接收到请求，服务器端返回500状态码。
   服务器端错误，找后端程序员进行沟通。
4. 网络中断，请求无法发送到服务器端。
   会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理。

低版本 IE 浏览器的缓存问题
问题：在低版本的 IE 浏览器中，Ajax 请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。

解决方案：在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。

 xhr.open('get', 'http://www.example.com?t=' + Math.random());

Ajax 异步编程

Ajax 封装

问题：发送一次请求代码过多，发送多次请求代码冗余且重复。
解决方案：将请求代码封装到函数中，发请求时调用函数即可。

ajax({ 
     type: 'get',
     url: 'http://www.example.com',
     success: function (data) { 
         console.log(data);
     }
 })

Ajax 概述

它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。

Ajax 的应用场景

页面上拉加载更多数据
列表数据无刷新分页
表单项离开焦点数据验证
搜索框提示文字下拉列表

相关学习推荐：javascript视频教程

위 내용은 Ajax 데이터 요청의 기본 사항 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!