AJAX学习笔记-B站尚硅谷视频

最新推荐文章于 2024-04-28 20:18:06 发布

BDByy

最新推荐文章于 2024-04-28 20:18:06 发布

阅读量142

点赞数 1

文章标签： ajax 学习音视频前端 node.js Powered by 金山文档

本文链接：https://blog.csdn.net/m0_54281014/article/details/128597088

版权

@[TOC](目录)

Ajax

一.Ajax特点

Ajax优点：

可以无需刷新页面与服务器进行通信

允许你根据用户事件来更新部分页面内容

Ajax缺点：

没有浏览历史，不能回退

存在跨区域问题

seo不友好（seo搜索引擎优化）

二.Express框架

安装node.js

安装express包

用管理员身份打开vscode

在集成终端中打开

输入npm init --yes

安装express框架输入：npm i express

使用express框架，框架搭建及服务启动 node+包名关闭：Ctrl+c

//@pagename: express基本使用.js
//引入express
const { request, response } = require('express');
const express = require('express');

//创建引用对象
const app =express();

//创建路由规则GET/POST/all all接受种类所有请求
//request 对请求报文的封装
//response 对响应报文的封装
app.get('/',(request,response)=>{
    //设置简单的响应体
    response.send('hello')
     //响应一个页面
    // response.sendFile(__dirname + '/')
})
//监听端口
app.listen(8000,()=>{
    console.log("服务以启动，8000端口监听中……");
})

三.原生Ajax

//Ajax操作--GET请求
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化 设置请求的方法和url
xhr.open('GET/POST/all','URL');
//3.发送
xhr.send();
//4.事件绑定 处理服务端返回的结果
//on when 当...时候
//readystate 是 xhr 对象中的属性，表示状态码 0 1 2 3 4
//change 改变
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        //判断响应状态码 200 404 403 401 500
        //2XX 成功
        if(xhr.status >= 200 && xhr.status <= 300){
            //处理结果 行 头 空行 体
            //响应
            // console.log(xhr.status);//状态码
            // console.log(xhr.statusText);//状态字符串
            // console.log(xhr.getAllResponseHeaders());//所有响应头
            // console.log(xhr.response);//响应体

            //设置文本
            div.innerHTML = xhr.response
        }else{

        }
    }
}
//server.js
app.get('/server',(request,response)=>{
    //设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*')
    //设置简单的响应体
    response.send('hello,ajax-get')
})

readystate

值	状态	描述
0	UNSENT	代理被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send() 方法已经被调用，并且头部和状态已经可获得。
3	LOADING	下载中；responseText 属性已经包含部分数据。
4	DONE	下载操作已完成。

当get时，open中的url拼好参数，send中不传参数

当post时，open中不带参数，send中传入参数（open中的URL也可以带参数传递）

JSON数据：

//创建对象
const xhr = new XMLHttpRequest()
//设置响应体接受数据的类型
xhr.responseType = 'json'
//初始化 设置请求的方法和url
xhr.open('GET','http://127.0.0.1:8000/josnserver')
//发送
xhr.send()
//事件绑定处理返回的结果
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status >= 200 && xhr.status <= 300){
            //1.手动对josn数据转化
            // let data = JSON.parse(xhr.response)
            // div.innerHTML = data.name
            //2.自动对josn数据转化,设置响应体的数据类型
            div.innerHTML = xhr.response.name
        }
    }
}
//server.js
app.all('/josnserver',(request,response)=>{
response.setHeader('Access-Control-Allow-Origin','*')
let data = {
    name:"xiaoming"
};
let str = JSON.stringify(data)
response.send(str)
})

1.nodemon

nodemon 是一种工具，通过在检测到目录中的文件更改时自动重新启动节点应用程序来帮助开发基于 Node.js 的应用程序。

安装nodemon ，以管理员身份打开vscode

在集成终端中打开，输入npm install -g nodemon

运行nodemon服务输入npx nodemon +包名

2.IE缓存问题

IE浏览器接受到ajax请求后，会进行缓存，下次再获取这个数据时候，将不再走服务器，而是直接走浏览器缓存，造成数据无法及时更新。

解决方法：

xhr.open('GET','http://127.0.0.1:8000/ie?time = '+Date,now())
//Date,now() 获取当前的时间戳 时间是在变化的，造成每次的url不一样，让浏览器以为是不同的请求

3.Ajax请求超时和网络异常

const xhr = new XMLHttpRequest()
//超时设置 2s(服务器端设置延迟函数控制异常情况)
xhr.timeout = 2000
//超时回调
xhr.ontimeout = function () {
    alert('请求超时了')
  }
//网络异常回调
xhr.onerror =function(){
    alert('网络异常！')
}

网络异常控制：

4.取消请求

let xhr = null
//接受请求
btn[0].onclick = function(){
    xhr = new XMLHttpRequest()
    xhr.open('GET','http://127.0.0.1:8000/delay')
    xhr.send()
}
//取消请求
btn[1].onclick = function(){
    xhr.abort()//abort方法，用于主动取消未完成的请求。
}

5.请求重复发送问题

let xhr = null
//标识变量
let isSending = false//是否正在发送Ajax请求
//接受请求
btn.onclick = function(){
//判断标识变量
if(isSending)   xhr.abort();//如果正在发送则取消该请求，创建一个新的请求
xhr = new XMLHttpRequest()
//修改标识变量的值
isSending = true
xhr.open('GET','http://127.0.0.1:8000/delay')
xhr.send()
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        isSending = false
    }
}
}

四.jQuery-Ajax

1.jqurey发送Ajax请求

（get and post）

