简介：
????????Ajax 即 Asynchronous Javascript And XML（异步JavaScript和XML）使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。（懒加载）
Ajax优点
- 可以无刷新页面而与服务器端进行通信
- 允许你根据用户事件来更新部分页面内容
Ajax缺点
- 没有浏览历史，不能回退
- 存在跨域问题（a.com无法向b.com发送Ajax请求，可以解决）
- SEO即Search Engine Optimization（搜索引擎优化）不友好，无法爬虫
# HTTP 即 超文本传输协议（Hyper Text Transfer Protocol），协议详细规定了浏览器和万维网服务器之间互相通信的规则。
正式开始 （使用Express）
下载node.js，和vscode,一路下一步（随便找个盘方放）
创建文件夹，在次目录下打开右键打开vscode，
进入vscode，空白处右键，在集成终端打开
npm init --yes //输入npm init --yes进行初始化npm i express // 输入npm i express 安装express测试?
安装后测试能否成功，新建文件 express.js 在里面输入
// 1. 引入express
const express = require('express');
// 2. 创建应用对象
const app = express();
//3. 创建路由规则
// request 是对应请求报文的封装
// response 是对响应报文的封装
app.get('/', (request,response)=>{
// 设置相应
response.send('Hello Express!');
});
//4. 监听端口启动服务
app.listen(8000, ()=>{
console.log("服务已经启动, 8000 端口监听中......");
})?右键express.js在终端打开 ，输入 node express.js
?打开浏览器输入 127.0.0.1:8000? 或者 localhost:8000
?
Ajax初试探
改下js中的app.get代码
app.get('/server', (request, response) => {
// 设置响应头,允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
// 设置响应体
response.send('Hello AJAX!');
});
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax Get请求</title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #90b;
}
</style>
</head>
<body>
<button id="btn1">点击发送请求</button>
<div id="result"></div>
<script>
// 获取button元素
const btn = document.getElementById('btn1');
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) {
// 处理结果 行 头 空行 体
// 响应
// console.log(xhr.status); // 状态码
// console.log(xhr.statusText); // 状态字符串
// console.log(xhr.getAllResponseHeaders()); // 所有响应头
// console.log(xhr.response); // 响应体
// 设置result 文本
result.innerHTML = xhr.response;
}
}
}
}
</script>
</body>
</html>
简单说明
首先启动server.js? （node server.js）? 右键打开HTML(open in default browser)
const btn = document.getElementById('btn1');? ? ? ? // btn绑定 <button id="btn1">
const result = document.getElementById('result');? ? ? ? // result 绑定?<div id="result">
点击发送请求按钮后 调用btn.onclick = function() {}函数
创建 XMLHttpRequest 对象（简称xhr），初始化 设置请求方法，发送事件。 服务端获取事件，发出回应，response.send('Hello AJAX!');? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? xhr.onreadystatechange 判断状态是否改变，if (状态===4 即全部接受成功)则? result 块 获取文本result.innerHTML = xhr.response 并在<div id="result"></div> 此div块中显示文本
实现鼠标移入文本框出现字，离开字消失
<div id="result"></div>
<script>
const result = document.getElementById("result")
result.addEventListener("mouseover", function () {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:8000/server');
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300) {
result.innerHTML =xhr.response;
}
}
})
result.addEventListener("mouseout", function () {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://127.0.0.1:8000/server');
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300) {
result.innerHTML =null;
}
}
})
</script># 服务端响应JSON数据? 在关联前输入
const data = {
name: 'cbc'
};
// 对对象进行字符串转换
let str = JSON.stringify(data);
response.send(str);xhr.responseType='json';
xhr.send();
result.innerHTML ?=xhr.response.name;# Nodemod辅助启动
当修改js时，服务需要重新启动，npm install -g nodemon? ? //安装nodemon，自动监测js修改系统帮你自动启动。 启动服务命令改为 nodemon server.js
# 如果 vscode 禁止启动? ? ??
1. 以管理员身份运行vscode
2. 执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的
3. 执行：set-ExecutionPolicy RemoteSigned
4. 这时再执行get-ExecutionPolicy，就显示RemoteSigned
不同的方式
JQuery
$.ajax({
? ? //url
? ? url: 'http://127.0.0.1:8000/jquery-server',
? ? //参数
? ? 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
? ? }
});axios
axios({
? ? //请求方法
? ? method : 'POST',
? ? //url
? ? url: '/axios-server',
? ? //url参数
? ? params: {
? ? ? ? vip:10,
? ? ? ? level:30
? ? },
? ? //头信息
? ? headers: {
? ? ? ? a:100,
? ? ? ? b:200
? ? },
? ? //请求体参数
? ? data: {
? ? ? ? username: 'admin',
? ? ? ? password: 'admin'
? ? }
}).then(response=>{
? ? //响应状态码
? ? console.log(response.status);
? ? //响应状态字符串
? ? console.log(response.statusText);
? ? //响应头信息
? ? console.log(response.headers);
? ? //响应体
? ? console.log(response.data);
})fetch?
fetch('http://127.0.0.1:8000/fetch-server?vip=1', {
? ? //请求方法
? ? method: 'POST',
? ? //请求头
? ? headers: {
? ? ? ? name:'xiaomin'
? ? },
? ? //请求体
? ? body: 'username=admin&password=admin'
}).then(response => {
? ? // return response.text();
? ? return response.json();
}).then(response=>{
? ? console.log(response);
});