ajax学习记录

小璇玑学前端
104 阅读6分钟

ajax概念

  1. ajax全称Asynchronous JavaScript And XML,就是异步的js和XML。
  2. 通过ajax可以在浏览器中向服务器发送请求，最大的优势："无刷新获取数据"。
  3. Ajax不是新的编程语言，而是将一种现有的标准组合在一起的新方式。

XML简介

  1. XML是可扩展标记语言
  2. XML被设计用来传输和存储数据
  3. XML和HTML类似，不同是HTML中都是预定义标签，而XML都是自定义标签，用来表示一些数据，例如
我有一个学生数据：name="孙悟空"，age=18,gender="女"

用XML表示：
<student>
    <name>孙悟空</name>
    <age>18</age>
    <gender>女</gender>
</student>
  1. 以前ajax应用时，用它来传递数据，现在被JSON取代了，例如：
{"name":"孙悟空","age":"18","gender":"女"}

因为JSON相对于XML更加简洁，借助于JSON的api数据转换也更加方便。

Ajax的优缺点：

优点：

  1. 无需刷新页面就可以和服务器通信，
  2. 允许根据用户事件来更新部分网页内容

缺点：

  1. 没有浏览历史，不能后退。
  2. 存在跨域问题
  3. 不利于SEO

HTTP

http是超文本传输协议，详细规定了浏览器和万维网服务器之间互相通信的规则。 此规则主要分为两部分：

请求(报文，我们每次发请求给服务器的就是这种格式的)：

    请求行:  请求方式(GET...)    请求url地址   http协议版本

    请求头：  Host:atguigu.com
             Cookie:name=guigu
             Content-type:application/x-www-form-urlencoded
             User-Agent:chorme 83          
    空行（固定的必须要有）
    请求体：(如果是get请求，体是空的，如果是post请求体可以不为空)

响应：

    请求行:  http协议版本  响应状态码(200)  响应状态字符串(OK)

    请求头： Content-type:text/plain; charset=utf-8
            Content-length:2048
            Conten-endcoding:gzip         
    空行（固定的必须要有）
    请求体：<html>
                <head></head>
                <body>
                    <h1>尚硅谷</h1>
                </body>
           </html>

谷歌控制台查看请求和响应报文。

控制台-Network-Headers-Request Headers 可以查看请求头，如图：

image.png

image.png

express

express是基于node.js的服务端框架，学习它的基本使用搭建服务端。 基本使用步骤：

npm init --yes

npm i express

// 1.引入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端口监听中')
})

在express.js的父文件夹启动

node express.js

image.png

image.png

AJAX请求的基本操作

后端代码如下：

// 1.引入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')
})
// 4.监听端口启动服务
app.listen(8000,()=>{
    console.log('服务已经启动，8000端口监听中')
})

前端代码如下：

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

<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>
    <style>
        #result {
            width: 200px;
            height: 200px;
            border: 1px solid #999;
        }
    </style>
</head>

<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        // 获取dom
        let btn = document.getElementsByTagName('button')[0]
        let result = document.getElementById('result')
        //绑定事件
        btn.onclick = function () {
            // 点击发送ajax请求
            // 1.创建xhr对象
            let xhr = new XMLHttpRequest()
            // 2.初始化，设置请求方法和url
            xhr.open('GET', 'http://127.0.0.1:8000/server')
            // 3.发送
            xhr.send()
            // 4.事件绑定，处理服务端返回的结果
            // readyState是xhr对象中的属性，有0，1，2，3，4五个值，
            // 0最开始，1open方法调用了，2send方法调用了，3服务端返回部分结果，4服务端返回所有结果
            xhr.onreadystatechange = function () {
                // 判断服务端返回了所有的结果
                if (xhr.readyState === 4) {
                        // 判断响应状态码,响应成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理结果 行 头 空行 体
                        // 1.响应行
                         console.log(xhr.status) //响应状态码
                         console.log(xhr.statusText); //响应状态字符串
                         console.log(xhr.getAllResponseHeaders()) //所有响应头
                         console.log(xhr.response) //响应体           
                        //  设置result的内容
                        result.innerHTML = xhr.response

                    }
                }
            }
        }
    </script>
</body>

</html>

AJAX设置请求参数

xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300')

AJAX发送post请求，并设置请求体参数

后端如下：

// 1.引入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')
})
// post请求
app.post('/server',(request,response)=>{
    // 设置响应头，允许跨域,否则会因端口不同跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应体
    response.send('HELLO AJAX--POST')
})
// 4.监听端口启动服务
app.listen(8000,()=>{
    console.log('服务已经启动，8000端口监听中')
})

前端如下：

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

<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>
    <style>
        #result {
            width: 200px;
            height: 200px;
            border: 1px solid #999;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        // 获取dom
        let btn = document.getElementsByTagName('button')[0]
        let result = document.getElementById('result')
        //绑定事件
        result.addEventListener('mouseover',function () {
            // 点击发送ajax请求
            // 1.创建xhr对象
            let xhr = new XMLHttpRequest()
            // 2.初始化，设置请求方法和url
            xhr.open('POST', 'http://127.0.0.1:8000/server')
            // 3.发送
            xhr.send('a=100&b=100&c=300')
            // 4.事件绑定，处理服务端返回的结果
            // readyState是xhr对象中的属性，有0，1，2，3，4五个值，
            // 0最开始，1open方法调用了，2send方法调用了，3服务端返回部分结果，4服务端返回所有结果
            xhr.onreadystatechange = function () {
                // 判断服务端返回了所有的结果
                if (xhr.readyState === 4) {
                        // 判断响应状态码,响应成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理结果 行 头 空行 体
                        // 1.响应行
                         console.log(xhr.status) //响应状态码
                         console.log(xhr.statusText); //响应状态字符串
                         console.log(xhr.getAllResponseHeaders()) //所有响应头
                         console.log(xhr.response) //响应体           
                        //  设置result的内容
                        result.innerHTML = xhr.response
                    }
                }
            }
        })
    </script>
</body>

</html>

AJAX设置请求头

前端代码：

  // 2.初始化，设置请求方法和url
            xhr.open('POST', 'http://127.0.0.1:8000/server')
            // 设置请求头(头名，头值)
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            // Content-Type是设置请求体类型的，application/x-www-form-urlencoded是设置参数查询字符串固定类型
            //这样设置了浏览器才看的到Form data请求体
            // 自定义请求头
            xhr.setRequestHeader('name','caixukun') //要去后端配置一下，不然浏览器会爆红
            // 3.发送
            xhr.send('a=100&b=100&c=300')

后端代码：

// all代表所有类型请求
app.all('/server',(request,response)=>{
    // 这个一定放前面，不然会报错
    response.setHeader('Access-Control-Allow-Headers','*')
    // 设置响应头，允许跨域,否则会因端口不同跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置响应体
    response.send('HELLO AJAX--POST') 
})
image.png

AJAX服务端响应JSON数据

后端：

app.all('/JSON-server', (request, response) => {
    // 这个一定放前面，不然会报错
    response.setHeader('Access-Control-Allow-Headers', '*')
    // 设置响应头，允许跨域,否则会因端口不同跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    //响应一个数据
    const data = { name: 'atguigu' }
    // 对对象进行字符串转换
    let str = JSON.stringify(data)
    //设置响应体,这个send里面只能放字符串
    response.send(str)
})

前端：(两种方式)

  xhr.responseType = 'json'  (自动转换)
  
  let data = JSON.parse(xhr.reponse)

安装自动重启工具nodemon

npm install -g nodemon

启动服务器时把node替换成nodemon就行。

解决AJAX的IE缓存问题。

IE浏览器会对AJAX请求结果做缓存，会导致下次发请求时走的是本地缓存，而不是服务器返回的最新数据。

//Date.now()是获取当前最新的时间戳，每次发请求的时间戳都不一样，下次浏览器就会发新的请求。
xhr.open('GET','http://127.0.0.1:8000/ie?t='Date.now())

AJAX请求超时和网络异常处理

后端先延时响应：

setTimeout(() => {
    response.send("HELLO,延时响应")
})

前端：

xhr.timeout = 200 //两秒还没有响应就cancel
// 超时回调
xhr.ontimeout = function(){
    alert('网络异常，请稍后重试')
   }
   
//  网络异常的处理
    xhr.onerror = function () {
        alert('你的网络出了一些问题')
    }

AJAX取消请求

在请求过程中，结果还没回来之前，可以通过代码把请求手动取消。

