Loading

Ajax起步

Express作為一個基于Node.js的一個極簡的開發框架

//引入express
const express = require('express');

//創建應用對象
const app =express();

//創建路由規則
app.get('/server',(request,response)=>{
    //設置響應頭，設置允許跨域
    response.setHeader('Access-Control-Allow-Origin','*'); 
    //設置響應體
    response.send('Hello Express');
});

app.listen(8000 , ()=>{
    console.log("服務已經啟動，8000端口打開");
})

app.liesten()是 Express 框架中啟動 HTTP 服務器的核心方法，其作用是將 Express 應用綁定到指定端口并開始監聽客戶端請求。第一個是開放端口，第二個是回調函數，在端口開啟后緊接著觸發

response.setHeader('Access-Control-Allow-Origin','*'); 設置響應頭，表示允許跨域，這樣設置表示允許所有類型的請求進行跨域

Ajax進行基本請求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax Get請求</title>
    <style>
        #result{
            width: 200px;
            height:100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>按鈕1</button>
    <div id="result"></div>

    <script>
        //獲取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //綁定事件
        btn.onclick = function(){
            //創建對象
            const xhr = new XMLHttpRequest();
            xhr.open('GET','http:127.0.0.1:8000/server');
            //發送
            xhr.send();
            //事件綁定，處理服務端返回結果
            //當狀態發生改變時調用，其中readystate是xhr對象的屬性
            //其中有五個狀態0 1 2 3 4 
            //0是剛開始的屬性，1是初始化完成，2是發送請求，3是服務端返回部分值，4是服務端返回所有值
            //change是改變
            xhr.onreadystatechange = function(){
                if(xhr.readyState===4){
                    if(xhr.status>=200&&xhr.status<300){
                        // console.log(xhr.status);
                        // console.log(xhr.statusText);
                        // console.log(xhr.getAllResponseHeaders());
                        // console.log(xhr.response);
                        result.innerHTML=xhr.response;
                    }
                }
            }
        }
    </script>
</body>
</html>

其中getElementsByTagName是根據標簽獲取一個動態的集合，其中[0]是用來獲取第0個按鈕

getElementById是根據id，作為唯一標識獲取相對應的元素

get傳參

xhr.open('GET','http:127.0.0.1:8000/server');直接在對應的url后面?加參數就可以

post傳參

