AJAX 笔记 ajax

最新推荐文章于 2023-10-31 12:39:43 发布

这个饕字怎么读

最新推荐文章于 2023-10-31 12:39:43 发布

阅读量135

点赞数

分类专栏：笔记文章标签： ajax ajax跨域问题 nodejs

本文链接：https://blog.csdn.net/weixin_44427114/article/details/112861637

版权

笔记专栏收录该内容

34 篇文章 0 订阅

订阅专栏

自己用英文写的笔记，因为输入法切换太麻烦了＼(º □ º l|l)/

AJAX

1. Use Nodejs and Express

the basic use of express

// 1. import express
const express = require('express');

// 2. create app object
const app = express();

// 3. create route rule
app.get('/',(req, res)=>{
    // set the response
    res.send('I Like Oasis\'s song')
});

// 4. listen port and start the server
app.listen(8000,()=>{
    console.log('server has been started as 8000 port')
})

2. AJAX Request

basic operation

express server:

// 1. import express
const { response } = require('express');
const express = require('express');

// 2. create app object
const app = express();

// 3. create route rule
app.get('/server',(request,response)=>{
    // set the response, set to Allow Cross-Origin 允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');

    response.send('RadioHead');
});

// 4. listen port and start the server
app.listen(8000,()=>{
    console.log('server has been started as 8000 port')
})

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>Click here to send request</button>
    <div id="result"></div>


    <script>
        // get the button element
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result')
        // bind the event
        btn.onclick= function(){
            // 1. create object
            const xhr = new XMLHttpRequest();
            // 2. init and set the method and url
            xhr.open('GET','http://127.0.0.1:8000/server');
            // 3. send
            xhr.send();
            // 4. process the result returned from server
            xhr.onreadystatechange = function(){
                // readyState can be 0 1 2 3 4
                if(xhr.readyState === 4){
                    // identify the status 200 404 403 500 ...
                    // normally the status 200 means a successful request
                    if(xhr.status >= 200 && xhr.status<300){
                        console.log(xhr.status);  // status
                        console.log(xhr.statusText); // status text
                        console.log(xhr.getAllResponseHeaders());
                        console.log(xhr.response);
                        result.innerHTML = xhr.response
                    }
                }
            }
        }
    </script>
</body>
</html>

get the XMLHttpRequest (xhr) :

const xhr = new XMLHttpRequest();

send post request

server:

// 1. import express
const { response } = require('express');
const express = require('express');

// 2. create app object
const app = express();

// 3. create route rule
app.post('/server',(request,response)=>{
    // set the response, set to Allow Cross-Origin 允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');

    response.send('Suede');
});

// 4. listen port and start the server
app.listen(8000,()=>{
    console.log('server has been started as 8000 port')
})

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        // get the button element
        const result = document.getElementById('result')
        // bind event
        result.addEventListener('mouseover',function(){
            // create object
            const xhr = new XMLHttpRequest();
            // init
            xhr.open('POST','http://127.0.0.1:8000/server');
            // send
            xhr.send();
            // bind event
            xhr.onreadystatechange = function(){
                // identify
                // readyState can be 0 1 2 3 4
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status<300){
                        // process
                        result.innerHTML = xhr.response
                    }
                }
            }
        })
    </script>
</body>
</html>

add parameters

get method

directly append ?a=xxx&b=xxx in the end of the url

xhr.open('POST','http://127.0.0.1:8000/server?a=xxx&b=xxx');

post method

use:

xhr.send('name=jinondo&pwd=123');

xhr.send('name:jinondo&pwd:123');

set request header

......
// init
xhr.open('POST','http://127.0.0.1:8000/server');
// set header messages
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// send
xhr.send('name:jinondo&pwd=123');
......

but if you want to set a custom header messages

you need to add into the server codes:

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

and change the method to ‘all’

// 3. create route rule
app.all('/server',(request,response)=>{
    // set the response, set to Allow cross-domain 允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');

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

    response.send('Suede');
});

Json data

server：

// 1. import express
const { response } = require('express');
const express = require('express');

// 2. create app object
const app = express();

