Express助力你从0到1掌握AJAX(包含原生，jquery, Axios，Fetch, 跨域)

豆苗学前端
395 阅读3分钟

引入：ajax作为前端工程师必备的工具，说白了，Ajax就是一个异步的javaScript和xml。

它的优点是：页面不刷新就可以向服务器发送请求(无刷新获取数据)

应用场景： 百度搜索框，当用户输入关键字他会发起请求，服务器响应的数据会同步到下拉框；侧边栏导航等等，AJAX的应用场景可以说是非常广泛。

1.原生AJAX

1.1 XML(可拓展标志语言,用来存储和传输数据)

XML和HTML类似，不同的是HTML都是预定义标签，而XML中没有预定义标签 全都是自定义标签。而且HTML用来展示数据,XML是存储和传输数据

  • 假如说我有一个数据：name="孙悟空";age=19;gender="男";
用XML表示
  <student>
     <name>孙悟空</name>
     <age>19</age>
     <gender>女</gender>
  </student>
  • 最开始AJAX就是用XML来交换数据的,现在用JSON
{"name":"孙悟空","age":19,"gender":"男"}

1.2 JAX的优缺点

  • 优点：无刷新页面与服务器进行通信;允许根据事件来更新部分页面内容
  • 缺点：没有浏览历史,不能回退;存在跨域问题;SEO不友好(爬虫爬不到)

1.3 HTTP协议(协议详细规定了浏览器与万维网服务器之间互相通信的规则)

请求报文(格式和参数)

行--> 请求方式(get/post) 请求参数  版本http/1.0 
头--> host: 网址
      cookie：name=xxx
      Content-type:application/x-www-from-urlencoded
      User-agent:chorm 83
空行
体

响应报文

行--> 协议版本(HTTP/1.0) 响应状态码(200) 响应状态字符串(ok)
头--> Content-type(类型): text/html;charset=utf-8
      Content-length(长度): 2048
      Content-encoding(压缩方式): gzip
空行
体-->  <html>
        <body>
            <h1>黑马</h1>
        </body>
      </html>

1.4 node+express 开启后端服务

  • npm init --yes(初始化包管理工具--生成package.json)
  • npm i express(安装express框架)
EXpress使用四部曲

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

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

//3.创建路由规则
app.get('/', (request, response) => {
    //允许跨域
    response.setHeader('Access-control-Allow-Origin', '*');
    //允许自定义请求头
    response.header('Access-Control-Allow-Headers', '*');
    //设置简单的响应
    response.send('HELLO Express')
    //设置响应体为JSON格式的响应
    const yuanx = { name: '信息工程学院' }
    response.send(JSON.stringify(yuanx));
});

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

1.5原生AJAX发送GET请求

            // 进行AJAX操作
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化,设置请求方法和url，get请求问号传参
            xhr.open('get', 'http://127.0.0.1:8001/serve');
            // 3.发送
            xhr.send();
            //4.事件绑定，处理服务器端返回的结果
            xhr.onreadystatechange = function() {
                //readystate有5中状态：0，1，2，3，4
                //判断
                if (xhr.readyState === 4) {
                    // 判断响应的状态码200，404，403，401，500
                    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;
                    } else {
                        console.log('请求失败');
                    }
                }
            }

1.6原生AJAX发送POST请求(包含设置请求头信息，跨域或自定义请求头）

//1,获取元素对象
        const result = document.getElementById('result');
        //2.绑定事件
        result.addEventListener("mouseover", function() {
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化请求方法
            xhr.open('POST', 'http://127.0.0.1:8001/serve');
            //设置请求头(身份校验信息)
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('name', 'sss');
            //3.发送
            xhr.send('a=100&b=100');
            //4.事件绑定
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML = xhr.response;
                    } else {
                        console.log('请求失败');
                    }
                }
            }
        })

1.6 服务端响应JSON数据

