Ajax 学习笔记

最新推荐文章于 2022-11-10 23:58:50 发布

Agoni Lay

最新推荐文章于 2022-11-10 23:58:50 发布

阅读量109

点赞数 4

本文链接：https://blog.csdn.net/qq_58163927/article/details/118693841

版权

ajax 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

jquery Ajax

1 篇文章 0 订阅

订阅专栏

Ajax

零、基本概述

0.1 服务器

提供了某种服务的电脑，一般没有显示器，没有输入设备

服务器主要提供的服务：

文件服务器（提供文件下载任务）
邮件服务器（提供邮件服务）
游戏服务器
web服务器

0.2 web服务器

如何成为web服务器：

装一个软件：

apache – 阿帕奇：开源的web服务器软件，目前使用人数最多的 web服务器软件
IIS – 微软的web服务器软件，不开源 --> 开源
tomcat – web服务器软件
Nqinx – web服务器软件

一、原生Ajax

1.1 AJAX简介

页面内加载数据，不进行刷新界面

1.2 XML简介

XML 可扩展标记语言，被设计用来传输和存储数据

比如说我有一个学生数据：

name = "孙悟空"; age = 18; gender="男";

用XML表示：

<student>
    <name>孙悟空</name>
    <age>18</age>
    <gender>男</gender>
</student>

现在已经被 JSON 取代了

用JOSN表示：

{"name":"孙悟空","age":18,"gender":"男"}

1.3 AJAX的特点

1.3.1 优点

可以无需刷新页面而与服务器端进行通信
允许你根据用户事件来更新部分页面内容

1.3.2 缺点

没有浏览历史，不能回退
存在跨域问题（同源）
SEO不友好

1.4 http协议

HTTP (hypertext transport protocol) 协议【超文本传输协议】

详细规定了浏览器和万维网服务器之间互相通信的规则。

以下报文可以在

1.4.1 请求报文

格式与参数：

行		POST /s?ie=utf-8  HTTP/1.1
头		Host: atguigu.com
		 Cookie: name=guigu
		 Content-type: application/x-www-form-urlencoded
		 User-Agent: chrome 83
空行
体		GET(为空) POST(可以不为空) username=admin&admin&password=admin

1.4.2 响应报文

行		HTTP/1.1  200 (404,403,401,500,200)  OK
头		Content-Type: texy/html;charset=utf-8
		 Content-length: 2048
		 Content-encoding: gzip
空行		
体		<html>
			<head>
			</head>
			<body>
				<h1>张艺兴</h1>
			</body>
		</html>

安装 node.js

安装 Express：基于 Node.js 的 web开发框架

// 初始化npm
npm init --yes
// 安装 express 框架
npm install express

设置服务端 server.js

// 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.setHeader('Access-Control-Allow-Headers', '*')
    // 设置响应
    // response.send('HELLO EXPRESS');
    const data = {name: '张艺兴'}
  	response.send(JSON.stringify(data));
});

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

启动 web服务端 cd到对应文件夹打开终端

node server.js

nodemon 工具：帮助我们重启服务

https://www.npmjs.com/package/nodemon 官网

终端输入安装

npm install -g nodemon

二、jQuery AJAX

2.1 导入jQuery

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2.2 jQuery发送AJAX

get

$.get('http://127.0.0.1:8000/jquery-serve', {a:100, b:200}, function (data) {
    console.log(data);
}, 'json')

post

$.post('http://127.0.0.1:8000/jquery-serve', {a:100, b:200}, function (data) {
    console.log(data);
})

ajax

$.ajax({
    // url
    url: 'http://127.0.0.1:8000/jquery-serve',
    // 参数
    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
    }
})