xhr.abort()

AJAX相同请求重复发送的问题。

比如我们有个按钮点一下发请求，用户疯狂点击，而响应又比较慢。

前端：

<!DOCTYPE html>
<html lang="en">
<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 id="btn">点击发送</button>
    <script>
        let btn = document.getElementById('btn')
        let isSend = false //是否正在发送请求
        btn.onclick = function(){
            console.log('dd')
            if(isSend){
                x.abort() //如果正在发送请求，则取消改请求
            }
            let xhr = new XMLHttpRequest()
            isSend = true
            xhr.open('GET', 'http://127.0.0.1:8000/delay')
            xhr.send()
            xhr.onreadystatechange = function () {
                if(xhr.readyState === 4){
                    console.log(xhr.response)
                    // 说明请求回来了
                    isSend = false
                }
            }
        }
    </script>
</body>
</html>

后端：

app.all('/delay', (request, response) => {
    // 这个一定放前面，不然会报错
    response.setHeader('Access-Control-Allow-Headers', '*')
    // 设置响应头，允许跨域,否则会因端口不同跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    //设置响应体
    setTimeout(() => {
        response.send('HELLO AJAX--POST-Repeat')
    }, 3000)
})

JQuery发送ajax请求方法

前端：

<!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 crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <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">jQuery发送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>

后端：

//jQuery 服务
app.all('/jquery-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

axios发送ajax请求方法

前端：

<!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.19.2/axios.js"></script>
</head>

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>

    <script>
        // https://github.com/axios/axios
        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: 'atguigu',
                    age: 20
                }
            }).then(value => {
                console.log(value);
            });
        }

        btns[1].onclick = function () {
            axios.post('/axios-server', {
                username: 'admin',
                password: 'admin'
            }, {
                //url 
                params: {
                    id: 200,
                    vip: 9
                },
                //请求头参数
                headers: {
                    height: 180,
                    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: 'admin'
                }
            }).then(response=>{
                //响应状态码
                console.log(response.status);
                //响应状态字符串
                console.log(response.statusText);
                //响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);
            })
        }
    </script>
</body>

</html>

后端：

//axios 服务
app.all('/axios-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

fetch发送ajax请求

前端：

<!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>
        //文档地址
        //https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch
        
        const btn = document.querySelector('button');

        btn.onclick = function(){
            fetch('http://127.0.0.1:8000/fetch-server?vip=10', {
                //请求方法
                method: 'POST',
                //请求头
                headers: {
                    name:'atguigu'
                },
                //请求体
                body: 'username=admin&password=admin'
            }).then(response => {
                // return response.text();
                return response.json();
            }).then(response=>{
                console.log(response);
            });
        }
    </script>
</body>
</html>

后端：

//fetch 服务
app.all('/fetch-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

同源策略

同源策略是浏览器的一种安全策略,协议，域名，端口号必须完全相同。

JSONP解决跨域

  1. 它是一种非官方的跨域解决方案，是靠程序员的才智开发出来的，只支持get请求。
  2. 在网页中有一些标签天生具有跨域能力：比如img,link,iframe,script, JSONP就是利用script的跨域能力来解决的。

前端：

<!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="http://127.0.0.1:5500/%E8%AF%BE%E5%A0%82/%E4%BB%A3%E7%A0%81/7-%E8%B7%A8%E5%9F%9F/2-JSONP/js/app.js"></script> -->
    <script src="http://127.0.0.1:8000/jsonp-server"></script>
</body>

</html>

后端：

//jsonp服务
app.all('/jsonp-server',(request, response) => {
    // response.send('console.log("hello jsonp")');
    const data = {
        name: '尚硅谷atguigu'
    };
    //将数据转化为字符串
    let str = JSON.stringify(data);
    //返回结果
    response.end(`handle(${str})`);
});

JSONP解决跨域实践

前端：

<!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>
    用户名: <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. 设置标签的 src 属性
            script.src = 'http://127.0.0.1:8000/check-username';
            //3. 将 script 插入到文档中
            document.body.appendChild(script);
        }
    </script>
</body>
</html>

后端：

//用户名检测是否存在
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})`);
});

cors解决跨域

developer.mozilla.org/zh-CN/docs/…

avatar
文章
阅读
粉丝