分为两种：设置响应头和手动转换

        const result = document.getElementById('result')
            //1.绑定键盘按下事件
        window.onkeydown = function() {
            // 1.发送请求四步走
            const xhr = new XMLHttpRequest();
            //设置响应体的数据类型
            hr.responseType = 'json';
            xhr.open('GET', 'http://127.0.0.1:8001/json-serve');
            xhr.send();
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // console.log(xhr.response);
                        // console.log(typeof xhr.response);//string
                        //手动转换成为对象
                        let data = JSON.parse(xhr.response);
                        console.log(data);
                        console.log(typeof data);
                        result.innerHTML = data.name;
                    } else {
                        console.log('请求失败');
                    }
                }
            }
        }

1.7 AJAX取消请求

X9Z4C{NV6EGB0}6FPXIY8LQ.png

1.8 重复请求问题

 <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
        btns[1].onclick = function(){
            x.abort();
        }

2.jQuery中的AJAVX

var div = $('div');
        console.log(div);
        $('div').hide();
        //1.jQurey的入口函数
        // $(function() {
        //         //此处是DOM加载完成的入口
        //         console.log('hellwworld');
        //         $('button').on('click', function() {
        //             console.log('注册单机事件');
        //         })
        //     })
        //2.jQuery的选择器
        // $("选择器")   // 里面选择器直接写 CSS 选择器即可，但是要加引号
        // id选择器   $('#id') 
        // 类选择器   $('.calss')
        // 标签选择器  $('div')
        $('button').eq(1).click(function() {
            $.get('http://127.0.0.1:8001/jquery-serve', {
                a: 100,
                b: 200
            }, function(data) {
                console.log(data);
            })
        });
        $('button').eq(2).click(function() {
            $.post('http://127.0.0.1:8001/jquery-serve', {
                a: 300,
                b: 400
            }, function(data) {
                console.log(data);
            }, 'json')
        });
        $('button').eq(3).click(function() {
            $.ajax({
                url: 'http://127.0.0.1:8001/jquery-serve',
                data: {
                    name: '张三',
                    age: 23
                },
                type: 'GET',
                dataType: 'json',
                timeout: 2000,
                success: function(data) {
                    console.log(data);
                },
                error: function() {
                    console.log('请求失败');
                },
                headers: {}

            })
        })

3.Axios

<button>GET</button>
    <button>POST</button>
    <button>AJAX</button>
    <script>
        var btn = document.querySelectorAll('button')
        axios.defaults.baseURL = 'http://127.0.0.1:8001'
        btn[0].onclick = function() {
            //GET请求
            axios.get('/axios-serve', {
                //url参数
                params: {
                    id: 111,
                    vip: 999
                },
                // 请求头
                headers: {
                    token: 'ddddddddddddd'
                }
            }).then(value => {
                console.log(value);
            })
        }
        btn[1].onclick = function() {
            axios.post('/axios-serve', {
                username: 'qqq',
                password: 'dsd'
            }, {
                params: {
                    id: 000,
                    vip: 000
                }
            }).then(value => {
                console.log(value);
            })
        }
        btn[2].addEventListener('click', function() {
            axios({
                method: 'POST',
                url: 'axios-serve',
                params: {
                    vip: 10
                },
                data: {
                    username: 'ddd'
                }
            }).then(value => {
                console.log(value);
            })
        })

4.Fetch

 <button>AJAX请求</button>
    <script>
        const btn = document.querySelector('button');
        btn.onclick = function() {
            fetch('http://127.0.0.1:8001/fetch-serve', {
                method: 'POST',
                // headers: {
                //     name: 'dddddd'
                // },
                body: 'username=admin&&password=admin'
            }).then(response => {
                console.log(response);
            })
        }

5.jsonp跨域

app.all('/jsonp-serve', (request, response) => {
    const data = { name: 'jsonp跨域请求' }
    let str = JSON.stringify(data);
    //返回结果是一个函数调用
    //函数的实参就是我们想给客户端返回的结果数据
    //函数必须在客户端提前申明
    response.end(`handle(${str})`)
})

<div id="result"></div>
    <script>
        function handle(data) {
            var result = document.getElementById('result')
            result.innerHTML = data.name
        }
    </script>
    <script src="http://127.0.0.1:8001/jsonp-serve"></script>

0D9ACE77672C10F04A2ABD0EDEA7B80F.jpg

avatar
文章
阅读
粉丝