// 3. create route rule
app.get('/json-server',(request,response)=>{
    // set the response, set to Allow Cross-Origin 允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');

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

    let data = {
        name: 'jinondo'
    }

    let str = JSON.stringify(data)

    response.send(str);
});

// 4. listen port and start the server
app.listen(8000,()=>{
    console.log('server has been started as 8000 port')
})

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px rgb(14, 255, 54);
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result');

        // bind keydown event
        window.onkeydown = function(){
            const xhr = new XMLHttpRequest();
            console.log('enter');

            xhr.open('GET','http://127.0.0.1:8000/json-server');

            xhr.send();

            xhr.onreadystatechange = function(){
                // identify
                // readyState can be 0 1 2 3 4
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status<300){
                        // process
                        let data = JSON.parse(xhr.response)
                        console.log(data);
                        console.log(data.name);
                        result.innerHTML = data.name;
                    }
                }
            }
        }
    </script>
</body>
</html>

window.onkeydown = function(){
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'json'   // ************** set the responseType ****************

    xhr.open('GET','http://127.0.0.1:8000/json-server');

    xhr.send();

    xhr.onreadystatechange = function(){
        // identify
        // readyState can be 0 1 2 3 4
        if(xhr.readyState === 4){
            if(xhr.status >= 200 && xhr.status<300){
                // process
                console.log(xhr.response);
                result.innerHTML = xhr.response.name;
            }
        }
    }
}

3. Use nodemon

npm install -g nodemon

start:

nodemon server.js

then you can restart the server without manually restarting

4. IE Cache Problem

solution: append a parameter in the end of the request url

like http://127.0.0.1:8000/ie?t=Data.now()

Data.now() is a timestamp, you can concat the url string in js like:

xhr.open('GET','http://127.0.0.1:8000/ie?t=' + Date.now());

5. Timeout Setting

server:

// 1. import express
const { response } = require('express');
const express = require('express');

// 2. create app object
const app = express();

// 3. create route rule
app.get('/delay',(request,response)=>{
    // set the response, set to Allow cross-domain
    response.setHeader('Access-Control-Allow-Origin','*');

    // set timeout
    setTimeout(()=>{
        response.send('delay response');
    },3000)
});

// 4. listen port and start the server
app.listen(8000,()=>{
    console.log('server has been started as 8000 port')
})

html:

......
<body>
    <button>Click here</button>
    <div id="result"></div>
    
    <script>
        const btn = document.getElementsByTagName('button')[0]
        const result = document.getElementById('result');

        // bind the event
        btn.addEventListener('click',function(){
            const xhr = new XMLHttpRequest();
            // set the timeout
            xhr.timeout = 2000
            // if time out, call back
            xhr.ontimeout = function(){
                alert('Timeout man! Try it again plz')
            }
            // if network error, call back
            xhr.onerror = function(){
                alert('Network Error!')
            }

            xhr.open('GET','http://127.0.0.1:8000/delay');

            xhr.send();

            xhr.onreadystatechange = function(){
                // identify
                // readyState can be 0 1 2 3 4
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status<300){
                        // process
                        console.log(xhr.response);
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
</body>

6. Cancel Request

<body>
    <button>Send Request</button>
    <button>Cancel Request</button>
    
    <script>
        const btns = document.getElementsByTagName('button');
        let xhr = null;

        btns[0].onclick = function(){
            xhr = new XMLHttpRequest();
            xhr.open('GET','http://127.0.0.1:8000/delay')
            xhr.send()
        }

        // abort() can cancel the request
        btns[1].onclick = function(){
            xhr.abort();
        }
    </script>
</body>

7. Duplicate Request Sending Problem

<body>
    <button>Send Request</button>
    
    <script>
        const btns = document.getElementsByTagName('button');
        let xhr = null;
        let isSending = false;

        btns[0].onclick = function(){
            // identify the variable
            if(isSending) xhr.abort();

            isSending = true;
            xhr = new XMLHttpRequest();
            xhr.open('GET','http://127.0.0.1:8000/delay')
            xhr.send();
            
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    // change the variable'
                    isSending = false
                }
            }

        }
    </script>
</body>

8. Jquery Send Ajax

8.1 get and post

server:

// 1. import express
const { response } = require('express');
const express = require('express');

// 2. create app object
const app = express();

// 3. create route rule
app.all('/jquery-server',(request,response)=>{
    // set the response, set to Allow cross-domain 允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');

    // response.send('Oasis Wonderwall')
    const data = {name: 'jinondo'}
    response.send(JSON.stringify(data))
});

// 4. listen port and start the server
app.listen(8000,()=>{
    console.log('server has been started as 8000 port')
})

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
</head>
<body>
    <button>Get</button>
    <button>Post</button>
    <button>Common function Ajax</button>
    
    <script>
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8000/jquery-server',{a:100,b:200},function(data){
                console.log(data);
            },'json')
        })

        $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8000/jquery-server',{a:100,b:200},function(data){
                console.log(data);
            })
        })

    </script>
