Skip to content

尚硅谷 AJAX 学习笔记 ​

1.XML简介 ​

XML 可扩展标记语言。

XML被设计用来传输和储存数据。XML和HTML类似,不同的是HTMl都是预定义标签,而XMl中没有预定义标签,全都是自定义标签用来表示一些数据。

image-20220310110420877

服务器传输给客户端的就是xml,现在已经被ajax替代了。

1.1.1ajax的优点 ​

1.可以不用刷新与客户端进行通信。

2.允许通过用户事件来更新部分页面内容。

1.1.2ajax的缺点 ​

1.没有浏览历史

2.存在跨域问题(同源)。

3.seo不友好

2.HTTP协议请求报文与响应体 ​

2.1 HTTP ​

HTTP(hypertext transport protocol)协议【超文本传输协议】,协议详细规定了浏览器和万维网服务器之间互相通信的规则

客户端请求报文 ​

重点是格式与参数

http
行	请求类型:GET/POST     路径URL  /s?ie=utf-8   协议版本HTTP/1.1
头  HOST: blog.sliber.cn
    Cookie: name=LMK
	Content-type: application/x-www-form-urlencoded
	Uer-Agent: chrom 83    
空行
体   username=admin&password=admin
get请求体的内容为空,post请求可以不为空

服务器响应报文 ​

http
行	协议版本:HTTP/1.1    响应状态码200   响应字符串OK
头	Content-Type: text/html;charset=utf-8
	 Content-length: 2048
	 Content-encoding: gzip

空行
体    <html>
		<head>
		</head>
		<body>
			<h1>ajax学习</h1>
		</body>
	  </html>

*404 Not Found 服务器无法根据客户端的请求找到资源(网页)。通过此代码,网站设计人员可设置"您所请求的资源无法找到"的个性页面 *403 Forbidden 服务器理解请求客户端的请求,但是拒绝执行此请求 *401 Unauthorized 请求要求用户的身份认证 *500 Internal Server Error 服务器内部错误,无法完成请求 *200 OK 请求成功。一般用于GET与POST请求

3.express的基本使用 ​

js
// 1. 引入express
const { response } = require('express');
const express = require('express');

//2. 创建应用对象
const app = express();

// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/',(request, response)=>{
    //设置响应
    response.send("HELLO EXPRESS");

});

//4. 监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动, 8000端口监听中....");
})

4.AJAX发送get请求 ​

js
<!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>点击发送请求</button>
    <div id="result"></div>

    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0]; //因为TagName返回的是伪数组,所以需要加索引号
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function(){
            //1. 创建AJAX对象
            const xhr = new XMLHttpRequest();
            //2. 设置请求方法和url
            xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&C=300');//?参数&是多个参数分割例如:?a=1&b=100
            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            /*
            on:when:当...时候
            readystate: 是XHR对象中的一个属性,表示状态:
                        0(未初始化) 
                        1(open方法调用完毕) 
                        2(send方法调用完毕) 
                        3(服务端返回部分结果)
                        4(服务端返回所有结果)
            change:改变
            */
            xhr.onreadystatechange = function(){
                //作判断,是4(服务端返回了所有的结果)才处理数据
                if(xhr.readyState === 4){
                    //判断响应状态码:200 404 403 401 500
                    //2XX 都是成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理服务端响应结果: 行 头  空行(咱不管) 体
                        //1. 处理响应行
                        // console.log(xhr.status);// 相应行的状态码
                        // console.log(xhr.statusText);//相应行的状态字符串
                        // //2. 所有响应头
                        // console.log(xhr.getAllResponseHeaders());
                        // //3. 响应体
                        // console.log(xhr.response)
                        //设置result的文本
                        result.innerHTML = xhr.response;
                    }else{

                    }
                }
            }
            // console.log('test');
        }
    </script>
</body>
</html>

5.AJAX发送POST请求 ​

js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX POST 请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }

    </style>
