首頁 > web前端 > 前端問答 > ajax是做什麼的

ajax是做什麼的

青灯夜游
發布: 2022-01-17 16:41:50
原創
10044 人瀏覽過

AJAX是一種用來建立快速動態網頁的技術,可以用來:1、做局部請求以實現局部刷新(不刷新頁面而更新網頁);2、在頁面載入後從伺服器請求資料;3、在頁面載入後從伺服器接收資料;4、在後台向伺服器發送資料。

ajax是做什麼的

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

Ajax是什麼?

AJAX = Asynchronous JavaScript and XML.

AJAX是一種用來建立快速動態網頁的技術。

AJAX 透過在背景與伺服器進行少量資料交換,使網頁實現非同步更新。這意味著可以在不重載整個頁面的情況下,對網頁的某些部分進行更新。

傳統的網頁(不使用 AJAX)如果需要更新內容,必須重載整個頁面。

有許多使用 AJAX 的應用程式案例:Google Maps、Gmail、Youtube 和 Facebook。

         用於瀏覽器與伺服器之間使用非同步資料傳輸(HTTP 請求),做到局部請求以實現局部刷新

ajax是做什麼的

Ajax是做什麼的?有什麼用?

1、不刷新頁面而更新網頁(局部刷新)

2、在頁面載入後從伺服器請求資料

3、在頁面載入後從伺服器接收資料

4、在後台向伺服器發送資料

如何使用Ajax?

1、建立XMLHttpRequest物件

2、使用open方法設定和伺服器的互動資訊

3、設定requestHeader() request.setRequestHeader(屬性名稱,屬性值);

4、send() 設定發送的數據,開始和伺服器端互動

5、取得回應,註冊事件

範例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="getData()">获取数据</button>
    <script>
        function getData() {
            // 1.创建XMLHttpRequest对象
            var request = new XMLHttpRequest();
            // 2.使用open方法设置和服务器的交互信息
            // 请求的主体
            request.open(&#39;get&#39;, &#39;https://api.muxiaoguo.cn/api/lishijr/&#39;)
            // 3.设置requestHeader()    request.setRequestHeader(属性名称, 属性值);  
            // 这里用默认就好,不写了
            // 4. send()  设置发送的数据,开始和服务器端交互            
            request.send(); //调用send()之后,请求就会发送到服务器
            // 5.取得响应,注册事件
            request.onreadystatechange = function () {
                if (request.readyState === 4 && request.status === 200) { //4  响应完成 DONE
                    // console.log(request.responseText);
                    var res = JSON.parse(request.responseText);
                    console.log(res);
                    // 根据数据添加对应的节点
                    for (var arrIndex in res.data) {
                        // 创建一个节点
                        var p = document.createElement(&#39;p&#39;);
                        p.innerHTML = res.data[arrIndex].title;
                        document.body.appendChild(p);
                    }
                }
            }
            // 6.如果请求完成,并且响完成,可以获取到响应数据        

        }
    </script>
</body>
</html>
登入後複製

對AJAX的總結:

AJAX是異步的JavaScript和XML;

AJAX是一種用於創建更好更快以及交互性更強的Web應用程式的技術;

AJAX是一種獨立於Web伺服器軟體的瀏覽器技術;

AJAX不是一種新的程式語言,而是一種技術;

AJAX 使用JavaScript 在web 瀏覽器與web 伺服器之間來傳送和接收資料(前端後端互動);

AJAX在瀏覽器與Web伺服器之間使用非同步資料傳輸(HTTP請求)。

【相關教學推薦:AJAX影片教學

以上是ajax是做什麼的的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板