$(selector).get(url,data,success(response,status,xhr),dataType)
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(response,status,xhr)	可选。规定当请求成功时运行的函数。额外的参数：response - 包含来自请求的结果数据status - 包含请求的状态xhr - 包含 XMLHttpRequest 对象
dataType	可选。规定预计的服务器响应的数据类型。默认地，jQuery 将智能判断。可能的类型："xml""html""text""script""json""jsonp"

$('button').eq(0).on('click',function(){
    $.get('http://127.0.0.1:8000/jqurey-server',{a:100,b:200,c:300},(data)=>{
        console.log(data);
        $('ol').append(`<li>${data}</li>`)
    })
})
$('button').eq(1).on('click',function(){
    $.post('http://127.0.0.1:8000/jqurey-server',{a:100,b:200},(data)=>{
        console.log(data);
        $('ol').append(`<li>${data}</li>`)
    })
})
$('button').eq(2).on('click',function(){
    $.post('http://127.0.0.1:8000/jqurey-server',{a:100,b:200},(data)=>{
        console.log(data);
        $('ol').append(`<li>${data.age}</li>`)
    },'json')
})

app.all('/jqurey-server',(request,response)=>{
    response.setHeader('Access-Control-Allow-Origin','*')
    let dt = {
        age:'18'
    }
    response.send(JSON.stringify(dt))
})

2.通用方法发送请求

$.ajax({
    //url
    url:'http://127.0.0.1:8000/jqurey-server',
    //参数
    data: {a:100},
    //请求类型
    type:'GET',
    //响应体结果类型
    dataType:'json',
    //成功的回调
    success:(data)=>{
        console.log(data);
        $('ol').append(`<li>${data.id}</li>`)
    },
    // 超时时间
    timeout: 2000,
    // 失败回调
    error:()=>{
        alert('失败了')
    },
    //头信息
    // headers:{
    //     c:300,
    //     d:400
    // }
})

五.Axios-Ajax

then() .then()前的方法执行完后再执行then()内部的程序，这样就避免了，数据没获取到等的问题。

//设置baseURL
    axios.defaults.baseURL = 'http://127.0.0.1:8000'
    //get请求
    btn[0].onclick = function () {
        axios.get('/axios-server',{
            //url参数
            params:{
                id:100,
                vip:7
            },
            //请求头参数
            headers:{
                name:'axios',
                way:'ajax'
            },
        }).then(value => {
            console.Alog(value);
            console.log(value.data);
        })
      }
    //post请求
    btn[1].onclick = function(){
    axios.post('/axios-server',
    //请求体
    {
        username: 'admin',
        userpwd: 'admin'
    },{
         //url参数
         params:{
            id:200,
            vip:8
            },
        //请求头参数
        headers:{
            name:'axios1',
            way:'ajax1'
            },     
    })
    }
    //axios
    btn[2].onclick = function(){
        axios({
            //请求方法
            method: 'POST',
            //url
            url: 'axios-server',
            //url参数
            params: {
                vip: 10,
                level: 30
            },
            //头信息
            headers: {
                a: 'b',
                b: 'a'
            },
            //请求体参数
            data: {
                username: 'root',
                userpwd: 'root'
            }
        }).then( resp =>{
                console.log(resp);
            }
        )
    }

六.使用fetch()函数发送Ajax请求

fetch('http://127.0.0.1:8000/fetch-server?vip=10',{
               //请求方法
               method: 'POST',
               //请求头
               headers:{
                   name: 'bdb'
               },
               //请求体
               body:'user=admin&pwd=123'
           }).then(resp =>{
               // console.log(resp);
               // return resp.text()
               return resp.json()//返回josn对象
           }).then(resp =>{
               console.log(resp);
           })

七.跨域

同源策略

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

ajax默认遵循同源策略

违背同源策略就是跨域

满足同源策略，url可以简写

如何解决跨域

josnp一种非官方的跨域解决方案，只支持get请求,借助script标签跨域

//原生jsonp实践
<body>
    用户名:<input type="text">
    <span></span>
    <!-- <script src="http://127.0.0.1:8000/jsonp-server"></script> -->
    <script>
        //失去焦点，判断有户名是否存在
        let inp = document.querySelector('input')
        let span = document.querySelector('span')
        //创建check函数
        function check(data){
            inp.style.border ="1px solid #f00"
            span.innerHTML = data.msg
        }
        inp.onblur = function () {
            //获取用户输入的值
            let user = inp.value 
            //向服务端发送请求，检测用户名是否存在
            //1.创建script标签
            let script = document.createElement('script')
            //2.设置src
            script.src = 'http://127.0.0.1:8000/check-server'
            //3.把script标签插入文档
            document.body.appendChild(script)
          }
    </script>
</body>

//检测用户名是否存在
app.all('/check-server',(request,response)=>{
    let userdata = {
        err: 1,
        msg: '用户名已存在'
    }
    //数据转化为字符串
    let str = JSON.stringify(userdata)
    //返回结果
    response.end(`check(${str})`)
})

//jqurey-jsonp
//注意在url后拼接callback=?，将会返回个函数代码
$.getJSON('http://127.0.0.1:8000/jqurey-jsonp?callback=?',function(resp){
                // console.log(resp);
                $('div').html(`
                    cid:${resp.cid}<br>
                    addr:${resp.addr}
                `)
            })	

app.all('/jqurey-jsonp',(request,response)=>{
    let data = {
        cid: 2,
        addr: ['北京','上海']
    }
    let strs = JSON.stringify(data)
    //接受callback参数
    let cb = request.query.callback;
    response.send(`${cb}(${strs})`)
})

CORS 跨域资源共享

官方的跨域解决方案，新增一组HTTP首部字段，允许服务器声明那些源站通过浏览器有权限访问那些资源

CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行

// response.setHeader('Access-Control-Allow-Origin','*')//所有
// response.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:5500')//允许这个url