文章目录
原生的AJAX
AJAX简介
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。
AJAX不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。
AJAX的实例
- 百度搜索框的关键字提示
- 注册页面的提醒
- 淘宝网页的充话费、车险(懒加载)
- 京东首页的二级菜单
- 今日头条的浏览,滚动条的位置会发生改变
- QQ空间动态的浏览
XML介绍
XML:可扩展的标记语言
XML被设计用来传输和存储数据。
XML和HTML类似,不同的是HTML中的标签都是预定义标签,而XML中没有预定义标签,全都是自定义标签。
<student>
<name>张三</name>
<age>23</age>
<gender>男</gender>
</student>
但是,我们现在在进行AJAX应用时,已经不再使用XML了,(XML解析繁琐),现在已经被JSON取代了。
用JSON表示:
{"name":"张三","age":23,"gender":"男"}
AJAX的特点
优点:
1、无需刷新页面而与服务器端进行通信;
2、允许你根据用户事件来更新部分页面内容;
缺点:
1、没有浏览历史,无法后退;
2、存在跨域问题(同源);
什么是跨域?
我在一个服务向另一个服务发送请求,AJAX默认是不允许的。
a.com的网页向b.com的网页发送AJAX请求,默认是不可以的。
3、SEO不友好。
Search Engine Optimization,搜索引擎优化。
HTTP协议
HTTP(Hypertext Transport Protocol)超文本传输协议,协议详细规定了浏览器和万维网服务器之间互相通信的规则。
协议:一种约定,一种规则。
请求报文
1、行
包括三部分,请求类型 URL路径 HTTP协议的版本
HTTP协议版本:HTTP/1.1
请求类型:GET、POST等;
2、头
Host: www.baidu.com
Connection: keep-alive
User-Agent:
Cookie:
3、空行
4、体
如果是GET请求,请求体是空的。
如果是POST请求,请求体不为空。
响应报文
1、行
协议版本 响应状态码 响应状态字符串
HTTP/1.1 200 OK
2、头
Content-Encoding: gzip
Content-Type: text/html;charset=utf-8
Date: Mon, 27 Jul 2020 04:26:24 GMT
Server: BWS/1.1
BWS:Baidu Web Server。
3、空行
4、体
<html>
<head>
</head>
<body>
</body>
</html>
上面的都是GET请求,没有请求体,当请求类型是POST时,才会存在请求体。
Express框架
HelloWorld
因为我们的AJAX需要给服务端发送请求,所以我们这里需要一个服务端。
Express:基于Node.js平台的快速、开放、极简的Web开发框架。
1、npm init -y 初始化项目
2、npm install express --save 安装本地的运行时依赖
HelloWorld
// 1、引入express
const express = require('express');
const { request, response } = require('express');
// 2、创建应用对象
const app = express();
// 3、创建路由规则
// request是对请求报文的封装,response是对响应报文的封装
app.get('/', (request, response)=>{
// 设置响应
response.send("Hello");
});
// 4、监听端口启动服务
app.listen(8000, ()=>{
console.log("服务已经启动,8000端口监听中...");
});
执行该js文件,node express框架的基本使用.js
,服务已经启动,8000端口监听中。
AJAX发送GET请求
服务端:
const express = require("express");
const app = express();
app.get('/server', (req, res)=> {
//如果请求行的url是/server时,执行这个回调函数
//设置响应头
//设置允许跨域,服务器可以接收所有跨域的请求,在浏览器中html文件的url是file协议,肯定会有跨域问题
res.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
res.send("Hello Ajax");
})
app.listen("8000", ()=>{
console.log("服务已经启动,8000端口监听中...");
})
客户端:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX GET 请求</title>
<style>
#result {
width: 200px;
height: 100px;
border: 1px solid blueviolet;
}
</style>
</head>
<body>
<button >点击发送请求</button>
<div id="result"></div>
<script>
const btn = document.getElementsByTagName("button")[0];
const result = document.getElementById("result");
btn.onclick = function() {
// AJAX请求
// 1、创建对象
const xhr = new XMLHttpRequest();
// 2、初始化 设置请求方法和url
xhr.open('GET', 'http://127.0.0.1:8000/server');
// 3、发送
xhr.send();
// 4、事件绑定,处理服务端返回的结果
xhr.onreadystatechange = function() {
// on when当什么时候
// readystate xhr对象中的一个属性
// change 改变 以前的(下拉框的onchange事件)
// 在这里会触发4次,然而我们只处理第4种状态
// 响应状态码status 200 OK 404 未找到页面
if (xhr.readyState == 4 && xhr.status == 200) {
//处理结果
//响应行:xhr.status属性保存响应行的响应状态码,xhr.statusText属性保存响应行的状态字符串
console.log(xhr.status);
console.log(xhr.statusText);
//响应头:获取所有的响应头
console.log(xhr.getAllResponseHeaders());
//响应体
console.log(xhr.response);
result.innerHTML = xhr.response;
}
}
/*
xhr对象的三个重要属性:
onreadystatechange:每当 readyState 属性改变时,就会调用该函数
readyState:表示状态,0请求未初始化 1服务器连接已建立 2请求已接收 3请求处理中 4请求已完成且响应已就绪
status:200 OK 只要状态码是2xx,都代表成功
*/
}
</script>
</body>
</html>
AJAX设置请求参数
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
AJAX发送POST请求
服务端:
const express = require("express");
const app = express();
app.get('/server', (req, res)=>{
//如果请求行的url是/server时,执行这个回调函数
//设置响应头
//设置允许跨域,服务器可以接收所有跨域的请求,在html文件中的url是file协议,肯定会有跨域问题
res.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
res.send("Hello Ajax");
})
app.post('/server', (req, res)=>{
res.setHeader('Access-Control-Allow-Origin', '*');
res.send("Hello Ajax POST");
});
app.listen("8000", ()=>{
console.log("服务已经启动,8000端口监听中...");
})
客户端:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX POST 请求</title>
<style>
#result {
width: 200px;
height: 100px;
border: 2px brown solid;
}
</style>
</head>
<body>
<div id="result">
</div>
<script>
const result = document.getElementById("result");
result.onmouseover = function() {
// 鼠标移上事件
const xhr = new XMLHttpRequest();
xhr.open("POST", "http://127.0.0.1:8000/server");
// 请求类型为GET时,请求报文没有请求体,只有请求行和请求头
// 请求类型为POST时,请求报文中有请求体,在AJAX中在send()方法中以字符串形式传递
xhr.send('a=100&b=200&c=300');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
result.innerHTML = xhr.response;
}
}
}
</script>
</body>
</html>
AJAX设置请求体
xhr.send('a=100&b=200&c=300');
AJAX设置请求头信息
目前我们可以设置的东西有:请求行(请求类型、请求URL),请求体(POST请求),响应头(跨域),响应体。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX POST 请求</title>
<style>
#result {
width: 200px;
height: 100px;
border: 2px brown solid;
}
</style>
</head>
<body>
<div id="result">
</div>
<script>
const result = document.getElementById("result");
result.onmouseover = function() {
// 鼠标移上事件
const xhr = new XMLHttpRequest();
xhr.open("POST", "http://127.0.0.1:8000/server");
// 设置请求头
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
/*
Content-Type设置请求体的类型
*/
// 请求类型为GET时,请求报文没有请求体,只有请求行和请求头
// 请求类型为POST时,请求报文中有请求体,在AJAX中在send()方法中以字符串形式传递
xhr.send('a=100&b=200&c=300');
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
result.innerHTML = xhr.response;
}
}
}
</script>
</body>
</html>
服务端响应JSON数据
服务端:
const express = require("express");
const app = express();
app.get('/server', (req, res)=>{
//如果请求行的url是/server时,执行这个回调函数
//设置响应头
//设置允许跨域,服务器可以接收所有跨域的请求,在html文件中的url是file协议,肯定会有跨域问题
res.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
res.send("Hello Ajax");
})
app.post('/server', (req, res)=>{
res.setHeader('Access-Control-Allow-Origin', '*');
res.send("Hello Ajax POST");
});
app.get('/json-server', (req, res)=>{
res.setHeader("Access-Control-Allow-Origin", "*");
// 响应一个JSON数据
const data = {
name:"张三",
age:23
}
// 对对象进行字符串转换
let str = JSON.stringify(data);
res.send(str);
});
app.listen("8000", ()=>{
console.log("服务已经启动,8000端口监听中...");
})
客户端:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON响应</title>
<style>
#result {
width: 200px;
height: 100px;
border: 2px solid rgb(96, 96, 163);
}
</style>
</head>
<body>
<div id="result">
</div>
<script>
const result = document.getElementById("result");
window.onkeydown = function() {
// 键盘按下事件
const xhr = new XMLHttpRequest();
// 设置响应体的响应类型为json
xhr.responseType = "json";
xhr.open('GET', 'http://127.0.0.1:8000/json-server');
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
// 1、手动将response的json格式转换为对象
// let data = JSON.parse(xhr.response);
// result.innerHTML = data["name"];
// 2、自动转换,借助xhr.responseType属性
result.innerHTML = xhr.response.name;
}
}
}
</script>
</body>
</html>
nodemon自动重启工具
当文件修改后,通过自动重启node应用,而不用每修改一次,重启一次,从而帮助我们开发基于Node.js的应用。
全局安装
npm install -g nodemon
使用
nodemon [your node app]
nodemon ./server.js