Ajax의 힘을 드러내다-JS 튜토리얼-php.cn

Ajax의 힘을 드러내다

王林

풀어 주다： 2024-01-30 10:02:17

원래의

1187명이 탐색했습니다.

Ajax의 힘을 드러내다

Ajax의 기능이 공개되었습니다. 구체적인 코드 예제가 필요합니다

Ajax(Asynchronous JavaScript and XML)는 웹 페이지에서 비동기 데이터 상호 작용에 사용되는 기술입니다. 이를 통해 전체 페이지를 새로 고치지 않고도 서버와 상호 작용하고, 데이터를 가져오고, 웹 페이지의 특정 부분을 업데이트할 수 있습니다. Ajax의 출현은 사용자 경험을 개선하고 웹 페이지의 역동성과 응답 속도를 높이는 데 중요한 역할을 합니다. 이 기사에서는 Ajax의 기능을 공개하고 독자가 Ajax를 더 잘 이해하고 사용할 수 있도록 구체적인 코드 예제를 제공합니다.

먼저 Ajax의 기본 사용법을 살펴보겠습니다. HTML 페이지에서는 JavaScript의 XMLHttpRequest 객체를 통해 비동기 요청을 보낼 수 있습니다. 다음은 간단한 코드 예입니다.

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

로그인 후 복사

위 코드는 먼저 XMLHttpRequest 객체를 생성한 다음 서버가 응답을 반환할 때 호출되는 콜백 함수 onreadystatechange를 설정합니다. readyState가 4(서버 응답이 완료되었음을 나타냄)이고 status가 200(성공을 나타냄)인 경우 코드는 서버에서 반환한 데이터를 id에 표시합니다. 데모 요소. onreadystatechange，该函数会在服务器返回响应时被调用。当readyState为4（表示服务器响应已完成）且status为200（表示成功）时，代码会将服务器返回的数据展示在id为demo的元素内。

接下来，我们将看到Ajax的一个重要特性——实现动态加载内容。通过Ajax，我们可以在不刷新整个页面的情况下，从服务器加载其他页面的内容。下面是一个利用Ajax实现动态加载内容的示例：

function loadContent() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("content").innerHTML = this.responseText;
    }
  };
  var pageUrl = "news.html";
  xhttp.open("GET", pageUrl, true);
  xhttp.send();
}

로그인 후 복사

上述代码中，通过XMLHttpRequest对象发送了一个GET请求，其中pageUrl变量为将要加载的页面的URL。服务器返回的页面内容将被显示在id为content的元素内。

另外，Ajax还可以与服务器进行数据交互，使得网页能够在不刷新的情况下实时更新数据。下面是一个通过Ajax实现实时获取服务器数据的示例：

function updateData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var data = JSON.parse(this.responseText);
      document.getElementById("data").innerHTML = data.value;
    }
  };
  var url = "data.json";
  xhttp.open("GET", url, true);
  xhttp.send();
}

// 每隔一段时间调用updateData函数
setInterval(updateData, 5000); // 每5秒更新一次

로그인 후 복사

通过上述代码，页面会每隔5秒从服务器上获取一次数据，然后将数据展示在id为data的元素内。这样就实现了实时更新数据的效果。

除了GET请求外，Ajax也支持POST请求。POST请求常用于提交表单数据到服务器。下面是一个使用Ajax发送POST请求的示例：

function postData() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var response = this.responseText;
      document.getElementById("result").innerHTML = response;
    }
  };
  var data = new FormData();
  data.append('username', 'john');
  data.append('password', '123456');
  xhttp.open("POST", "login.php", true);
  xhttp.send(data);
}

로그인 후 복사

上述代码中，FormData

다음으로 Ajax의 중요한 기능인 콘텐츠의 동적 로딩을 살펴보겠습니다. Ajax를 통해 전체 페이지를 새로 고치지 않고도 서버에서 다른 페이지의 콘텐츠를 로드할 수 있습니다. 다음은 Ajax를 사용하여 콘텐츠를 동적으로 로드하는 예입니다.

rrreee

위 코드에서 GET 요청은 XMLHttpRequest 객체를 통해 전송됩니다. 여기서 pageUrl 변수는 다음과 같습니다. 로드할 페이지입니다. 서버에서 반환된 페이지 콘텐츠는 ID가 content인 요소에 표시됩니다.

또한 Ajax는 데이터 서버와 상호 작용할 수 있으므로 웹 페이지를 새로 고치지 않고도 실시간으로 데이터를 업데이트할 수 있습니다. 다음은 Ajax를 통해 실시간으로 서버 데이터를 얻는 예입니다. 🎜rrreee🎜위 코드를 통해 페이지는 5초마다 서버로부터 데이터를 얻어와 ID가 인 요소에 데이터를 표시하게 됩니다. 데이터 내부. 이를 통해 실시간으로 데이터를 업데이트하는 효과를 얻을 수 있습니다. 🎜🎜Ajax는 GET 요청 외에도 POST 요청도 지원합니다. POST 요청은 양식 데이터를 서버에 제출하는 데 자주 사용됩니다. 다음은 Ajax를 사용하여 POST 요청을 보내는 예입니다. 🎜rrreee🎜위 코드에서 FormData 개체는 전송해야 하는 데이터를 저장하는 데 사용됩니다. open 함수의 세 번째 매개변수가 true로 설정되면 요청은 비동기식, 즉 Ajax 요청이 됩니다. 🎜🎜위의 코드 예제를 통해 독자들은 Ajax의 기능에 대해 더 깊이 이해하게 될 것이라고 믿습니다. 브라우저 호환성을 보장하기 위해 jQuery와 같은 JavaScript 라이브러리를 사용하여 Ajax 작업을 단순화할 수 있다는 점은 언급할 가치가 있습니다. 🎜🎜요약하자면, Ajax는 강력하며 콘텐츠를 동적으로 로드하고, 실시간으로 서버 데이터를 얻고, 양식을 제출하는 데 도움을 줄 수 있습니다. Ajax를 사용하면 웹페이지의 상호작용성과 응답 속도를 향상시키고 사용자에게 더 나은 경험을 제공할 수 있습니다. 이 기사의 특정 코드 예제가 독자가 Ajax 기술을 더 잘 이해하고 사용하는 데 도움이 되기를 바랍니다. 🎜

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