목차
1. Ajax란
2. 네이티브 JS로 Ajax 구현
三、JQuery 实现 Ajax
一、什么是 Ajax
二、原生 JS 实现 Ajax
웹 프론트엔드 JS 튜토리얼 아약스 란 무엇입니까? Ajax의 여러 구현 방법에 대한 자세한 설명(사용 예 포함)

아약스 란 무엇입니까? Ajax의 여러 구현 방법에 대한 자세한 설명(사용 예 포함)

Sep 10, 2018 am 11:09 AM
ajax js

이 글에서는 주로 ajax의 구현 방법과 ajax의 정의 분석을 소개합니다. ajax를 사용하는 방법과 jQuery를 사용하여 ajax를 구현하는 방법을 모든 사람이 더 잘 이해할 수 있도록 하십시오. 지금부터 이 글을 읽어보세요

1. Ajax란

Ajax: 클라이언트와 서버 사이의 데이터 교환 프로세스를 구현하고 전송하는 비동기식 javascript 및 xml입니다. 비동기적으로 묻습니다. Ajax는 새로운 프로그래밍 언어가 아니라 더 좋고, 더 빠르고, 더 대화형인 웹 애플리케이션을 만들기 위한 기술입니다.
기술을 사용하면 좋은 점은 페이지를 새로 고칠 필요가 없고 페이지에서 데이터 전송을 기다리는 동안 다른 작업을 수행할 수 있습니다 .

2. 네이티브 JS로 Ajax 구현

여기에 구현 루틴이 있습니다. 아이디어는 대략 다음과 같습니다.
1 를 만듭니다. xmlHttpRequest 객체; xmlHttpRequest 对象
2. 用 open 调用,用 send 发送请求给 Ajax 引擎。
3. 服务器程序执行完毕后,把结果返回给客户端(用 xml.readyState == 4 && xml.status == 200 判定发送是否成功,然后用 xml.responseText接收后台传回来的数据)

//返回一个xmlHttpRequest 对象function creathttprequest()
{    if(window.XMLHttpRequest)        var xml=new XMLHttpRequest();    else
        var xml=ActiveXObject("Miscrosoft.XMLHTTP");    return xml;
}//这里是触发 AJAX 的事件(比如是一个按钮的点击事件之类的)function triggerAjax() {   //上面思路步骤1,创建一个xmlHttpRequest 对象
    var xml = creathttprequest();    //上面思路步骤2
    xml.open("POST","result.php",false);   //open() 第二个参数是你后台php文件的相对路径
    xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    xml.send(url);    //上面思路步骤3
    if(xml.readyState==4&&xml.status==200)
    {
        alert(xml.responseText);
    }
}
로그인 후 복사
로그인 후 복사

三、JQuery 实现 Ajax

JQuery实现 Ajax 的方法就简单很多了,已经封装好了一个 $.ajax函数,调用很方便。

$.ajax({ 
  type: "POST", //发送是以POST还是GET
  url: "ajax.php", //发送的地址
  dataType: "json", //传输数据的格式
  data: {"username": "zwkkkk1","password": 123456}, //传输的数据
  //成功的回调函数
  success: function(msg) { 
    console.log(msg) 
  }, 
  //失败的回调函数
  error: function() { 
    console.log("error") 
  } 
})
로그인 후 복사
로그인 후 복사

一、什么是 Ajax


Ajax:Asynchronous javascript and xml,实现了客户端与服务器进行数据交流过程同时是异步发送请求。Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
使用技术的好处是:不用页面刷新,并且在等待页面传输数据的同时可以进行其他操作

二、原生 JS 实现 Ajax


这里有一个实现的套路,思路大致是这样的:
1. 根据不同的浏览器,创建 xmlHttpRequest 对象
2. 用 open 调用,用 send 发送请求给 Ajax 引擎。
3. 服务器程序执行完毕后,把结果返回给客户端(用 xml.readyState == 4 && xml.status == 200 判定发送是否成功,然后用 xml.responseText接收后台传回来的数据)(想看更多就到PHP中文网AJAX开发手册栏目中学习)

//返回一个xmlHttpRequest 对象function creathttprequest()
{    if(window.XMLHttpRequest)        var xml=new XMLHttpRequest();    else
        var xml=ActiveXObject("Miscrosoft.XMLHTTP");    return xml;
}//这里是触发 AJAX 的事件(比如是一个按钮的点击事件之类的)function triggerAjax() {   //上面思路步骤1,创建一个xmlHttpRequest 对象
    var xml = creathttprequest();    //上面思路步骤2
    xml.open("POST","result.php",false);   //open() 第二个参数是你后台php文件的相对路径
    xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    xml.send(url);    //上面思路步骤3
    if(xml.readyState==4&&xml.status==200)
    {
        alert(xml.responseText);
    }
}
로그인 후 복사
로그인 후 복사

三、JQuery 实现 Ajax

