Asynchronous JavaScript and XML(异步的JavaScript和XML) 无需重新加载整个网页 更新部分网页的技术,按需获取数据,提升系统性能.但是异步获取数据,不利于搜索引擎优化
搜索时页面不刷新,就可以发送请求
懒加载 用就加载 不用就不加载
XML
可扩展标记语言 被设计用来传输和存储数据
html 都是预定义标签
JSON
特点
允许根据用户事件来更行部分页面内容
缺点
没有浏览历史, 不能后退
存在跨域问题
SEO(搜索引擎优化) 不好
HTTP
请求报文
行: 1.请求类型 GET / 2. s?ie=utf-8+URL路径 3.http协议版本
头: Host: jpd.com cookie: name=jpd
Content-type:
User-Agent: chrom 83
空行:
体:
相应报文
行: 协议版本 相应状态码
头: Content-Type: text/html;charset=utf-8
空行
体:
基操demo
// 前端
<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 () {
// 判断 (4.服务端返回了所有的结果)
if (xhr.readyState === 4) {
// 判断响应的状态码 200 404 403 401 500 200-300之间认定为成功
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>
========================================================
// 服务端
// 1. 引入
const { response } = require('express');
const { request } = require('express');
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对相应报文的封装
app.get('/server', (request, response) => {
//设置响应
response.send('HELLO EXPRESS')
//设置响应体
response.send('刘成浩是个大石坝')
})
// 4. 监听端口启动服务
app.listen(8000, () => {
console.log("服务启动, 8000端口监听中");
})
AJAX设置请求参数
URL 参数 只需要在 URL参数后面 用?分隔 然后a=100&b=200
设置请求头信息
... 没仔细看,,,
