一、 原生Ajax
1.1Ajax简介
在网页不刷新的情况下,向服务端发送http请求,得到http响应。
最大的优势:无刷新获取数据
1.2 XML简介
XML可扩展标记语言。
XML被设计用来传输和存储数据。
XML和HTML类似,不同的是HTML中都是预定义标签,而XML中没有预定义标签,全都是自定文标签,用来表示一些数据。(已经被JSON取代)
1.3Ajax的特点
1.3.1 AJAX的优点
1可以无需刷新页面面与服务器端进行通信,
2)允许你根据用户事件来更新部分页面内容。
1.3.2 AJAX的缺点
1)没有浏览历史,不能回退
存在跨域问题(同源)
3SEO(搜索引擎优化)不友好(不能在源代码中查找到)
二、 HTTP协议
HTTP (hypertext transport protocol)协议(超文本传输协议),协议详细规定了浏览器和万维网服务器之间互相通信的规则。
1. 请求报文
重点是格式与参数
请求行:POST /URL HTTP 协议版本
请求头: Host:值 Cookie:值 Content-type:值 User-Agent:值等等
空行:
请求体:如果是GET请求体为空,如果是POST可以不为空
2. 响应报文
请求行:HTTP协议版本 响应状态码 响应状态字符串
请求头: Content-type:值 Content-length:值 Content-encoding:值等等
空行:
请求体:HTML语法内容
三、AJAX案例准备工作
使用vscode的过程中,打开终端的方式:
(1)使用快捷键: ctrl +· ;注意这个点是键盘上 esc 下面的那个;
(2) 选择vscode的 “查看”,然后选择“集成终端” ,打开即可;
1.安装express
打开vscode -> 终端 -> 当前目录中 -> 输入npm i express
2.创建一个服务端
在当前目录新建个js文件,然后在终端 => 当前目录下 => 输入node 文件名启动服务
//1. 引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/',(request,response)=>{
//设置响应
response.send('hello express');
});
//4. 监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动,8000 端口监听中.....");
})
打开浏览器:
端口释放:Ctrl+c
四、发送AJAX请求
1.发送GET请求
点击按钮发送AJAX请求给服务器,然后响应体返回到div中。
<button>点击发送请求</button>
<div id="result"></div>
//获取button元素
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById("result");
//绑定事件
btn.click = function(){
//1.创建对象
const xhr = new XMLHttpRequest();
//2 初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');
//3 发送
xhr.send();
//4. 事件绑定 处理服务端返回的结果
//on when当...时候
//readystate 是 xhr 对象中的属性,表示状态 0 1 2 3 4
//change 改变
xhr.onreadystatechange = function(){
//判断(服务端返回来所有的结果)
if(xhr.readyState === 4){
//判断响应状态码 200 404 403 401 500
//2xx 2开头的都表示成功
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{
}
}
}
}
server.js文件
//1. 引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('hello AJAX');
});
app.post('/server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应头
response.setHeader('Access-Control-Allow-Headers','*');
//设置响应体
response.send('hello AJAX');
});
//4. 监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动,8000 端口监听中.....");
})
2.发送POST请求
鼠标经过div时发送AJAX请求,然后响应体返回放在div中
<div id="result"></div>
//获取元素对象
const result = document.getElementById("result");
//绑定事件
result.addEventListener("mouseover",function(){
//1. 创建对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置类型与URL
xhr.open('POST','http://127.0.0.1:8000/server')
//设置请求头:固定写法,第一个参数设置请求体内容类型,第二个参数是参数查询字符串的类型
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//3. 发送
xhr.send('a=100&b=200&c=300');
//4. 事件绑定
xhr.onreadystatechange = function(){
//判断
if(xhr.readyState === 4){
if(xhr.readyState === 4){
if(xhr.status >=200 && xhr.status < 300){
//处理服务端返回的结果
result.innerHTML = xhr.response;
}
}
}
}
})
server.js文件
//1. 引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.post('/server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应头
response.setHeader('Access-Control-Allow-Headers','*');
//设置响应体
response.send('hello AJAX');
});
//4. 监听端口启动服务
app.listen(8000,()=>{
console.log("服务已经启动,8000 端口监听中.....");
})