</body>
</html>

search https://www.bootcdn.cn/ to add jquery or sth else

8.2 Common function ajax

server

// 1. import express
const { response } = require('express');
const express = require('express');

// 2. create app object
const app = express();

// 3. create route rule
app.get('/delay',(request,response)=>{
    // set the response, set to Allow Cross-Origin 允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');

    // set timeout
    setTimeout(()=>{
        response.send('delay response' + Date.now());
    },3000)
});

app.all('/jquery-server',(request,response)=>{
    // set the response, set to Allow cross-domain 允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');

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

    const data = {name: 'jinondo'}
    response.send(JSON.stringify(data))

    // set timeout
    // setTimeout(()=>{
    //     const data = {name: 'jinondo'}
    //     response.send(JSON.stringify(data))
    // },3000)
    
    // response.send('Oasis Wonderwall')
});

// 4. listen port and start the server
app.listen(8000,()=>{
    console.log('server has been started as 8000 port')
})

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    
</head>
<body>
    <button>Get</button>
    <button>Post</button>
    <button>Common function Ajax</button>
    
    <script>
        $('button').eq(2).click(function(){
            $.ajax({
                // url
                url: 'http://127.0.0.1:8000/jquery-server',
                // parameter
                data: {a:300,b:400},
                // type
                type: 'GET',
                // data type
                dataType: 'json',
                success: function(data){
                    console.log(data);
                },
                timeout:2000,
                error: function(){
                    console.log('Something wrong happened');
                },
                headers: {
                    c: 300,
                    d: 400
                }
             })
        })
    </script>
</body>
</html>

9. Axios Send Ajax

9.1 get and post

server:

// 1. import express
const { response } = require('express');
const express = require('express');

// 2. create app object
const app = express();

// 3. create route rule
app.all('/axios-server',(request,response)=>{
    // set the response, set to Allow Cross-Origin
    response.setHeader('Access-Control-Allow-Origin','*');

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

    const data = {name: 'jinondo'}
    response.send(JSON.stringify(data))

});

// 4. listen port and start the server
app.listen(8000,()=>{
    console.log('server has been started as 8000 port')
})

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    
</head>
<body>
    <button>Get</button>
    <button>Post</button>
    <button>AJax</button>
    
    <script>
        const btns = document.querySelectorAll('button')

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

        btns[0].onclick = function(){
            // get method
            axios.get('/axios-server',{
                // url params
                params: {
                    id: 100,
                    vip: 7
                },
                // headers
                headers: {
                    name: 'jinondo',
                    age: 20
                }
            }).then(value =>{
                console.log(value);
            })
        }

        btns[1].onclick = function(){
            // get method
            axios.post('/axios-server',{
                name:'jinondo',
                age:1
            },{
                // url params
                params: {
                    id: 100,
                    vip: 7
                },
                // headers
                headers: {
                    height : 10,
                    weight : 10
                }
            }).then(value =>{
                console.log(value);
            })
        }
    </script>
</body>
</html>

9.2 function axios

server:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    
</head>
<body>
    <button>Get</button>
    <button>Post</button>
    <button>AJax</button>
    
    <script>
        const btns = document.querySelectorAll('button')

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

        btns[2].onclick = function(){
            axios({
                method: 'POST',
                url: '/axios-server',
                params: {
                    vip: 10,
                    level: 30
                },
                headers: {
                    a: 100,
                    b: 200
                },
                data:{
                    username: 'admin',
                    password: '123'
                }
            }).then(response=>{
                console.log(response.status);
                console.log(response.statusText);
            })
        }
    </script>
