Home  >  Article  >  Web Front-end  >  Do I need to introduce jquery to use ajax?

Do I need to introduce jquery to use ajax?

WBOY
WBOYOriginal
2022-08-31 16:20:163370browse

Using ajax does not require the introduction of jquery; the full name of ajax is "Asynchronous javascript and XML", that is, asynchronous JavaScript and XML, which refers to a web development technology for creating interactive web applications. JavaScript originally supports ajax. If Using native ajax requests, of course there is no need to introduce jquery.

Do I need to introduce jquery to use ajax?

The operating environment of this article: windows10 system, javascript1.8.5&&html5 version, DELL G3 computer.

Does jquery need to be introduced to use ajax?

js originally supports ajax. If you are using native ajax requests, of course you do not need to call the jquery library!

AJAX stands for "Asynchronous javascript and XML" (asynchronous javascript and XML), which refers to a web development technology for creating interactive web applications. AJAX enables web pages to update asynchronously by exchanging small amounts of data with the server in the background. This means that parts of a web page can be updated without reloading the entire page.

Why use AJAX? Advantages of AJAX?

AJAX is not a new programming language, but a technology for creating better, faster, and more interactive web applications.

Use Javascript to make requests to the server and handle responses without blocking the user! Core object XMLHTTPRequest. Through this object, your JavaScript can exchange data with the web server without reloading the page.

AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, which allows a web page to request a small amount of information from the server instead of the entire page.

AJAX makes Internet applications smaller, faster, and more user-friendly.

AJAX is a browser technology that is independent of Web server software. AJAX is based on the following web standards: JavaScript, XML, HTML, CSS. The web standards used in AJAX are well defined and supported by all major browsers. AJAX applications are browser and platform independent.

Web applications have many advantages over desktop applications; they can reach a wider range of users, they are easier to install and maintain, and they are easier to develop.

However, Internet applications are not as complete and user-friendly as traditional desktop applications. Through AJAX, Internet applications can become more complete and more user-friendly.

The use of Ajax in JavaScript.

Get method implementation:

<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 method implementation:

<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>

[Related tutorial recommendations: AJAX video Tutorial

The above is the detailed content of Do I need to introduce jquery to use ajax?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn