AJAX
Published on 2022-07-14 13:13 in 分类: Web前端学习 with 深巷の猫
分类: Web前端学习

AJAX

一、AJAX概述

  1. AJAX：

    AJAX全称Asynchronous JavaScript And XML，即异步的JS和XML

    通过AJAX在网页不刷新的情况下，向服务端发送http请求

    最大优势：无刷新获取数据

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

  2. XML

    可拓展标记语言

    被设计用来传输和存储数据

    不同于HTML是预定义标签，XML都是自定义标签，用来表示一些数据

    		<student>
    		    <name>张三</name>
    		    <age>18</age>
    		    <gengder>男</gengder>
    		</student>

    现在已经被JSON取代

    		{"name":"张三","age"=18,gender:"男"}

  • 优点

    • 无需刷新页面有与服务器进行通信

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

  • 缺点

    • 没有浏览记录，不能回退
    • 存在跨域问题（同源）
    • SEO不友好（搜索引擎优化）

  1. HTTP

    • 请求报文

      行：请求类型 url路径 HTTP协议版本

      头：名字：值

      空行

      体：参数

    • 响应报文

      行：HTTP协议版本 响应状态码 响应状态字符串

      头：名字：值

      空行

      体：返回结果

二、Express框架与基本使用

基于Node.js平台，快速、开放、极简的Web开发框架

使用

  1. 在终端中

    • 初始化：npm init --yes
    • 安装express框架：npm i express

  2. 在js文件中

    		//引入express
    		const express = require('express');
    		 
    		//创建应用对象
    		const app = express();
    		 
    		//创建路由规则
    		app.get('/',(request,response)=>{//get:	请求类型，request、response都是参数，request是对请求报文的封装，response是对响应报文的封装
    		    //设置响应头
    		    response.setHeader('Access-Control-Allow-Origin',‘*);//设置允许跨域
    		    //设置响应体
    		    response.send('Hello');
    		});
    		 
    		//监听端口启动服务
    		app.listen(8000,()=>{//8000：端口
    		    console.log("服务已启动,8000端口监听中...")
    		});

  3. 启动服务

    终端中：node 脚本名字

  4. 关闭服务

    终端中：Ctrl+C

  5. nodemon自动重启工具

    安装：npm install -g nodemon

    之后启动服务时使用nodemon

三、AJAX请求

1.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>首页</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #000;
        }
    </style>
</head>
 
<body>
    <div id="result"></div>
    <button>点击发送请求</button>
    <script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById('result');
        btn.onclick = function () {
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化 设置请求方法和url
            xhr.open('GET', 'http://127.0.0.1:8000/server');
            //3发送
            xhr.send();
            //4.事件绑定 处理服务端返回的结果
            //on  当...时候
            //readystate 是xhr对象中的属性，表示状态：0(未初始化) 1(调用完open) 2(调用完send) 3(服务端返回部分结果) 4(服务端返回全部结果)
            //change  改变
            xhr.onreadystatechange = function () {
                //判断（服务端返回了所有结果）
                if (xhr.readyState == 4) {
                    //判断响应状态码 2xx成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        //处理结果 行 头 空行 体
                        //响应
                        // console.log(xhr.status);//响应状态码
                        // console.log(xhr.statusText);//响应状态字符串
                        // console.log(xhr.getAllResponseHeaders());//响应头
                        // console.log(xhr.response);//响应体
 
                        //设置result文本
                        result.innerHTML = xhr.response;
                    }
 
                }
            }
        }
    </script>
</body>
 
</html>

2.请求参数

//GET请求
xhr.open('GET','http://127.0.0.1:8000/server?a=1&b=2&c=3');//?a=1&b=2&c=3
 
//POST请求
xhr.send('a=1&b=2&c=3');//a=1&b=2&c=3
xhr.send('a:1&b:2&c:3');//a:1&b:2&c:3

3.请求头

xhr.setRequestHeader('属性名','值');

4.响应JSON数据

  1. 服务端
app.get('/server', (request, response) => {
    //响应一个对象
    const date = {
        name: '张三'
    }
    //对对象进行字符串转换
    let str = JSON.stringify(date);
    
    //设置响应体
    response.send(str);
});
  1. 客户端
//手动转换
let date = JSON.parse(xhr.response);
result.innerHTML = date.name;
 
//自动转换
xhr.responseType='json';//刚开始设置返回的类型
result.innerHTML = xhr.response.name;