</body>
</html>

10. fetch function

// 1. import express
const { response } = require('express');
const express = require('express');

// 2. create app object
const app = express();

// 3. create route rule
app.all('/fetch-server',(request,response)=>{
    // set the response, set to Allow Cross-Origin
    response.setHeader('Access-Control-Allow-Origin','*');

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

    const data = {name: 'jinondo'}
    response.send(JSON.stringify(data))

});

// 4. listen port and start the server
app.listen(8000,()=>{
    console.log('server has been started as 8000 port')
})

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    
</head>
<body>
    <button>Ajax</button>
    
    <script>
        const btn = document.querySelector('button')

        btn.onclick = function(){
            fetch('http://127.0.0.1:8000/fetch-server?vip=10',{
                method:'POST',
                headers:{
                    name: 'jinondo'
                },
                body: 'username=admin&password=123'
            }).then(response=>{
                return response.text();
            }).then(response=>{
                console.log(response);
            });
        }

    </script>
</body>
</html>

11. Same Origin Policy

server:

// 1. import express
const express = require('express');

// 2. create app object
const app = express();

app.get('/home',(request,response)=>{
    
    response.sendFile(__dirname + '/test.html');
});

app.get('/data',(request,response)=>{
    
    response.send('user\'s data');
});

// 4. listen port and start the server
app.listen(8000,()=>{
    console.log('server has been started as 8000 port');
})

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>
    
</head>
<body>
    <h1>Same Origin Policy</h1>
    <button>Same Origin Policy</button>
    
    <script>
        const btn = document.querySelector('button')

        btn.onclick = function(){

            const xhr = new XMLHttpRequest();

            // because of the 'Same Origin Policy'
            // the url can be written simply
            xhr.open('GET','/data');
            
            xhr.send();

            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status<300){
                        console.log(xhr.response);
                    }
                }
            }
            
       }
    </script>
</body>
</html>

12 Cross-Origin / jsonp

12.1

the html tag can implement cross domain

html标签可实现跨域

For example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>
    
</head>
<body>
    <script src="http://127.0.0.1:5500/app.js"></script>
</body>
</html>

app.js

const data = {
    name: 'jinondo'
};

console.log(data);

use the live server function in vscode, it will create a ‘Cross-Origin’ resource, like http://127.0.0.1:5500/app.js

so use <script src="http://127.0.0.1:5500/app.js"></script> can also correctly import the js module

And the jsonp make use of the theory like this

12.2

We can do another thing

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px rgb(208, 0, 255);
        }
    </style>
</head>
<body>
    <div id="result"></div>
   
    <script src="http://127.0.0.1:5500/app.js"></script>
</body>
</html>

js:

const data = {
    name: 'jinondo'
}


function handle(data){
    const result = document.getElementById('result')
    result.innerHTML = data.name
}


handle(data)

Or another way

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px rgb(208, 0, 255);
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        // handle data
        function handle(data){
            const result = document.getElementById('result')
            result.innerHTML = data.name
        }
    </script>
   
    <script src="./app.js"></script>
</body>
</html>

app.js

const data = {
    name: 'jinondo'
}


handle(data)

12.3 jsonp’s principle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>
</head>
<body>

    <!-- <script src="./app.js"></script> -->
    <script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>
</html>

server:

const express = require('express');

const app = express();

app.all('/jsonp-server',(request,response)=>{
    // const data = {
    //     name: 'jinondo'
    // }
    // let str = JSON.stringify(data)
    response.send('console.log("hello jsonp!")')

});



app.listen(8000,()=>{
    console.log('server has been started as 8000 port');
})

the point is to return a json form data from Cross-Origin server

just like response.send('console.log("hello jsonp!")')

dont do it like response.send("hello jsonp!")

another example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px rgb(208, 0, 255);
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        function handle(data){
            const result = document.getElementById('result')
            result.innerHTML = data.name
        }
    </script>
   
    <!-- <script src="./app.js"></script> -->
    <script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>
</html>

server:

const express = require('express');

const app = express();

app.all('/jsonp-server',(request,response)=>{
    const data = {
        name: 'jinondo'
    }
    let str = JSON.stringify(data)
    response.send(`handle(${str})`)

});