</head>
<body>
    <div id="result"></div>

    <script>
        //获取元素对象
        const result = document.getElementById("result");
        //绑定事件 鼠标移动到上面
        result.addEventListener("mouseover", function(){
            // console.log("test");
            //1. 创建对象,发送请求
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置请求类型与URL
            xhr.open('POST','http://127.0.0.1:8000/server');
            //设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //content-type是用来设置请求体的类型的(固定格式)
            //设置自定义请求头
            xhr.setRequestHeader('name','superLmk'); //自定义请求头信息

            //3.发送
            xhr.send('a=100&b=200&c:300');
            // xhr.send('a:100&b:200&c:300');
            // xhr.send('123456654123');
            //4. 事件绑定
            xhr.onreadystatechange = function () {
                //判断
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) { 
                        //处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        }) </script>
</body>
</html>

6. AJAX发送json ​

js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX JSON 响应</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #89b;
        }

    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById('result');
        //绑定键盘按下事件
        window.onkeydown = function () {
            // console.log('test');
            //发送请求
            const xhr = new XMLHttpRequest();
            //设置响应体的数据类型
            xhr.responseType = 'json';
            //初始化
            xhr.open('GET','http://127.0.0.1:8000/json-server')
            //发送、
            xhr.send();
            //事件绑定
            xhr.onreadystatechange = function () {
                //判断
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // console.log(xhr.response);
                        // result.innerHTML = xhr.response;
                        //1. 手动对数据进行一个转换
                        // let data = JSON.parse(xhr.response);
                        // console.log(data);
                        // result.innerHTML = data.name;
                        //2. 自动转换:直接设置ajax响应数据类型
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                        
                        
                    }
                    
                }

                
            }

            
        }
    </script>

    
</body>
</html>

nodemon自动重启工具

7. ajax的ie缓存问题 ​

在ie浏览器当中,ajax发送的数据会被缓存,当下次继续发送数据的时候,会首先从本地的缓存中去找,最新的结果就不会显示,所以就会有时效性的问题。

js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IE缓存问题</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #225588;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');

        btn.addEventListener('click', function () {
            // console.log('test');
            //1. 创建ajax对象
            const xhr = new XMLHttpRequest();
            //2. 初始化请求
            //AJAX解决IE缓存问题:加一个可变化的参数,比如时间戳
            xhr.open('GET','http://127.0.0.1:8000/ie?t='+Date.now()); //Date.now()获取当前时间戳
            //3. 发送请求
            xhr.send();
            //4. 处理数据
            xhr.onreadystatechange = function () {
                //两个判断
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                        
                    }
                    
                }
                
            }
        })

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

8. AJAX请求超时以及网络异常处理 ​

js
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请求超时与网络异常处理</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');
        btn.addEventListener('click', function () {
            const xhr = new XMLHttpRequest();
            //超时设置 2s 设置(2s内服务端不响应,就取消请求)
            xhr.timeout = 2000;
            //超时回调
            xhr.ontimeout = function () {
                alert('网络异常,请稍后重试!!');
    
            }
            //网络异常回调
            xhr.onerror = function () {
                alert('你的网络似乎出了一些问题!');
                
            }
            xhr.open('GET', 'http://127.0.0.1:8000/delay');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                        
                    }
                    
                }


            }
        })
    </script>
</body>

</html>

9. AJAX取消请求 ​

js
<!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>
    <button>点击发送</button>
    <button>点击取消</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;
        btns[0].onclick = function () {
            // const x = new XMLHttpRequest();
            x = new XMLHttpRequest();
            x.open('GET', 'http://127.0.0.1:8000/delay');
            x.send();
            
        }

        //abort (属于AJAX对象的一个方法)取消请求
        //这里的 x 用 let 而不用const 好好思考一下 
        btns[1].onclick = function () {
            x.abort();
            
        }
    </script>

</body>
</html>

10.请求重复发送问题 ​

