> 웹 프론트엔드 > JS 튜토리얼 > 아약스 란 무엇입니까? Ajax의 여러 구현 방법에 대한 자세한 설명(사용 예 포함)

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

寻∝梦
풀어 주다: 2018-09-10 11:09:04
원래의
2072명이 탐색했습니다.

이 글에서는 주로 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