原生AJAX
原生Ajax
简介
通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势就是：无刷新获取数据。
Ajax不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式
XML简介
XML是可扩展标记语言，被设计用来传输和储存语言。XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有与sing一标签，全都是自定义标签，用来表示一些数据。现在已经被json取代了，json更加灵活和便捷。
AJAX的特点
Ajax优点
- 可以无需刷新页面而与服务器进行通信
- 允许你根据用户事件来更新部分页面内容
AJAX的缺点
- 没有浏览历史，不能回退
- 存在跨域问题（同源）
- SEO（搜索引擎优化）不友好
HTTP协议
http协议（超文本传输协议），协议详细规定了浏览器和万维网服务器之间互相通信的规则
请求报文
重点是格式和参数
//行 第一个是请求类型 第二个是url参数 第三个是HTTP协议的版本
//头 Host:baidu,com
// Cookie:name=seven
// Content-type: application/x-www-form-urlencoded
//空行
//体 请求类型是get，则可以为空 请求类型是post，则请求体 可以不为空
响应报文
状态码：200（ok）404（找不到）403（执行访问被禁止）401（未授权）500（内部错误）
//行 第一个是HTTP版本 第二个是响应状态码 第三个是响应状态字符串
//头 Content-Type:text/html;charset=utf-8
// Content-length:2048
// Content-encoding:gzip
//空行
//体 <html>
<head>
</head>
<body>
<h1>尚硅谷</h1>
<body>
</html>
nodeJS安装
安装之后可以进行检验
express基本使用
- 创建文件夹，在命令窗口中输入npm init --yes（意思是：生成package.json文件）
- 再次输入npm i express (意思是：安装express框架)
AJAX案例
ajax的GET请求
服务器端
// 引入express框架
const express=require("express");
// 创建应用对象
const app=express();
// 创建路由
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server',(request,response)=>{
// 设置响应头 用来设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
// 设置响应体
response.send("HELLOajax");
})
// 监听端口启动
app.listen(7000,()=>{
console.log("服务器启动成功");
})
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: 100px;
height: 100px;
border: 2px solid green;
}
</style>
</head>
<body>
<button>点击</button>
<div id="box"></div>
<script>
var btn = document.querySelector("button");
var box = document.querySelector("#box")
btn.onclick=function(){
// 创建对象
const xhr = new XMLHttpRequest();
// 初始化 设置请求方式和地址
xhr.open('GET','http://localhost:7000/server?name=sunpengda&age=20')
// 发送
xhr.send();
// 事件绑定 用来处理服务端返回的结果
// on 当。。。时候
// readyState 是xhr对象中的属性 表示状态0 1 2 3 4
// change 改变
xhr.onreadystatechange=function(){
// 判断（服务器段返回的结果）
// 是效率更高
if(xhr.readyState===4) {
// 判断响应的状态码 200 404 403 401 500
// 只要是2开头的 就表示成功
if(xhr.status>=200&&xhr.status<=300) {
// 处理结果 行 头 空行 体
// 相应行
// console.log(xhr.status); //状态码
// console.log(xhr.statusText); //状态字符串
// console.log(xhr.getAllResponseHeaders); //所有响应头
// console.log(xhr.response); //响应体
// 设置result的文本
box.innerHTML=xhr.response;
}
}
}
}
</script>
</body>
</html>
Ajax的POST请求
服务端
// 引入express框架
const express=require("express");
// 创建应用对象
const app=express();
// 创建路由
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server',(request,response)=>{
// 设置响应头 用来设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
// 设置响应体
response.send("HELLOajax");
})
// 接受任意类型的请求
// 接受自定义请求头之结合后的方法成为了OPTIONS
app.all('/server',(request,response)=>{
// 设置响应头 用来设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
// 接受自定义的头
response.setHeader('Access-Control-Allow-Headers','*');
// 设置响应体
response.send("HELLO AJAX");
})
// 监听端口启动
app.listen(7000,()=>{
console.log("服务器启动成功");
})
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>Document</title>
<style>
.box {
width: 100px;
border: 2px solid green
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box=document.querySelector(".box");
box.addEventListener('mouseover',function(){
const xhr = new XMLHttpRequest();
xhr.open('post',"http://localhost:7000/server");
// 设置响应头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 自定义的响应头
xhr.setRequestHeader('name',"sunpengda")
//用来设置请求体
xhr.send('name=sunpengda&friend=xiaohongtang');
xhr.onreadystatechange=function(){
if(xhr.readyState===4) {
if(xhr.status>=200&&xhr.status<=300) {
box.innerHTML=xhr.response;
}
}
}
})
</script>
</body>
</html>
注意：更改一次服务器（即js文件），就要重启一次服务器
重启方法：快捷键ctrl+`,在终端里面找到js文件所在位置，之后node 文件名.扩展名