js
<!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>
    <button>点击发送</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;
        //标识变量
        let isSending = false;// 是否正在发送AJAX请求


        btns[0].onclick = function () {
            //判断标识变量
            if (isSending) x.abort();//如果该请求正在发送,则取消该请求,创建一个新的请求

            x = new XMLHttpRequest();
            //修改 标识变量的值
            isSending = true;
            x.open('GET', 'http://127.0.0.1:8000/delay');
            x.send();
            x.onreadystatechange = function () {
                if (x.readyState === 4) {
                    //修改标识变量
                    //这里不用判断响应状态码,因为这个请求可能是失败的请求
                    isSending = false;
                    
                }
                
            }
            
        }

        //abort (属于AJAX对象的一个方法)取消请求
        //这里的 x 用 let 而不用const 好好思考一下 
        btns[1].onclick = function () {
            x.abort();
            
        }
    </script>

</body>
</html>

总结:

XMLHttpRequest():创建 XHR 对象的构造函数 status:响应状态码值,如 200、404 statusText:响应状态文本,如 ’ok‘、‘not found’ readyState:标识请求状态的只读属性 0-1-2-3-4 onreadystatechange:绑定 readyState 改变的监听 responseType:指定响应数据类型,如果是 ‘json’,得到响应后自动解析响应 response:响应体数据,类型取决于 responseType 的指定 timeout:指定请求超时时间,默认为 0 代表没有限制 ontimeout:绑定超时的监听 onerror:绑定请求网络错误的监听 open():初始化一个请求,参数为:(method, url[, async]) send(data):发送请求 abort():中断请求 (发出到返回之间) getResponseHeader(name):获取指定名称的响应头值 getAllResponseHeaders():获取所有响应头组成的字符串 setRequestHeader(name, value):设置请求头

11.jQuery中的ajax ​

11.1 get 请求 ​

$.get(url, [data], [callback], [type]) url:请求的URL 地址 data:请求携带的参数 callback:载入成功时回调函数 type:设置返回内容格式,xml, html, script, json, text, _default

11.2 post 请求 ​

$.post(url, [data], [callback], [type]) url:请求的URL 地址 data:请求携带的参数 callback:载入成功时回调函数 type:设置返回内容格式,xml, html, script, json, text, _default

11.3 通用请求 ​

js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 发送 AJAX 请求</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">jQuer发送AJAX请求</h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法ajax</button>
    </div>
    <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)
            });
        })

        $('button').eq(2).click(function () {
            $.ajax({
                //url
                url: 'http://127.0.0.1:8000/jquery-server',
                //参数
                data: {a:100, b:200},
                //请求类型
                type: 'GET',
                //响应体结果设置
                dataType: 'json',
                //成功的回调
                success: function (data) {
                    console.log(data);
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error: function(){
                    console.log('出错拉~');
                },
                //头信息
                headers: {
                    c: 300,
                    d: 400
                }
            });
            
        })

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

12. axios-AJAX ​

js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 发送AJAX请求</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
</head>
<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>

    <script>
        const btns = document.querySelectorAll('button');
        //配置 baseURL
        axios.defaults.baseURL = 'http://127.0.0.1:8000';

        btns[0].onclick = function () {
            //GET 请求
            axios.get('/axios-server', {
                //url参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    name: 'Nliver',
                    age: 20
                }
            //Axios是基于Promise作的数据处理
            }).then(value => {
                console.log(value)
            })
        }

        btns[1].onclick = function () {
                axios.post('/axios-server', {
                    //请求体
                    username: 'admin',
                    password: '123456'
                }, {
                    //url 请求行
                    params: {
                        id: 200,
                        vip: 9
                    },
                    //请求头参数
                    headers: {
                        height: 100,
                        weight: 180,
                    }
                })
            }
        
        btns[2].onclick = function () {
            axios({
                //请求方法
                method: 'POST',
                //url 请求行
                url: '/axios-server',
                //url参数
                params: {
                    vip:10,
                    level:30
                },
                //头信息
                headers: {
                    a:100,
                    b:200
                },
                //请求体参数
                data: {
                    username: 'admin',
                    password: '123456'
                }
            }).then(response=>{
                console.log(response);
                //响应状态码
                console.log(response.status);
                //响应状态字符串
                console.log(response.statusText);
                //响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);
            })
        }
    </script>
