>  기사  >  웹 프론트엔드  >  Ajax를 사용하려면 jquery를 도입해야 합니까?

Ajax를 사용하려면 jquery를 도입해야 합니까?

WBOY
WBOY원래의
2022-08-31 16:20:163353검색

ajax를 사용하면 jquery를 도입할 필요가 없습니다. ajax의 전체 이름은 "비동기 JavaScript 및 XML"입니다. 즉, 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술을 의미하는 JavaScript입니다. . 기본 Ajax 요청을 사용하는 경우에는 jquery를 도입할 필요가 없습니다.

Ajax를 사용하려면 jquery를 도입해야 합니까?

이 기사의 운영 환경: windows10 시스템, javascript1.8.5&&html5 버전, DELL G3 컴퓨터.

ajax를 사용하려면 jquery를 도입해야 하나요?

js는 원래 ajax를 지원합니다. 기본 ajax 요청을 사용한다면 당연히 jquery 라이브러리를 호출할 필요가 없습니다!

AJAX는 "Asynchronous javascript and XML"(asynchronous javascript and XML)의 약자로, 대화형 웹 애플리케이션을 만들기 위한 웹 개발 기술을 말합니다. AJAX를 사용하면 백그라운드에서 서버와 소량의 데이터를 교환하여 웹 페이지를 비동기적으로 업데이트할 수 있습니다. 이는 전체 페이지를 다시 로드하지 않고도 웹페이지의 일부를 업데이트할 수 있음을 의미합니다.

AJAX를 사용하는 이유는 무엇인가요? AJAX의 장점?

AJAX는 새로운 프로그래밍 언어가 아니라 더 훌륭하고 빠르며 대화형인 웹 애플리케이션을 만들기 위한 기술입니다.

Javascript를 사용하여 서버에 요청하고 사용자를 차단하지 않고 응답을 처리하세요! 핵심 객체 XMLHTTPRequest. 이 개체를 통해 JavaScript는 페이지를 다시 로드하지 않고도 웹 서버와 데이터를 교환할 수 있습니다.

AJAX는 브라우저와 웹 서버 간의 비동기 데이터 전송(HTTP 요청)을 사용하므로 웹 페이지가 전체 페이지 대신 서버에서 소량의 정보를 요청할 수 있습니다.

AJAX는 인터넷 애플리케이션을 더 작고, 더 빠르고, 더 사용자 친화적으로 만듭니다.

AJAX는 웹 서버 소프트웨어와 독립적인 브라우저 기술입니다. AJAX는 JavaScript, XML, HTML, CSS와 같은 웹 표준을 기반으로 합니다. AJAX에서 사용되는 웹 표준은 모든 주요 브라우저에서 잘 정의되고 지원됩니다. AJAX 애플리케이션은 브라우저와 플랫폼에 독립적입니다.

웹 애플리케이션은 데스크톱 애플리케이션에 비해 많은 장점이 있습니다. 광범위한 사용자에게 접근할 수 있고, 설치 및 유지 관리가 더 쉽고, 개발도 더 쉽습니다.

그러나 인터넷 애플리케이션은 기존 데스크톱 애플리케이션만큼 완전하고 사용자 친화적이지 않습니다. AJAX를 통해 인터넷 애플리케이션은 더욱 완전해지고 사용자 친화적이 될 수 있습니다.

JavaScript에서 Ajax 사용.

Get 메서드 구현:

<script type="text/javascript">
     var xmlHttpRequest;
     //创建XHR对象
     function createXmlHttpRequest() {
         // if(typefo(XMLHttpRequest)!=&#39;undifine&#39;)
         if (window.ActiveXObject) { //如果是IE浏览器    
             return new ActiveXObject("Microsoft.XMLHTTP");
         } else if (window.XMLHttpRequest) { //非IE浏览器    
             return new XMLHttpRequest();
         }
     }
 
     //Ajax调用的方法
     function AjaxClick() {
         var url = "这里是你想要请求的URL,其中包括你的参数(?key1=value1&key2=value2)";
         //1.创建XMLHttpRequest组建    
         xmlHttpRequest = createXmlHttpRequest();
         //2.设置回调函数
         xmlHttpRequest.onreadystatechange = ajaxCallBack;
         //onreadystatechange。存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
         //3.初始化XMLHttpRequest组建    
         xmlHttpRequest.open("GET", url, true);
 
         //open(method,url,async),规定请求的类型、URL 以及是否异步处理请求。
         //method:请求的类型;GET 或 POST
         //url:文件在服务器上的位置
         //async:true(异步)或 false(同步)
 
         //GET方式请求可以设置浏览器不使用缓存,需加上下面这段
         //xhr.setRequestHeader("If-Modified-Since", "0");
 
         //4.发送请求    
         xmlHttpRequest.send(null);
     }
 
     //回调函数    
     function ajaxCallBack() {
         //readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
         //0: 请求未初始化
         //1: 服务器连接已建立
         //2: 请求已接收
         //3: 请求处理中
         //4: 请求已完成,且响应已就绪
 
         //status    请求响应状态码
         //200: "OK"
         //404: 未找到页面
         if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
             //表示请求成功,且正常响应
 
             //responseText    获得字符串形式的响应数据。
             //responseXML    获得 XML 形式的响应数据。
             var data = xmlHttpRequest.responseText;
 
             //你具体的代码操作写在这里,如对请求响应的数据如何处理
         }
     }
 </script>

Post 메서드 구현:

<script type="text/javascript">
     var xmlHttpRequest;
     //创建XHR对象
     function createXmlHttpRequest() {
         if (window.ActiveXObject) { //如果是IE浏览器    
             return new ActiveXObject("Microsoft.XMLHTTP");
         } else if (window.XMLHttpRequest) { //非IE浏览器    
             return new XMLHttpRequest();
         }
     }
 
     //Ajax调用的方法
     function AjaxClick() {
         var url = "这里是你想要请求的URL,不包括参数";
         //1.创建XMLHttpRequest组建    
         xmlHttpRequest = createXmlHttpRequest();
         //2.设置回调函数
         xmlHttpRequest.onreadystatechange = ajaxCallBack;
         //3.初始化XMLHttpRequest组建    
         xmlHttpRequest.open("POST", url, true);
         //4.添加请求头:
         xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         //5.发送请求,send("这里是你的请求参数")
         xmlHttpRequest.send("key1=value1&key2=value2");
     }
 
     //回调函数    
     function ajaxCallBack() {
         if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200) {
             var data = xmlHttpRequest.responseText;
 
             //你具体的代码操作写在这里,如对请求响应的数据如何处理
         }
     }
 </script>

【관련 튜토리얼 추천: AJAX 동영상 튜토리얼

위 내용은 Ajax를 사용하려면 jquery를 도입해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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