一、AJAX简介
1、AJAX全称为Asynchronous JavaScript And XML,就是异步的JS 和XML。
2、通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。
3、AJAX不是新的编程语言,而是一种将现有的标准组合在一起使用的新的方式。
二、XML简介
1、XML 可扩展标记语言
2、XML 被设计用来传输和存储数据
3、XML和HTML类似,不同的是HTML中都是预定义标签,而XML中没有预定义标签,全都是自定义标签,用来表示一些数据。
4、现在已经被JSON取代了。
三、AJAX的特点
1、AJAX的优点
(1)可以无需刷新页面而与服务器端进行通信
(2)允许你根据用户事件来更新部分页面内容
2、AJAX的缺点
(1)没有浏览历史,不能回退
(2)存在跨域问题(同源)
(3)SEO(搜索引擎优化)不友好
四、HTTP
HTTP(hypertext transport protocol)协议(超文本传输协议),协议详细规定了浏览器和万维网服务器之间互相通信的规则。
1、请求报文
重点是格式和参数
行 POST /s?ie=utf-8 HTTP/1.1
头 Host: baidu.com
Cookie: name=beijing
Content-type: application/x-www-form-urlencoded
User-Agent: chrome 83
空行
体 username=admin&password=admin
2、响应报文
行 HTTP/1.1 200 OK
头 Content-Type: text/html;charset=utf-8
Content-length: 2048
Content-encoding: gzip
空行
体 <html>
<head>
</head>
<body>
<h1>北京</h1>
</body>
</html>
五、Express框架介绍与基本使用
以下为js文件,在浏览器开始加载页面之前先使用node 文件名.js启动服务器
1、引入express
const express = require('express');
2、创建应用对象
const app = express();
3、创建路由规则
request 是对请求报文的封装
response 是对响应报文的封装
app.get('/',(request,response)=>{
设置响应头,设置允许跨越
response.setHeader('Access-Control-Allow-Origin','*');
设置响应
console.log("hello express");
});
4、监听端口启动服务
app.listen(8000,()=>{
console.log("服务器已经启动,8000端口监听中...");
});
1、AJAX的GET请求
onreadystatechange
(1) on 当…的时候
(2) readystate是xhr对象中的属性 表示状态
—— 0 未初始化
—— 1 open方法已经调用完毕
—— 2 send方法已经调用完毕
—— 3 服务端返回了部分的结果
—— 4 服务端返回了所有的结果
(3) change 改变的时候(4)判断响应状态码 200 404 403 401 500
(5)2xx 表示成功
<button>点我发动请求</button>