</body>
</html>

13.fetch-AJAX ​

js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch 发送 AJAX请求</title>
</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: 'Nliver'
                },
                //请求体
                body: 'username=admin&password=admin'
            }).then(response => {
                // console.log(response);
                // return response.text();
                return response.json();
            }).then(response => {
                console.log(response);
            })
        }
    </script>
</body>
</html>

14.跨域 ​

同源策略(Same-Origin Policy)最早由Netscape 公司提出,是浏览器的一种安全策略 同源: 协议、域名、端口号必须完全相同 跨域: 违背同源策略就是跨域

javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>
<body>
    <h1>Nliver</h1>
    <button>点击获取用户数据</button>
    <script>
        const btn = document.querySelector('button');

        btn.onclick = function(){
            const x = new XMLHttpRequest();
            //这里因为是满足同源策略的,所以url可以简写
            x.open("GET",'/data');
            //发送
            x.send();
            //
            x.onreadystatechange = function () {
                if (x.readyState === 4) {
                    if(x.status >= 200 && x.status < 300){
                        console.log(x.response);
                    }
                    
                }
            }
        }
    </script>
</body>
</html>
javascript
const { response } = require('express');
const express = require('express');

const app = express();

app.get('/home', (request, response)=>{
    //响应一个页面
    response.sendFile(__dirname + '/index.html');

});

app.get('/data', (request, response)=>{
    //响应一个页面
    response.send('用户数据');

});

app.listen(9000,()=>{
    console.log("服务已经启动...");
})

15. 如何解决跨域 ​

JSONP 是什么 JSONP(JSON with Padding),是一个非官方的跨域解决方案,纯粹凭借程序员的聪明 才智开发出来,只支持get 请求。

  1. JSONP 怎么工作的? 在网页有一些标签天生具有跨域能力,比如:img link iframe script。 JSONP 就是利用script 标签的跨域能力来发送请求的。
js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原理演示</title>
    <style>
        #result {
            width: 300px;
            height: 100px;
            border: solid 1px #78a;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        //处理数据
        function handle(data) {
            //获取 result 元素
            const result = document.getElementById('result');
            result.innerHTML = data.name;

        }
    </script>
    <!-- <script src="./js/app.js"></script> -->
    <!-- <script src="http://127.0.0.1:5500/%E4%BB%A3%E7%A0%81/7-AJAX%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98/2-JSONP/js/app.js"></script> -->
    <script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>
</html>
js
const data = {
    name: 'Nliver的学习笔记-1'
};

// console.log(data);



handle(data);
js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生JSONP 实践案例</title>
</head>
<body>
    用户名: <input type="text" id="username" >
    <p></p>
    <script>
        //获取input元素
        const input = document.querySelector('input');
        const p = document.querySelector('p');

        //声明 handle 函数
        function handle(data){
            //修改边框颜色
            input.style.border = "solid 1px #f00";
            //修改 p 标签的提交文本
            p.innerHTML = data.msg;
        }

        //绑定事件
        input.onblur = function () {
            //获取用户的输入值
            let username = this.value;
            //向服务端发送请求 检测用户名是否存在
            //1. 创建 script 标签
            const script = document.createElement('script');
            //2. 设置 script 标签的src属性
            script.src = 'http://127.0.0.1:8000/check-username';
            //3. 将 script 插入到文档中
            document.body.appendChild(script);
            
        }
    </script>
</body> 
</html>
js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery-jsonp</title>
    <style>
        #result {
            width: 300px;
            height: 100px;
            border: solid 1px #089;
        }
    </style>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <button>点击发送 jsonp 请求</button>
    <div id="result">

    </div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data){
                // console.log(data);
                $('#result').html(`
                    名称: ${data.name}<br />
                    校区: ${data.city}
                `)
            })
        });

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

