AJAX
AJAX全称Asynvhronous JavaScript And XML,就是异步的js和XML
通过ajax 可以在浏览器中想服务器发送异步请求,最大的优势:无刷新获取数据
ajax不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式
优点:
1.无需刷新页面就可以与服务器端进行通信
2.允许根据用户事件来更新部分页面内容
缺点“
1.没有浏览历史,不能回退
2.存在跨域问题(同源)
3.SEO(搜索引擎优化)不友好
XML
xml:可扩展标记语言
html:超文本标记语言
xml:被设计用来传输和存储数据
html:用来在页面中展示数据
xml和html类似,不同的是html中都是预定义标签,而xml中没有预定义标签,全都是自定义标签,用来表示一些数据
<person>
<name>张三</name>
<age>22</age>
</person>
json比较xml简洁、方便
HTTP
http(Hypertext transport protocol):超文本传输协议,协议详细规定了浏览器和万维网(www,World Wide Web)服务器之间互相通信的规则
请求:浏览器向服务器发送的内容(请求报文)
请求报文的内容:
1.请求行:包括请求类型(GET/POST…),url路径,HTTP协议的版本
url路径:
完整的网址如下:
https://www.w3school.com.cn/jquery/index.asp
url的路径所需的部分:
/jquery/index.asp
2.请求头:格式(名字冒号空格加值):名字: 值(值和冒号之间是一个空格)
3.空行:作用是为了把请求头和请求体隔开,必须有
4.请求体:如果是get的请求,请求体就是空的;如果是post请求,不为空,可以放请求参数
get请求的参数在url里面,而post请求的参数在请求体里面
一个较为完整的请求报文:
请求行:
POST /jquery/index.asp HTTP/1.1
请求头:
Host: xxx.com
Cookie: name=xxxxxx
Content-type: application/x-www-form-urlencoded
User-Agent: chrome 83
空行
请求体:
username=admin&pws=123456
响应:服务器向浏览器返回的结果(响应报文)
1.响应行:协议版本 响应状态码 响应状态字符串(如:HTTP/1.1 200 ok)
2.响应头:格式和请求报文的请求头格式一样,名字冒号空格加值
3.空行:作用是为了把请求头和请求体隔开,必须有
4.响应体:存放响应结果(html内容)
在浏览器控制台的network那里进行查看调试
node.js
Node.js 就是运行在服务端的 JavaScript
node.js是一个基于Chrome V8引擎的javascript运行时(建立的一个平台)
Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。
express
express是基于node.js平台的一个快速、开放、极简的web开发框架。
先初始化:npm init --yes(-y)
安装:$ npm install express --save
express的基本使用
// 引入express
const express = require('express');
// 创建应用对象
const app = express();
// 创建路由规则
// req:request,是对请求报文的封装
// res:response,是对响应报文的封装
app.get('/', (req, res) => {
// 设置响应
res.send('hello,express!');
})
// 设置监听端口
//关闭端口号:ctrl+c
app.listen(8003, () => {
console.log('服务器已启动');
})
发送ajax(get)请求,将结果输出到页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 200px;
height: 100px;
border-radius: 5px;
border: 1px solid peru;
}
</style>
</head>
<body>
<button id="btn">发送请求</button>
<div id="box">
</div>
<script>
// 获取dom元素
// const btn = document.getElementsByTagName('button')[0];
const btn = document.getElementById('btn');
const box = document.getElementById('box');
btn.onclick = function() {
// 创建对象
const xhr = new XMLHttpRequest();
// 初始化,设置请求方式和路径url
xhr.open('GET', 'http://127.0.0.1:8003/server');
// 发送
xhr.send();
//事件绑定,处理服务端返回的结果
// on(当)readystate(是xhr对象的属性,表示状态)change(改变)
// 0( 未初始化), 1(open方法调用完毕), 2(send方法调用完毕), 3(服务端返回了部分结果), 4(服务端返回了全部结果))
// 发送请求的过程,状态会改变4次,方法就会被触发4次
xhr.onreadystatechange = function() {
// 判断服务器是否返回了全部结果(状态是否为4)
if (xhr.readyState === 4) {
//判断响应的状态码
// 2xx 都代表成功
if (xhr.status >= 200 && xhr.status < 300) {
// 处理结果(响应行,响应头,空行,响应体)
// 1.响应行(http协议版本,状态码,状态字符串)
/* console.log("状态码:" + xhr.status); //状态码
console.log("状态字符串:" + xhr.statusText); //状态字符串
console.log("所有响应头:" + xhr.getAllResponseHeaders()); //所有响应头
console.log("响应体:" + xhr.response); //响应体 */
// 将响应信息输出到页面上
box.innerHTML = xhr.response;
}
}
}
}
</script>
</body>
</html>
设置参数:
在url后面添加参数,用**?隔开,有多个参数,用&**分隔
http://127.0.0.1:8003/server?name=zs&age18
post请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>post</title>
<style>
#box {
width: 200px;
height: 100px;
border-radius: 5px;
border: 1px solid peru;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
const box = document.getElementById('box');
box.addEventListener('mouseover', function() {
// 创建对象
const xhr = new XMLHttpRequest();
// 初始化
xhr.open('POST', 'http://127.0.0.1:8003/server');
// 发送
// post请求的请求数据(请求体)是在send方法里面设置
// 请求体内的参数格式可以设置任意格式,任意类型数据
// xhr.send('name=zs&age=22&sex=男'); //在request payloat中查看
xhr.send('name:zs&age:22&sex:男');
// 事件绑定,监听状态改变
xhr.onreadystatechange = function() {
// 判断服务端是否返回了全部结果
if (xhr.readyState === 4) {
// 判断状态
if (xhr.status >= 200 && xhr.status < 300) {
// 处理服务端返回的结果
box.innerHTML = xhr.response;
}
}
}
})
</script>
</body>
</html>