// jQuery 服务
app.all('/jquery-serve', (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

3.1 引入Axios

script标签引入Axios

// crossorigin="anonymous" 页面报错可以加
<script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

npm 下载

npm install axios

3.2 发送AJAX请求

get

axios.get('http://127.0.0.1:8000/axios-serve', {
    // url参数
    params: {
        id: 100,
        vip: 7
    },
    // 请求头信息
    headers: {
        name: 'AgoniLay',
        age: 20
    }
}).then(value => {
    console.log(value);
})

post

btns[1].onclick = function () {
    axios.post('/axios-serve', {
        username: 'admin',
        password: 'admin'
    }, {
        // url参数
        params: {
            id: 200,
            vip: 9
        },
        // 请求头信息
        headers: {
            height: 180,
            weight: 180
        }
    });
}

ajax

axios({
    // 请求方法
    method: 'POST',
    // url
    url: '/axios-serve',
    // url参数
    params: {
        vip: 10,
        leave: 30
    },
    // 头信息
    headers: {
        a: 100,
        b: 200
    },
    // 请求体参数
    data: {
        username: 'admin',
        password: 'admin'
    }
}).then(response => {
    console.log(response);
    // 响应状态码
    console.log(response.status);
    // 响应状态字符串
    console.log(response.statusText);
    // 响应头信息
    console.log(response.headers);
    // 响应体
    console.log(response.data);
})

// Axios 服务
app.all('/axios-serve', (request, response)=>{
  // 设置相应头 设置允许跨域
  response.setHeader('Access-control-Allow-Origin','*');
  response.setHeader('Access-Control-Allow-Headers', '*')
  response.send('Hello Axios AJAX');
  // const data = {name: '张艺兴'}
  // response.send(JSON.stringify(data));
});

四、使用fetch函数

使用 fetch 请求

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

// fetch 服务
app.all('/fetch-serve', (request, response)=>{
    // 设置相应头 设置允许跨域
    response.setHeader('Access-control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers', '*')
    // response.send('Hello Fetch AJAX');
    const data = {name: '张艺兴'}
    response.send(JSON.stringify(data));
});

五、跨域

5.1 同源策略 (Same-Origin Policy)

最早由 Netscape 公司提出，是浏览器的一种安全策略。

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

违背同源策略就是跨域。

5.2 如何解决跨域

JSONP

JSONP 是什么

JSONP(JSONP with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求。
JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script

利用 script 标签的跨域能力来发送请求的。

使用 jsonp 跨域

index.html：

<script>
    // 处理数据
    function handle(data) {
        // 获取 result 元素
        const result = document.getElementById('result');
        result.innerHTML = data.name;
    }
</script>
<!-- <script src="./js/app.js"></script> -->
<script src="http://127.0.0.1:8000/jsonp-serve"></script>

app.js：

const data = {
  name: '张艺兴帅'
};

handle(data);

server.js：

// jsonp 服务
app.all('/jsonp-serve', (request, response)=>{
    // response.send('console.log("hello jsonp")');
    const data = {
        name: '张艺兴帅'
    };
    // 见这个字符串转化为字符串
    let str = JSON.stringify(data);
    // 返回结果
    response.end(`handle(${str})`);
});

jQuery 发送 JSONP 请求

$.getJSON('http://127.0.0.1:8000/jquery-jsonp-serve?callback=?', function (data) {
    $('#result').html(`
        名称：${data.name}<br>
        校区：${data.city}
    `)
})

app.all('/jquery-jsonp-serve', (request, response)=>{
    // response.send('console.log("hello jsonp")');
    const data = {
        name: '张艺兴',
        city: ['LAY', 'AGONI', "AGONILAY"]
    };
    // 见这个字符串转化为字符串
    let str = JSON.stringify(data);
    // 接收 callback 参数
    let cb = request.query.callback;
    // 返回结果
    response.end(`${cb}(${str})`);
});

CORS

CORS 是什么

CORS (Cross-Origin Resource Sharing)，跨域资源共享。是官方的跨域解决方案。

特点：不需要再客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求。
CORS 是怎么工作的

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

CORS 的使用

主要是服务器端的设置：

app.all('/cors-serve', (request, response)=>{
    // 设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*')
    // response.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:5500')

    response.send('hello cors');
});

一般还会设置：

// 设置响应头部
response.setHeader('Access-Control-Allow-Headers', '*')
// 设置响应方法
response.setHeader('Access-Control-Allow-Method', '*')

Agoni Lay

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
Ajax 学习笔记

Ajax零、基本概述0.1 服务器提供了某种服务的电脑，一般没有显示器，没有输入设备服务器主要提供的服务：文件服务器（提供文件下载任务）邮件服务器（提供邮件服务）游戏服务器web服务器0.2 web服务器如何成为web服务器：装一个软件：apache – 阿帕奇：开源的web服务器软件，目前使用人数最多的 web服务器软件IIS – 微软的web服务器软件，不开源 --> 开源tomcat – web服务器软件Nqinx – web服务器软件一、原生Ajax1
复制链接

扫一扫

专栏目录