Ajax初步了解

最新推荐文章于 2024-07-12 01:09:29 发布

g1167389592504

最新推荐文章于 2024-07-12 01:09:29 发布

阅读量105

点赞数

文章标签： ajax 前端 javascript jquery json

本文链接：https://blog.csdn.net/g1167389592504/article/details/125175393

版权

Ajax

尚硅谷Ajax视频地址

按住ctrl建鼠标点击访问

异步的js与xml

懒加载：用则加载，不用则不加载

优势：向服务器发送请求，无刷新获取数据

ajax不是编程语言，而是将现有标准组合在一起的使用方式

1. XML（可扩展标记语言）

用来储存和传输数据
与html区别
- html在网页中呈现数据/xml存储与传输
- html都是预定义标签/xml可以使用自定义标签
```
<student>
    <name>张三</name>
    <age>18</age>
</student>
```

2.ajax的优缺点

优点

无刷新获取数据

可以根据事件（需求）部分加载数据
缺点

没有浏览历史不能回退

存在跨域问题

对seo（搜索引擎优化）不太友好（爬虫爬不到）

3. Http协议

超文本传输协议，规定了浏览器与万维网服务器中间的通讯规则

请求

请求报文
- 行
请求方式路径、信息（参数） http的版本
- 头
  
  类：（空格）信息
- 空行
- 体
响应

响应报文
- 行
http版本状态码响应状态字符串
- 头
  
  类：（空格）信息
- 空行
- 体

1.http方法

get获取方法
post提交数据
put修改数据
delete删除数据

一般来说，约定俗成的方法，实际由后端来完成

2.http状态码

状态码	含义	说明
200	OK	请求成功
201	CREATED	创建成功
204	DELETED	删除成功
422	Unprocesable entity	[POST/PUT/PATCH] 当创建一个对象时，发生一个验证错误
400	BAD REQUEST	请求的地址不存在或者包含不支持的参数
401	UNAUTHORIZED	未授权
403	FORBIDDEN	被禁止访问
404	NOT FOUND	请求的资源不存在
500	INTERNAL SERVER ERROR	内部错误

3.postman工具

测试接口

4. Express框架

用express创建（写）node.js服务器

安装

npm i express
引入

const express=require（‘express'）
创建对象

const app =express（）
创建路由规则

app.get('/',(request,response)=>{

response.send(’响应内容‘)

})

监听端口

app.listen(8080,()=>{

console.log('8080已启动')

})

const express=require('express');
const app=new express();
app.all('/appinfo',(request,response)=>{
response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers','*');
    const data={
        name:'张三'
    }；
    let str = JSON.stringify(data);
    response.send(str);
})
app.listen('8080',()=>{
console.log("8080端口已启动")
})

4.ajax

格式

XML
jion格式（JavaScript对象格式）

原理

XMLHttpRequest（）

function(){
let xhr =new XMLHtppRequest();
xhr.open('get','/');
xhr.send();
xhr.onreadystatechange=function{
xhr.readyState
}}

3.响应头

4.响应

response.send();

