Ajax的学习
原生的Ajax
Ajax简介
Ajax就是一个那个异步的JavaScript和XML,通过我们的Ajax就可以实现异步的向我们的那个服务器发送请求，
可以实现无需刷新就可以实现获取数据
首先我我们Ajax不是一个编程语言，而是一个技术
XML简介
可扩展的标记语言，被设计出来用于传输和存储数据，
XML 和 HTML类似，但是HTML中是含有那个预定义标签，而XML中是不含有这个预定义标签的，全部都是我们的自定义标签，用来表示一些数据
但是现在的话，这个已经被那个json数据给替代了
以前的话，我们的服务器返回的数据就是这个XML，但是现在的话，服务器返回的数据就是json格式的数据了
Ajax的特点
优点
无需刷新页面，就可以向服务器请求数据，并且呈现于页面
缺点
没有缓存记录，不可以实现回退
存在跨域问题(同源)
SEO(搜索引擎优化)不友好
HTTP协议
HTTP协议，超文本传输协议，就是规定了浏览器和维网服务器之间的通讯的规则
在HTTP协议中，就是规定了两块内容
1.请求:给服务器发送内容的过程叫做请求，发送的内容叫做请求报文
2.响应:服务器给我们的返回数据的过程叫做响应，返回的内容叫做响应报文
请求报文的格式和参数
请求报文分为四个部分
1.请求行
行中包含的有：请求方法(GET/POST...) / 请求路径(URL) / HTTP协议版本(HTTP/1.1)
2.请求头
HOST / Cookie / Content-type / User-Agent
3.空行
4.请求体
GET请求的话，那么我们的请求体可以为空
POST请求的话，我们的请求体可以含有内容
响应报文的格式和参数
响应报文也含有四个部分
1.响应行
HTTP版本号 / 响应状态码 / 响应的描述信息
2.响应头
Content-type / Content-length / Content-encoding
3.空行
4.响应体
就是的的服务器返回的结果的内容
Express框架的使用
这个框架的话，就是用来实现在我们的nodejs中搭建服务器的开发框架
1.首先先做一个初始化指令： npm init --yes
2.安装我们的express开发框架： npm i express
3.启动服务的方法： node 需要启动的js/ts脚本
4.然后输入：localhost:监听的端口号
// 1.首先先导入express
const express = require("express");
// 2.然后再创建app对象
const app = express();
// 3.创建路由规则
/*
* req == request 是对请求报文的封装
* res == response 是对响应报文的封装
* */
app.get("/", (req, res) => {
// 先设置一个简单的响应
res.send("HELLO EXPRESS");
})
// 4.监听端口
app.listen(8000, ()=>{
// 这个回调函数用于进行那个提示服务器已启动
console.log("Server started on port 8000");
});
ajax的get请求
index.html中的源码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="result">通过ajax向我们的服务器发送请求</button>
<div id="result01"></div>
<script>
let btn = document.getElementById("result");
btn.onclick = function () {
// 开始ajax的操作
/*
* 1.创建我们的ajax对象
* 2.开始初始化，设置请求的方法和url
* 3.发送请求
* 4.事件绑定，用来处理我们的服务器给我们返回的结果
* */
const xhr = new XMLHttpRequest();
xhr.open("GET", "http://127.0.0.1:8000/server");
xhr.send(null);
xhr.onreadystatechange = function() {
// 状态的标识的描述
if(xhr.readyState === 4) {
// 响应状态码的描述
if(xhr.status === 200 && xhr.status < 300) {
// 处理服务端的返回的结果 行 头 空白 体
console.log(xhr.status); //状态码
console.log(xhr.statusText); //状态字符串
console.log(xhr.getAllResponseHeaders()); //响应头
console.log(xhr.response); //响应体
// 渲染到我们的网页中
let result = document.getElementById("result01");
result.innerText = xhr.responseText;
}
}
}
}
</script>
</body>
</html>
serve.js
// 1.首先先导入express
const express = require("express");
// 2.然后再创建app对象
const app = express();
// 3.创建路由规则
/*
* req == request 是对请求报文的封装
* res == response 是对响应报文的封装
* */
app.get("/server", (req, res) => {
// 设置我们的响应头,设置允许跨域
res.setHeader("Access-Controll-Allow-Origin", "*")
// 先设置一个简单的响应
res.send("HELLO EXPRESS");
})
// 4.监听端口
app.listen(8000, ()=>{
// 这个回调函数用于进行那个提示服务器已启动
console.log("Server started on port 8000");
});
ajax的post请求
// 1.首先先导入express
const express = require("express");
// 2.然后再创建app对象
const app = express();
// 3.创建路由规则
/*
* req == request 是对请求报文的封装
* res == response 是对响应报文的封装
* */
app.get("/server", (req, res) => {
// 设置我们的响应头,设置允许跨域
res.setHeader("Access-Controll-Allow-Origin", "*")
// 先设置一个简单的响应
res.send("HELLO EXPRESS GET");
})
app.post("/server", (req, res) => {
// 设置我们的响应头,设置允许跨域
res.setHeader("Access-Controll-Allow-Origin", "*")
// 先设置一个简单的响应
res.send("HELLO EXPRESS POST");
})
// 4.监听端口
app.listen(8000, ()=>{
// 这个回调函数用于进行那个提示服务器已启动
console.log("Server started on port 8000");
});
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="result">通过ajax向我们的服务器发送请求</button>
<div id="result01"></div>
<script>
let btn = document.getElementById("result");
btn.addEventListener("click", function() {
// 开始ajax的操作
/*
* 1.创建我们的ajax对象
* 2.开始初始化，设置请求的方法和url
* 3.发送请求
* 4.事件绑定，用来处理我们的服务器给我们返回的结果
* */
const xhr = new XMLHttpRequest();
xhr.open("POST", "http://127.0.0.1:8000/server");
// POST请求时候的发送参数
xhr.send("a=100&b=200&c=200&d=200");
xhr.onreadystatechange = function() {
// 状态的标识的描述
if(xhr.readyState === 4) {
// 响应状态码的描述
if(xhr.status === 200 && xhr.status < 300) {
// 处理服务端的返回的结果 行 头 空白 体
console.log(xhr.status); //状态码
console.log(xhr.statusText); //状态字符串
console.log(xhr.getAllResponseHeaders()); //响应头
console.log(xhr.response); //响应体
// 渲染与我们的网页中
let result = document.getElementById("result01");
result.innerText = xhr.responseText;
}
}
}
})
</script>
</body>
</html>
ajax设置请求头
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button id="result">通过ajax向我们的服务器发送请求</button>
<div id="result01"></div>
<script>
let btn = document.getElementById("result");
btn.addEventListener("click", function() {
// 开始ajax的操作
/*
* 1.创建我们的ajax对象
* 2.开始初始化，设置请求的方法和url
* 3.发送请求
* 4.事件绑定，用来处理我们的服务器给我们返回的结果
* */
const xhr = new XMLHttpRequest();
xhr.open("POST", "http://127.0.0.1:8000/server");
// 设置请求头
xhr.setRequestHeader("Accept", "text/plain");
// POST请求时候的发送参数
xhr.send("a=100&b=200&c=200&d=200");
xhr.onreadystatechange = function() {
// 状态的标识的描述
if(xhr.readyState === 4) {
// 响应状态码的描述
if(xhr.status === 200 && xhr.status < 300) {
// 处理服务端的返回的结果 行 头 空白 体
console.log(xhr.status); //状态码
console.log(xhr.statusText); //状态字符串
console.log(xhr.getAllResponseHeaders()); //响应头
console.log(xhr.response); //响应体
// 渲染与我们的网页中
let result = document.getElementById("result01");
result.innerText = xhr.responseText;
}
}
}
})
</script>
</body>
</html>
// 1.首先先导入express
const express = require("express");
// 2.然后再创建app对象
const app = express();
// 3.创建路由规则
/*
* req == request 是对请求报文的封装
* res == response 是对响应报文的封装
* */
// .all 同时我们还可以来使用这个请求，来实现基本的那个接收任意的请求的格式
app.get("/server", (req, res) => {
// 设置我们的响应头,设置允许跨域
res.setHeader("Access-Controll-Allow-Origin", "*")
// 先设置一个简单的响应
res.send("HELLO EXPRESS GET");
})
app.post("/server", (req, res) => {
// 设置我们的响应头,设置允许跨域
res.setHeader("Access-Controll-Allow-Origin", "*")
// 设置响应头
res.setHeader("Access-Controll-Allow-Headers", "*")
// 先设置一个简单的响应
res.send("HELLO EXPRESS POST");
})
// 4.监听端口
app.listen(8000, ()=>{
// 这个回调函数用于进行那个提示服务器已启动
console.log("Server started on port 8000");
});
ajax的json数据
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="result"></div>
<script>
// 开始绑定一个键盘的按下的事件
window.onkeydown = function (event) {
// 创建ajax的对象
const xhr = new XMLHttpRequest();
// 发送请求
xhr.open("GET", "http://127.0.0.1:8000/json-server", true);
// 开始发送
xhr.send();
// 事件绑定
xhr.onreadystatechange = function () {
if(xhr.readyState === 4) {
if(xhr.status === 200 && xhr.status < 300) {
// 开始渲染页面
let data = JSON.parse(xhr.response);
let result = document.getElementById("result")
result.innerHTML = JSON.parse(data)
}
}
}
}
</script>
</body>
</html>
// 1.首先先导入express
const express = require("express");
// 2.然后再创建app对象
const app = express();
// 3.创建路由规则
/*
* req == request 是对请求报文的封装
* res == response 是对响应报文的封装
* */
// .all 同时我们还可以来使用这个请求，来实现基本的那个接收任意的请求的格式
app.get("/json-server", (req, res) => {
// 设置我们的响应头,设置允许跨域
res.setHeader("Access-Controll-Allow-Origin", "*")
// 开始设置数据
const data = {
name: "John Doe",age:10
}
// 开始转换数据
let str = JSON.stringify(data);
// 先设置一个简单的响应
res.send(str);
})
app.post("/server", (req, res) => {
// 设置我们的响应头,设置允许跨域
res.setHeader("Access-Controll-Allow-Origin", "*")
// 设置响应头
res.setHeader("Access-Controll-Allow-Headers", "*")
// 先设置一个简单的响应
res.send("HELLO EXPRESS POST");
})
// 4.监听端口
app.listen(8000, ()=>{
// 这个回调函数用于进行那个提示服务器已启动
console.log("Server started on port 8000");
});
nodemon工具使用
首先我们使用这个工具的时候，实现的是对我们的那个node环境处理
npm i -g nodemon
//同时我们还可以使用
npm i nodemon --save-dev
// 启动项目的方法
nodemon js文件
ajax的请求超时和网络异常
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="result"></div>
<script>
// 开始绑定一个键盘的按下的事件
let xhr = null;
let isSending = false; // 用于进行那个判断是否在请求的标识
window.onkeydown = function (event) {
// 创建ajax的对象
if(isSending) xhr.adort();
const xhr = new XMLHttpRequest();
// 开始设置超时设置
xhr.timeout = 1000;
// 设置超时的回调
xhr.ontimeout = function () {
alert("请求超时")
}
// 网络异常
xhr.onerror = function () {
alert("网络异常，请稍后重试")
}
// 发送请求
xhr.open("GET", "http://127.0.0.1:8000/json-server", true);
// 开始发送
xhr.send();
// 事件绑定
xhr.onreadystatechange = function () {
if(xhr.readyState === 4) {
isSending = true;
if(xhr.status === 200 && xhr.status < 300) {
// 开始渲染页面
let data = JSON.parse(xhr.response);
let result = document.getElementById("result")
result.innerHTML = xhr.response;
}
}
}
}
// 开始取消网络请求的方法
let btn = document.getElementById("ressult");
btn.onclick = function(){
xhr.abort()
}
</script>
</body>
</html>
axios来发送ajax请求
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>GET</button>
<button>POST</button>
<button>AJAX</button>
<div></div>
<script>
let btn = document.querySelectorAll("button");
// 开始配置默认的baseurl
axios.defaults.baseURL = "http://127.0.0.1:8000";
btn[0].onclick = function(){
// GET请求
axios.get("/axios-server",{
// url参数
params:{
id:100,
vip:7
},
// 设置请求头信息
headers:{
name:"axios-server",
age:18
}
}).then((response) => {
document.getElementsByTagName("div")[0].innerHTML = response.data.message;
})
}
</script>
</body>
</html>
同源策略
ajax默认的情况下是遵循我们的同源策略的
同源就是：协议/域名/端口号必须相同
违背了同源策略的就是跨域
解决跨域的方法就是使用jsonp,但是只可以用来解决那个get 请求
首先的话，我们的跨域请求的话，script标签本身就具有跨域请求的模式
同时我们还是可以使用后面的那个cors来实现跨域请求的解决
<!--实现通过script来实现基本的那个跨域请求的模式的话，我们的实现的方法就是通过后面的那个-->
<script src="./js/index.js"></script>
