前端-AJAX与跨域问题

七里香777

已于 2022-10-25 14:40:08 修改

阅读量407

点赞数

文章标签： ajax 前端 javascript

于 2022-06-21 10:42:35 首次发布

本文链接：https://blog.csdn.net/weixin_44286392/article/details/125375216

版权

前言

最近跟着尚硅谷学习了AJAX，里面有讲到http协议、express框架、nodemon、axios、fetch、jQuery以及跨域，今天有时间来整理下。

AJAX内容

最大特点：网页不刷新的情况下向服务端发送http请求，得到http响应；
最大优势：无刷新获取数据；
缺点：

无浏览历史，不能回退
跨域问题
SEO不友好

一些ajax的例子：百度搜索框；
网站的注册页面，检测用户名是否可用（下图：github中的仓库名是否可用）；

某些电商网站的二级分类列表

express框架

安装express

npm i express

上一篇博客👉express框架监听端口

nodemon

当我们开发node后端服务时，每次更改文件都需重新运行一下文件，服务才能生效。
nodemon：修改服务端代码后无需再重启服务
全局安装：npm install -g nodemon
未使用nodemon：node server.js
使用nodemon：nodemon server.js 更改server.js文件后，只需按下保存键即可

跨域

在了解跨域之前，先了解一下同源策略
同源策略：同源策略是浏览器的一种安全策略，URL由协议、域名、端口号这三部分组成，只有这三部分完全相同时才是同源策略。违背同源策略就是跨域。ajax默认遵循同源策略
如何解决跨域问题？

JSONP（JSON with Padding）：非官方的跨域解决方案，只支持get请求。原理：网页中有些标签本来就具有跨域能力，比如img、link、iframe、script，JSONP就是利用script标签的跨域能力来发送请求的
CORS（Cross-origin Resource Sharing）：官方的跨域解决方案。支持get、post等请。特点：客户端无需特殊操作

上传到github

跟着尚硅谷ajax的30个视频写了以下代码，文件目录如下。有原生ajax，express框架的基本使用，jQuery发送ajax请求，fetch函数发送ajax请求（返回的是一个promise对象），axios发送ajax（使用居多，axios：热门的ajax工具库）。

上传到github上面的操作是参考之前看过的vue项目视频
包含以下步骤：

先在github上创建仓库
输入仓库名

创建完成后，会看到下面这个画面，红框中的命令一会儿会用到。
初始化
在要上传的项目终端目录下 git init
接着是上图中的命令
git remote add origin https://github.com/qilixiang007/aiguigu-ajax.git
将文件添加到暂存区 git add .
.代表当前目录下所有东西
放到提交区git commint -m"first"
git commit 命令将暂存区内容添加到本地仓库中
最后一步 git push origin master origin就是我们第4步中的仓库
到远程库刷新一下，就可以看到我们上传的代码了

在这个过程中，我遇到了个错误error: remote origin already exists.
百度了一下，解决办法如下（参考这篇博客）：
该错误表示远程仓库已存在，输入git remote rm origin 先删除关联的origin的远程库，再关联自己的仓库即可。

写在后面

本来想着稍微总结一下，方便自己以后回顾和学习，但写的过程中，越写越多，在写这个知识点的时候，会涉及到另一个知识点。意识到这就是学习的过程，因为知识点就像一张网络一样，都是有所关联的。为了完成这篇博客，去查阅之前看过的学习视频，并且还把自己遇到的错误记录下来，很喜欢这个过程，有感觉到在一点点充实自己。加油！

当然，写的博客可能会有不足和错误之处，欢迎批评指正！