<script>
        const result = document.getElementById("result");
        //綁定事件
        result.addEventListener("mouseover",function(){
            //1.創建對象
            const xhr = new XMLHttpRequest();
            //2.對象初始化
            xhr.open('POST','http://127.0.0.1:8000/server');
            //3.發送
            xhr.send("a=111&b=222");
            //4.事件綁定
            xhr.onreadystatechange = function(){
                //判斷
                if(xhr.readyState === 4){
                    if(xhr.status>=200&& xhr.status<300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
        
    </script>

當鼠標移過result對象時，執行函數，向服務端發送post請求，服務端需要有進行接收

將請求體放在send里，可以直接進行傳參

app.post('/server',(request,response)=>{
    //設置響應頭，設置允許跨域
    response.setHeader('Access-Control-Allow-Origin','*'); 
    //設置響應體
    response.send('Hello Express ;try to Post it!!!');
});

請求頭設置

const xhr = new XMLHttpRequest();
//2.對象初始化
xhr.open('POST','http://127.0.0.1:8000/server');
//設置請求頭
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.setRequestHeader('name','huidu');
//3.發送
xhr.send('a=111&b=222');

由于有自定義的請求頭，這就需要響應服務端可以接收任意請求頭：由于服務端還要進行預檢，需要對服務端進行option傳參，所以建議用all

app.all('/server',(request,response)=>{
    //設置響應頭，設置允許跨域
    response.setHeader('Access-Control-Allow-Headers','*');
    response.setHeader('Access-Control-Allow-Origin','*'); 
    //設置響應體
    response.send('Hello Express ;try to Post it!!!');
});

服務端響應JSON數據

app.get('/json-server',(request,response)=>{
    //設置響應頭，設置允許跨域
    response.setHeader('Access-Control-Allow-Headers','*');
    response.setHeader('Access-Control-Allow-Origin','*'); 
    //設置響應體
    const data ={
        name:'huidu'
    }
    //response.send('Hello Json;try to get it!!!');
    response.send(JSON.stringify(data));
});

服務端的響應體中是不能返回一個對象的，所以需要JSON.stringify()將對象數據轉化為字符串，然后進行響應對象的傳輸

我們可以在發送之前設置響應體的類型

<script>
        const result = document.getElementById('result');
        window.onkeydown = function(){
            //發送請求
            const xhr = new XMLHttpRequest();
            //初始化
            xhr.open('GET','http://127.0.0.1:8000/json-server');
            xhr.responseType='json';
            //發送
            xhr.send();
            //事件綁定
            xhr.onreadystatechange = function(){
                if(xhr.readyState ===4){
                    if(xhr.status>=200&&xhr.status<300){
                        console.log(xhr.response);
                        
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        }
    </script>

也可以用JSON.parse()進行數據轉換const result =JSON.parse(xhr.response)

Ajax對于網絡超時與網絡異常的處理

為了測試相關內容，我們首先需要讓服務端進行延時處理setTimeout，第一個回調函數，第二個是延遲事件

app.get('/overtime',(request,response)=>{
    //設置響應頭，設置允許跨域
    response.setHeader('Access-Control-Allow-Headers','*');
    response.setHeader('Access-Control-Allow-Origin','*'); 
    setTimeout(()=>{
        response.send('延遲顯示');
    },3000)
    //設置響應體
    
});

xhr.timeout=用于設置超時時間，ontimeout用于超時處理，onerror同理

<script>
        const btn = document.getElementsByTagName('button')[0];
        const result=document.querySelector('#result');

        btn.addEventListener('click',function(){
            const xhr = new XMLHttpRequest();
            xhr.timeout = 2000;
            xhr.ontimeout=function(){
                result.innerHTML="網絡超時?。?！";
            }
            xhr.onerror=function(){
                result.innerHTML="網絡異常?。。?;
            }
            xhr.open('GET','http://127.0.0.1:8000/overtime');
            xhr.send();
            xhr.onreadystatechange= function(){
                if(xhr.readyState ===4){
                    if(xhr.status>=200&&xhr.status<300){
                        result.innerHTML=xhr.response;
                    }
                }
            }
        })
    </script>

在JavaScript中，document.querySelector('#result') 和 document.getElementById('result') 都是用于獲取DOM元素的方法，但它們在實現機制、適用場景和性能上存在關鍵區別。

其中document.querySelector('#result')被用于如嵌套結構、組合條件，但是作用時間較長，document.getElementById('result')實現速度較快，作用于唯一id值

箭頭函數和傳統函數最大的區別就是箭頭函數無法實例化，且無法使用this,但是它勝在簡潔

Ajax進行取消請求

<script>
        const btn = document.getElementsByTagName('button');
        const result=document.querySelector('#result');

        let hxr = null;
        btn[0].addEventListener('click',()=>{
            hxr = new XMLHttpRequest();
            hxr.open("GET","http://127.0.0.1:8000/no-send");
            hxr.send();
            hxr.onreadystatechange=function(){
                if(this.readyState===4){
                    if(this.status>=200&&this.status<300){
                        result.innerHTML=this.response;
                    }
                }
            }
        });
        btn[1].addEventListener('click',()=>{
            hxr.abort();
        })
    </script>

hxr.abort();取消請求的核心

jQuery的Ajax傳輸

GET/POST傳參

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
        const result = document.getElementById('result');
        $('button').eq(0).click(()=>{
            // $.get('http://127.0.0.1:8000/jQuery',{a:100,b:200},(data)=>{
            //     // 正確操作：修改DOM內容而非變量本身
            //     result.innerHTML = JSON.stringify(data);
            // })
            $.post('http://127.0.0.1:8000/jQuery',{a:100,b:200},(data)=>{
                // 正確操作：修改DOM內容而非變量本身
                result.innerHTML = JSON.stringify(data);
            })
        })
    </script>

上面是簡單的get/post傳參，并非通用方法

$.post('url',傳入參數,回調函數(獲取的參數是response響應體對象))

通用型方法

<script>
        const result = document.getElementById('result');
        $('button').eq(0).click(() => {
            $.ajax({
                //url
                url: 'http://127.0.0.1:8000/jQuery',
                //請求類型
                type: 'POST',
                //響應體結果類型
                //dataType:'json',
                //傳入參數
                data: {
                    a: 100,
                    b: 200
                },
                //成功的回調
                success: (data) => {
                    result.innerHTML = data;
                    console.log("成功的回調");
                },
                //超時時間
                timeout: 2000,
                //失敗的回調
                error: () => {
                    console.log("出錯了");
                },
                headers: {
                    a: 100,
                    b: 200
                }
            })
        })
    </script>

axios的Ajax傳輸

<script>
        const result = document.getElementById('result');
        const btn = document.getElementsByTagName('button');

        axios.defaults.baseURL = 'http://127.0.0.1:8000';

        btn[0].addEventListener('click', () => {
            axios.get('/axios-serve', {
                //url參數
                params: {
                    id: 100,
                    vip: 7
                },
                //請求頭信息
                headers: {
                    name: 'huidu',
                    age: 20
                }
            }).then((value) => {
                result.innerHTML = value.data;
            })
        })
        btn[1].addEventListener('click', () => {
            axios.post('/axios-serve', {
                name: 'huidu',
                age: 20
            }, {
                headers: {
                    id: 200,
                    vip: 1
                },
                params: {
                    id: 200,
                    vip: 500
                }
            })
        })
    </script>

其中params是get傳入參數，也就是？之后的內容

跨域資源共享

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Guides/CORS

Ajax本身是支持同源策略的，需要同協議，同ip和同端口

但是我們可以在服務端加入響應頭，來確?？梢酝瓿煽缬蛸Y源共享

response.setHeader('Access-Control-Allow-Origin','*');

posted @ 2025-07-10 11:06 huidu01 閱讀(9) 評論(0) 收藏舉報

刷新頁面返回頂部

; ;