5.JQuery发送AJAX请求

$('button').eq(0).click(fuction(){
                $.get('http://127.0.0.1:8000/server', { a=1, b=2 }, 'json');
            });
$('button').eq(1).click(fuction(){
                $.post('http://127.0.0.1:8000/server', { a=1, b=2 }, 'json');
            });

JQuery通用方法发送AJAX请求

$('button').eq(2).click(fuction(){
                $.ajax({
                //url
                url:'http:'http://127.0.0.1:8000/server',
                //参数
                date:{a:1,b:2},
                //请求类型
                type:'GET',
                //响应体结果
                dateType:'json',
                //成功的回调
                succes:function(date){},
                //超时时间
                timeout:2000,
                //失败的回调
                error：function(){},
                })
                //头信息
                headers:{}
            });

6.Axios发送AJAX请求

const btn = document.querySelectorAll('button');
 
btn[0].onclick = function () {
    //GET请求
	axios.get('http://127.0.0.1:8000/server', {
    	//url参数
        params: {
        	a: 1, b: 2
        },
        //请求头信息
        headers: {}
        }).then(value => { })
};
btn[1].onclick = function () {
	//POST请求
    axios.post('http://127.0.0.1:8000/server', {
    	//请求体
        },
        {
        	//url参数
            params: {
            	a: 1, b: 2
            },
            //请求头信息
            	headers: {}
            }).then(value => { })
};

Axios通用方法发送AJAX请求

btn[2].onclick = function () {
    axios({
        //请求方法
        mothod:'GET',
        //url
        url:'http://127.0.0.1:8000/server',
        //url参数
        params:{
            a=1
        },
        //头信息
        headers:{
            b=2
        },
        //请求体参数
        date:{}
    }).then(response=>{})
};

7.fetch函数发送AJAX请求

btn[3].onclick = function () {
    fetch('http://127.0.0.1:8000/server',{
        //请求方法
        mothod:'GET',
        //请求头
        headers:{
            b=2
        },
        //请求体
        date:'username=admin'
    }).then(response=>{})
};

四、AJAX请求问题

1.IE缓存

IE浏览器会把响应进行缓存，服务端数据更新后，IE浏览器首先使用的是缓存的信息，导致它不能及时的得到最新数据

//解决方法
xhr.open('GET','http://127.0.0.1:8000/server?t='+Date.now());//?t='+Date.now()每次请求的参数值都不同

2.请求超时和网络异常

//超时设置
xhr.timeout = 2000;//时间到了之后没有得到响应，自动取消请求
 
//超时回调
xhr.ontimeout = fuction(){
    alert("网络异常，请稍后重试");
}
 
//网络异常回调
xhr.onerror = function(){
    alert("网络有问题");
}

3.取消请求

xhr.abort();

4、请求重复发送

防止用户反复发送相同的请求，导致服务器压力过大

let xhr =null;
        //设置标识变量
        let isSending= false;//是否正在发送请求
 
        btn.onclick = function () {
            //判断标识变量
            if(isSending){//正在发送请求，这取消此请求
                xhr.abort();
            }
 
            xhr = new XMLHttpRequest();
            //修改标识变量的值
            isSending=true;
            xhr.open('GET', 'http://127.0.0.1:8000/server');//设置参数server?a=1&b=2&c=3
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    //修改标识变量
                    isSending=false;
                }
            }
        }

四、同源策略

同源：协议、域名、端口号必须完全相同

违背同源策略就是跨域

AJAX默认遵循同源策略

xhr.open('GET','/server');//满足同源策略，url可简写

解决跨域

1.JSONP

非官方的跨域解决方案，只支持get请求

JSONP就是利用script标签的跨域能力来发送请求（在网页中一些标签天生具有跨域能力，例如：img、link、iframe、script）

2.CORS

跨域资源共享，官方的跨域解决方案

不需要在客户端做任何操作，完全在服务器中进行处理，支持get、post请求

通过设置响应头来允许跨域

response.setHeader('Access-Control-Allow-Origin', '允许跨域的网页');
response.setHeader('Access-Control-Allow-Origin', '*');//允许所有网页
posted @   深巷の猫  阅读(84)  评论(0)  编辑  收藏  举报
相关博文：
·  Spring
·  SpringMVC
·  3_Ajax概述
·  Ajax从入门到精通
·  AJAX笔记
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
← → ↓ ↑
点击右上角即可分享
微信分享提示
AI IDE Trae