去恶补了ajax知识
一、ajax简介
1、ajax全称为Asynchronous JavaScript And XML，就是异步的JS 和XML 2、通过AJAX可以再浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据 3、ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式
二、XML简介
1、可扩展标记语言
2、被设计用来传输和存储数据
3、XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，由来表示一些数据。就是自己给标签取名字
4、现在被json取代了
三、ajax特点
1、优点
可以无需刷新页面而与服务器端进行通信 允许根据用户事件来更新部分页面内容
2、缺点
没有浏览历史，不能回退 存在跨域问题（同源） SEO不友好（爬取数据）
四、HTTP协议
http协议（超文本传输协议），协议详细规定了浏览器和万维网服务器之间互相通信的规则。
1、请求报文
重点是格式与参数
行 GET/s?ie=utf-8 HTTP/1.1
头 Host:atguigu.com
Cookie:name=guigu
Content-type:application/x-www-form-urlencoded
User-Agent:chrome 83
空行
体 username=admin&password=admin 2.响应报文
五、通过原生js进行AJAX操作
1、基本实现
node.js部分：
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #90b
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
// 获取button 元素
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 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){
// 处理结果 行 头 空行 体
// 1.响应行
// console.log(xhr.status); //状态码
// console.log(xhr.statusText); //状态字符串
// console.log(xhr.getAllResponseHeaders()); //所有响应头
// console.log(xhr.response); //响应体
// 设置 result 的文本
result.innerHTML = xhr.response
}else{}
}
}
}
</script>先启动服务器，网页点击按钮后向服务器发送GET请求会收到如下结果
POST请求
将服务器GET部分复制一份，将GET改为POST，同理可得
设置请求体、请求头
// 发送 请求体写法很自由 尽量规范美观
// xhr.send('a:100&b:200&c:300')
// xhr.send('1234567')
xhr.send('a=100&b=200&c=300')
服务器响应JSON数据
json的两种方法：
-
将对象转化为json 格式 ：JSON.stringify()
-
将JSON格式转化为对象：JSON.parse()
nodemon自动重启安装
重新编辑服务器都需要node server 重启 ，安装nodemon之后F5就可以重启服务器
网络超时与异常
用户给服务器发送请求，服务器返回值给用户时返回时间太久，可以提前提醒用户重启页面
取消请求
上一个网络异常是自动取消请求，现在是手动取消请求。当服务器返回给用户时还没有到用户，就手动取消请求
abort 是XMLHttpRequest 的一个对象
不能使用const 值会变量 会报错
重复发送请求的问题
用户频繁发起请求，服务器频繁响应
如何解决？查找是否有相同的请求，如果有则先取消相同的请求，再发一次请求即可
jQuery 中的 AJAX
jquery用axios 请求报文分别有：
自定义强的用$.ajax发送请求，简易代码用$.get / $.post
用 axios发送 ajax请求
是在外网复制的axios链接，可能没有办法实现跨域请求
解决：下载个插件，cnpm install cors --save,在js文件中，const cors=require('cors');app.use(cors()); 这样后不用设置响应头也能解决所有问题实现跨域。
（1）首先通过命令行 npm install -g cnpm --registry=https://registry.npm.taobao.org， 安装cnpm。
（2）然后在server.js文件中，const express = require("express");之后添加 const cors=require('cors'); 注意cors是由引号包围的
（3）在const app = express();之后添加app.use(cors());
（4）启动运行，即可不报错
.then() 处理返回结果
使用fetch函数发送ajax请求
fetch函数是全局对象，可以直接调用，返回的是promise对象
fetch 使用频率较少
同源策略
协议、域名、端口号，必须完全相同
跨域请求？
两个网址来源于不同的服务器
如何解决跨域
jsonp
仅支持get 请求
-
如何工作：在网页有一些标签天生具有跨域能力，比如：img link iframe script，JSONP就是利用script标签的跨域能力来发送请求的
使用end() 不会加特殊的响应头，最后返回是带有参数的函数，函数能够被浏览器解析，参数是指用户需要看到的数据
案例-
用户名输入后光标离开 显示用户已存在
jquery发送jsonp请求
按下按钮 向8000端口发送请求将内容返回框内
callback参数的值作为函数被服务器调用 要看成jquery已经注册了这个函数
cors
-
跨域资源共享。CORS是官方的跨域解决方案
-
特点是不需要在客户端做任何特殊的操作，完全在服务器端中处理，支持get和post请求。跨域资源共享标准新增了一组http首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
-
工作原理：通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应后就会对响应放行
-
![[附源码]java毕业设计小说网站的设计与实现1](https://img-blog.csdnimg.cn/32e09a591458439d93b30d8380e32bcd.png)