app.listen(8000,()=>{
    console.log('server has been started as 8000 port');
})

pay attention to response.send(handle(${str}))

13 Native Jsonp Practice

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>

</head>
<body>
    <input type="text" id="username">
    <p id="error"></p>
    <script>
        const input = document.getElementById('username')
        const p = document.getElementById('error')

        // define the handle function
        function handle(data){
            input.style.border = "solid 1px #f00"
            p.innerHTML = data.msg
        }

        // bind event
        input.onblur = function(){
            // get the input value
            let username = this.value
            // send request to server to check the exist of username
            // 1. create script tag
            const script = document.createElement('script')
            // 2. set the attributes
            script.src = 'http://127.0.0.1:8000/check-username'
            // 3. insert the script tag to the file
            document.body.appendChild(script)
        }
    </script>
   
</body>
</html>

server.js

// 1. import express
const express = require('express');

// 2. create app object
const app = express();

app.all('/check-username',(request,response)=>{

    const data = {
        exist:1,
        msg: 'username has been existed'
    }
    let str = JSON.stringify(data)
    response.end(`handle(${str})`)

});


// 4. listen port and start the server
app.listen(8000,()=>{
    console.log('server has been started as 8000 port');
})

14 Jquery Jsonp Practice

server

// 1. import express
const express = require('express');

// 2. create app object
const app = express();

app.all('/jquery-jsonp-server',(request,response)=>{

    const data = {
        band: 'oasis',
        song: ['supersonic','wonderwall','stand by me']
    }
    let str = JSON.stringify(data)

    // get the 'callback' parameter
    let callback = request.query.callback

    // callback is a function
    response.end(`${callback}(${str})`)

});



// 4. listen port and start the server
app.listen(8000,()=>{
    console.log('server has been started as 8000 port');
})

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #result{
            width: 300px;
            height: 100px;
            border: solid 1px rgb(0, 89, 255);
        }
    </style>
</head>
<body>

    <button>Send Jsonp request</button>
    <div id="result"></div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?',function(data){
                $('#result').html(`
                    band: ${data.band}<br>
                    song: ${data.song}
                `)
                // $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?',function(data){
                //     console.log(data);
                // })
            })
        })
    </script>

</body>
</html>

the significant point is the callback parameter,

for my perspective, that is like a function name, and it will be called and return the data from Cross-Origin server

15 CORS (Cross-Origin Resource Sharing)

Something headers message to set for CORS:

// CORS
response.setHeader('Access-Control-Allow-Origin','*');
response.setHeader('Access-Control-Allow-Headers','*');
response.setHeader('Access-Control-Allow-Method','*');

example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        #result{
            width: 300px;
            height: 100px;
            border: solid 1px rgb(0, 89, 255);
        }
    </style>
</head>
<body>

    <button>Click here to send request</button>
    <div id="result"></div>


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

        const result = document.getElementById('result')

        btn.onclick= function(){
            const xhr = new XMLHttpRequest();

            xhr.open('GET','http://127.0.0.1:8000/server');

            xhr.send();

            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status<300){
                        
                        result.innerHTML = xhr.response
                    }
                }
            }
        }
    </script>

</body>
</html>

const express = require('express');

const app = express();

app.get('/server',(request,response)=>{
    // CORS
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    response.setHeader('Access-Control-Allow-Method','*');

    response.send('The End of The Fxxking World');
});



app.listen(8000,()=>{
    console.log('server has been started as 8000 port');
})

Conclusion:

Before we didnt meet the CORS error, because we add the setHeaders functions in the server route.

But what makes me confused is that if i didn’t add the setHeaders function, i will get the data too…

Finally I found the problem,

is that

The Cache of Chrome Browser!

So just reference the No.4 of this note article

Use xhr.open('GET','http://127.0.0.1:8000/server?t=' + Date.now());

这个饕字怎么读

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
AJAX 笔记 ajax

AJAX1. Use Nodejs and Expressthe basic use of express// 1. import expressconst express = require('express');// 2. create app objectconst app = express();// 3. create route ruleapp.get('/',(req, res)=>{ // set the response res.send('I L
复制链接

扫一扫