16.CORS ​

  1. CORS 是什么? CORS(Cross-Origin Resource Sharing),跨域资源共享。CORS 是官方的跨域解决方 案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持 get 和post 请求。跨域资源共享标准新增了一组HTTP 首部字段,允许服务器声明哪些 源站通过浏览器有权限访问哪些资源
  1. CORS 怎么工作的? CORS 是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该响应 以后就会对响应放行。
```js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS 跨域资源共享</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button');

        btn.onclick = function(){
            //1. 创建对象
            const x = new XMLHttpRequest();
            //2. 初始化设置
            x.open('GET', "http://127.0.0.1:8000/cors-server");
            //3. 发送
            x.send();
            //4. 绑定事件
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    if(x.status >= 200 && x.status < 300){
                        //输出响应体
                        console.log(x.response);
                    }
                }
            }

        }
    </script>
</body>
</html>
```

16 服务端代码 ​

js
// 1. 引入express
const { response } = require('express');
const express = require('express');

//2. 创建应用对象
const app = express();

// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');

    //设置响应体
    response.send("HELLO AJAX - 1");

});

// app.post('/server',(request, response)=>{
//all可以接收任意类型的请求,(包括自定义)
app.all('/server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //遇到自定义响应头时可以设置
    response.setHeader('Access-Control-Allow-Headers', '*');
    //设置响应体
    response.send("HELLO AJAX POST");

});

app.all('/json-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //遇到自定义响应头时可以设置
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据
    const data = {
        name: 'sliber'

    };
    //对对象进行字符串转化 因为只能发送字符串或者缓冲区
    let str = JSON.stringify(data);
    //设置响应体
    // response.send("HELLO AJAX JSON");
    response.send(str);

});


//针对 IE 缓存
app.get('/ie', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');

    //设置响应体
    response.send("HELLO IE - 5");

});

//针对 请求超时:作延时响应:2s
app.get('/delay', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    setTimeout(() => {
        //设置响应体
        response.send("延时响应");
    }, 3000)


});

//针对 jQuery 服务
app.all('/jquery-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = {name: 'Nliverd的AJAX学习笔记'};

    // response.send("Hello jQuery AJAX");
    response.send(JSON.stringify(data));

});


//针对 axios 服务
app.all('/axios-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = {name: 'Nliverd的AJAX学习笔记'};

    // response.send("Hello jQuery AJAX");
    response.send(JSON.stringify(data));

});


//针对 fetch 服务
app.all('/fetch-server', (request, response) => {
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = {name: 'Nliverd的AJAX学习笔记'};
    // response.send("Hello jQuery AJAX");
    response.send(JSON.stringify(data));
});

//针对 jsonp 服务
app.all('/jsonp-server', (request, response) =>{
    // response.send('HELLO JSONP-server');
    // script标签最好还是返回js代码,要的是一段函数的调用
    // response.send('console.log("hello jsonp")');
    const data = {
        name: 'Nliver的学习笔记-1'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果形式 是一个函数调用,而函数的实参就是我们想给客户端返回的结果数据
    response.end(`handle(${str})`);

});

//用户名检测是否存在
app.all('/check-username', (request, response) =>{
    // response.send('console.log("hello jsonp")');
    const data = {
        exist: 1,
        msg: '用户名已经存在'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果形式 是一个函数调用,而函数的实参就是我们想给客户端返回的结果数据
    response.end(`handle(${str})`);

});

//jQuery服务中的jsonp
app.all('/jquery-jsonp-server', (request, response) =>{
    // response.send('console.log("hello jsonp")');
    const data = {
        name: 'Nliver',
        city: ['北京', '上海', '深圳']
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //接收 callback 参数
    let cb = request.query.callback;

    //返回结果
    response.end(`${cb}(${str})`);

});

app.all('/cors-server', (request, response)=>{
    //设置响应头
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", '*');
    response.setHeader("Access-Control-Allow-Method", '*');
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");

    response.send('hello CORS');
})
//4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动, 8000端口监听中....");
})