JQuery实现 Ajax 的方法就简单很多了,已经封装好了一个 $.ajax2. Ajax 엔진에 요청을 보내기 위해 open을 사용합니다.

3. 서버 프로그램이 실행된 후 결과가 클라이언트로 반환됩니다(전송 성공 여부를 확인하려면 xml.readyState == 4 && xml.status == 200 사용). 그런 다음 xml.responseText를 사용하여 백그라운드에서 다시 전송된 데이터를 받습니다)

$.ajax({ 
  type: "POST", //发送是以POST还是GET
  url: "ajax.php", //发送的地址
  dataType: "json", //传输数据的格式
  data: {"username": "zwkkkk1","password": 123456}, //传输的数据
  //成功的回调函数
  success: function(msg) { 
    console.log(msg) 
  }, 
  //失败的回调函数
  error: function() { 
    console.log("error") 
  } 
})
로그인 후 복사
로그인 후 복사
3 JQuery는 Ajax를 구현합니다Ajax를 구현하는 JQuery의 방법 훨씬 간단하고 캡슐화되었습니다. $.ajax 함수는 호출하기 매우 편리합니다. #🎜🎜#rrreee#🎜🎜# 1. Ajax란 무엇인가요? Ajax는 새로운 프로그래밍 언어가 아니라 더 좋고, 더 빠르고, 더 대화형인 웹 애플리케이션을 만들기 위한 기술입니다. #🎜🎜#기술을 사용하면 좋은 점은 #🎜🎜# 페이지를 새로 고칠 필요가 없고 페이지에서 데이터 전송을 기다리는 동안 다른 작업을 수행할 수 있습니다 #🎜🎜#. #🎜🎜##🎜🎜# 2. 기본 JS로 Ajax 구현#🎜🎜#
#🎜🎜#여기에 구현 루틴이 있으며 아이디어는 대략 다음과 같습니다. #🎜🎜#1. , xmlHttpRequest 객체 #🎜🎜#2를 생성하여 호출하고 Ajax 엔진에 요청을 보냅니다. #🎜🎜#3. 서버 프로그램이 실행된 후 결과가 클라이언트로 반환됩니다. (xml.readyState == 4 && xml.status == 200을 사용하여 전송 성공 여부를 확인합니다. 그런 다음 xml.responseText를 사용하여 백그라운드에서 다시 전송된 데이터를 받습니다.) (자세한 내용을 보려면 PHP 중국어 웹사이트 #🎜🎜#AJAX Development Manual#🎜🎜# 열로 이동하여 알아보세요. ) #🎜🎜#rrreee#🎜🎜# 3. JQuery는 Ajax를 구현합니다#🎜🎜##🎜🎜#JQuery는 훨씬 간단한 방식으로 Ajax를 구현합니다. 이는 이미 $.ajax 함수를 캡슐화했습니다. 전화가 매우 편리합니다. #🎜🎜#rrreee#🎜🎜#이 기사는 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트 #🎜🎜#ajax 사용자 설명서 #🎜🎜# 열로 이동하세요. 궁금한 점이 있으면 문의하세요.) 질문 아래에 메시지를 남길 수 있습니다. #🎜🎜#

위 내용은 아약스 란 무엇입니까? Ajax의 여러 구현 방법에 대한 자세한 설명(사용 예 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 Apr 03, 2024 am 11:55 AM

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트

jQuery AJAX 요청에서 발생한 403 오류를 해결하는 방법 jQuery AJAX 요청에서 발생한 403 오류를 해결하는 방법 Feb 20, 2024 am 10:07 AM

jQuery AJAX 요청에서 발생한 403 오류를 해결하는 방법

jQuery AJAX 요청 403 오류를 해결하는 방법 jQuery AJAX 요청 403 오류를 해결하는 방법 Feb 19, 2024 pm 05:55 PM

jQuery AJAX 요청 403 오류를 해결하는 방법

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까? Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까? Mar 09, 2024 pm 05:36 PM

Ajax를 사용하여 PHP 메소드에서 변수를 얻는 방법은 무엇입니까?

jQuery AJAX 오류 403 문제를 해결하는 방법은 무엇입니까? jQuery AJAX 오류 403 문제를 해결하는 방법은 무엇입니까? Feb 23, 2024 pm 04:27 PM

jQuery AJAX 오류 403 문제를 해결하는 방법은 무엇입니까?

PHP 대 Ajax: 동적으로 로드되는 콘텐츠를 생성하기 위한 솔루션 PHP 대 Ajax: 동적으로 로드되는 콘텐츠를 생성하기 위한 솔루션 Jun 06, 2024 pm 01:12 PM

PHP 대 Ajax: 동적으로 로드되는 콘텐츠를 생성하기 위한 솔루션

js와 vue의 관계 js와 vue의 관계 Mar 11, 2024 pm 05:21 PM

js와 vue의 관계

JS의 AI 시대가 왔습니다! JS의 AI 시대가 왔습니다! Apr 08, 2024 am 09:10 AM

JS의 AI 시대가 왔습니다!

See all articles