const xhr = new XMLHttpLRequest();
xhr.open('GET','/');
xhr.send();
xhr.onreadystatechange=function{
    if(redystatechang===4){
        if(xhr.status>=200&&xhr.status<300){
JSON.parse(xhr.response）;
        }
    }
}

数据自动转化

xhr.ressponseType='json';

const xhr = new XMLHttpLRequest();
xhr.ressponseType='json';
xhr.open('GET','/');
xhr.send();
xhr.onreadystatechange=function{
    if(redystatechang===4){
        if(xhr.status>=200&&xhr.status<300){
xhr.response;
        }
    }
}

请求方式

post

   请求体写法比较灵活，看后端是否能够解析。
   请求头setRequestHeader（）
               xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//规定格式（预定义请求头）
自定义响应头需要后端配置

IE缓存

数据缓存后，影响数据更新

解决方法

在发起请求时添加一个时间戳

添加参数？t=

xhr.open('get','http//:127.0.0.1:8080/ie?t='+Date.now())

超时与网络异常的处理

xhr.timeout=2000;
xhr.ontimeout=funtion(){
    alert('请求异常，请稍后处理')
}
xhr.οnerrοr=function(){
alert('网络异常')
}

取消请求

let xhr = null;
xhr.abort();

防抖与节流

isSend=false;
if(isSend){xhr.abort()}

较完整版原生ajax

//提前声明xhr，才方便绑定和调用取消请求功能
        let xhr=null;
        // 拦截判断属性
        let isSend=false;
        //获取btn
        const btn3=document.getElementsByTagName('button')[2];
        // 绑定发送事件
        btn3.οnclick=function(){
            // 监听是否可拦截
            if(isSend){xhr.abort()}
            // 创建xhr
            xhr=new XMLHttpRequest();
            // 配置请求方式地址路由
            xhr.open('post','http://127.0.0.1:8080/get-json?t='+Date.now());
            // 接受数据格式
            xhr.responseType='json'
            // 发送请求
            xhr.send();
            //更改状态（可拦截）
            isSend=true;
            // 响应时间
            xhr.timeout=2000;
            // 超时处理函数
            xhr.ontimeout=function(){
                alert('请求超时，请重试')
            };
            // 错误处理函数
            xhr.οnerrοr=function(){
                alert('请求出错，请尝试')
            }
            // 监听回调
            xhr.onreadystatechange=function(){
                if(xhr.readyState===4){
                    if(xhr.status>=200&&xhr.status<=300){
                        console.log(xhr.response)
                        isSend=false;
                    }
                }
            }

        };
        // 取消功能
        // 获取按钮
        const btn4=document.getElementsByTagName('button')[3];
        // 绑定事件
        btn4.οnclick=function(){
            // 取消请求
            xhr.abort();
        }

5. axios

安装（--save安装的依赖）

npm install --save axios
引入

文件夹里面找axios.min.js
- 一步安装
标签网址引入（bootCDN），搜索，复标签
```
crossorigin='anonymous'//在axios中添加，作用允许跨域
```

get;

axios.defaults.baseURL='http//:127.0.0.1:8000';
function(){
axios.get('/',{
    params:{
        
    },
    headeas:{
}
}).then(value=>{})
}

post

axios.defaults.baseURl='';
function(){
axios.get('/',{
    键值对请求体
}，{其他参数})
}

通用

function(){
    axios({
        method:'post',
        url:'/',
        params:{
        
    },
        hearder:{
            
        }，
        data：{
}
    })
}

     const btns=document.querySelectorAll('button');
        axios.defaults.baseURL='http://127.0.0.1:8080'
        btns[0].onclick = function () {
            //GET 请求
            axios.get('axios-server', {
                //url 参数
                params: {
                    id: '100',
                    vip: '7'
                },
                //请求头信息
                headers: {
                    name: 'zs',
                    age: 20
                }
            }).then(value => {
                console.log(value);
            });
        }
        btns[1].οnclick=function(){
            axios.post('axios-server',{
                params:{
                    a:'100',
                    b:'200'
                },
                headers:{
                    name:'zs',
                    id:'123456'
                }
            }).then(value=>{
                console.log(value)
            })
        }
        btns[2].onclick = function () {
            axios({
                //请求方式
                method:'post',
                // 请求地址
                url:'/axios-server',
                // url请求参数
                params:{
                    a:100,
                    b:'100'
                },
                // 头信息
                headers:{
                    name:'zs'
                },
                // 请求体参数
                data:{
                    a:1,
                    b:2
                }
            }).then(value=>{
                console.log(value)
            })
        }

6.jQuery的ajax

安装

标签网址引入（bootCDN），搜索，复标签

get

$.get('网址/路由'，{键值对参数}，响应函数，声明数据类型json)
post

$.get('网址/路由'，{键值对参数}，响应函数，声明数据类型json)

通用

$.ajax({

请求地址

url:'',

请求参数

data:{}

响应体结果设置

dataType：’json‘

成功回调

success：function（data）{ }

失败回调

error：

超时时间

timeout：

头信息

headers：{

}

})

<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>

7. fetch函数

全局对象中的函数

btn.οnclick=function(){
            fetch('http://127.0.0.1:8080/fetch-server',{
                method:'GET',
                headers:{
                    name:'admin'
                }
            }).then(response=>{
                return response.json()
            }).then(response=>{
                console.log(response);
            })
        }

8.跨域请求

同源策略（同一个来源）

协议名（IP）、域名、端口号相同

1. jsonp

利用script标签，不是ajax属性，只支持get请求

响应数据的需要是JS代码

end()不会加特殊响应头
send（）带有特殊响应头

jQuery(json跨域)

<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){
                $('#result').html(`
                    名称: ${data.name}<br>
                    校区: ${data.city}
                `)
            });
        });
    </script>
</body>

2. CORS

cors是官方解决跨域的方案，不需要在客户端操作，完全在服务端设置响应头，支持get与post请求。

app.all('/cors-server', (request, response)=>{
    //设置响应头
    //网址端口
    response.setHeader("Access-Control-Allow-Origin", "*");
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
    //头信息
    response.setHeader("Access-Control-Allow-Headers", '*');
    //请求方法
    response.setHeader("Access-Control-Allow-Method", '*');
    response.send('hello CORS');
});