AJAX
一、AJAX概述
-
AJAX：
AJAX全称Asynchronous JavaScript And XML，即异步的JS和XML
通过AJAX在网页不刷新的情况下，向服务端发送http请求
最大优势：无刷新获取数据
不是新的编程语言，是一种将现有的标准组合在一起的使用的新方式
-
XML
可拓展标记语言
被设计用来传输和存储数据
不同于HTML是预定义标签，XML都是自定义标签，用来表示一些数据
<student> <name>张三</name> <age>18</age> <gengder>男</gengder> </student>现在已经被JSON取代
{"name":"张三","age"=18,gender:"男"}
-
优点
-
无需刷新页面有与服务器进行通信
-
允许你根据用户事件来更新部分页面内容
-
-
缺点
- 没有浏览记录，不能回退
- 存在跨域问题（同源）
- SEO不友好（搜索引擎优化）
-
HTTP
-
请求报文
行：请求类型 url路径 HTTP协议版本
头：名字：值
空行
体：参数
-
响应报文
行：HTTP协议版本 响应状态码 响应状态字符串
头：名字：值
空行
体：返回结果
-
二、Express框架与基本使用
基于Node.js平台，快速、开放、极简的Web开发框架
使用
-
在终端中
- 初始化：npm init --yes
- 安装express框架：npm i express
-
在js文件中
//引入express const express = require('express'); //创建应用对象 const app = express(); //创建路由规则 app.get('/',(request,response)=>{//get: 请求类型，request、response都是参数，request是对请求报文的封装，response是对响应报文的封装 //设置响应头 response.setHeader('Access-Control-Allow-Origin',‘*);//设置允许跨域 //设置响应体 response.send('Hello'); }); //监听端口启动服务 app.listen(8000,()=>{//8000：端口 console.log("服务已启动,8000端口监听中...") }); -
启动服务
终端中：node 脚本名字
-
关闭服务
终端中：Ctrl+C
-
nodemon自动重启工具
安装：npm install -g nodemon
之后启动服务时使用nodemon
三、AJAX请求
1.AJAX请求的基本操作
<!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>首页</title>
<style>
#result {
width: 200px;
height: 100px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="result"></div>
<button>点击发送请求</button>
<script>
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById('result');
btn.onclick = function () {
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化 设置请求方法和url
xhr.open('GET', 'http://127.0.0.1:8000/server');
//3发送
xhr.send();
//4.事件绑定 处理服务端返回的结果
//on 当...时候
//readystate 是xhr对象中的属性，表示状态：0(未初始化) 1(调用完open) 2(调用完send) 3(服务端返回部分结果) 4(服务端返回全部结果)
//change 改变
xhr.onreadystatechange = function () {
//判断（服务端返回了所有结果）
if (xhr.readyState == 4) {
//判断响应状态码 2xx成功
if (xhr.status >= 200 && xhr.status < 300) {
//处理结果 行 头 空行 体
//响应
// console.log(xhr.status);//响应状态码
// console.log(xhr.statusText);//响应状态字符串
// console.log(xhr.getAllResponseHeaders());//响应头
// console.log(xhr.response);//响应体
//设置result文本
result.innerHTML = xhr.response;
}
}
}
}
</script>
</body>
</html>
2.请求参数
//GET请求
xhr.open('GET','http://127.0.0.1:8000/server?a=1&b=2&c=3');//?a=1&b=2&c=3
//POST请求
xhr.send('a=1&b=2&c=3');//a=1&b=2&c=3
xhr.send('a:1&b:2&c:3');//a:1&b:2&c:3
3.请求头
xhr.setRequestHeader('属性名','值');
4.响应JSON数据
- 服务端
app.get('/server', (request, response) => {
//响应一个对象
const date = {
name: '张三'
}
//对对象进行字符串转换
let str = JSON.stringify(date);
//设置响应体
response.send(str);
});
- 客户端
//手动转换
let date = JSON.parse(xhr.response);
result.innerHTML = date.name;
//自动转换
xhr.responseType='json';//刚开始设置返回的类型
result.innerHTML = xhr.response.name;
5.JQuery发送AJAX请求
$('button').eq(0).click(fuction(){
$.get('http://127.0.0.1:8000/server', { a=1, b=2 }, 'json');
});
$('button').eq(1).click(fuction(){
$.post('http://127.0.0.1:8000/server', { a=1, b=2 }, 'json');
});
JQuery通用方法发送AJAX请求
$('button').eq(2).click(fuction(){
$.ajax({
//url
url:'http:'http://127.0.0.1:8000/server',
//参数
date:{a:1,b:2},
//请求类型
type:'GET',
//响应体结果
dateType:'json',
//成功的回调
succes:function(date){},
//超时时间
timeout:2000,
//失败的回调
error：function(){},
})
//头信息
headers:{}
});
6.Axios发送AJAX请求
const btn = document.querySelectorAll('button');
btn[0].onclick = function () {
//GET请求
axios.get('http://127.0.0.1:8000/server', {
//url参数
params: {
a: 1, b: 2
},
//请求头信息
headers: {}
}).then(value => { })
};
btn[1].onclick = function () {
//POST请求
axios.post('http://127.0.0.1:8000/server', {
//请求体
},
{
//url参数
params: {
a: 1, b: 2
},
//请求头信息
headers: {}
}).then(value => { })
};
Axios通用方法发送AJAX请求
btn[2].onclick = function () {
axios({
//请求方法
mothod:'GET',
//url
url:'http://127.0.0.1:8000/server',
//url参数
params:{
a=1
},
//头信息
headers:{
b=2
},
//请求体参数
date:{}
}).then(response=>{})
};
7.fetch函数发送AJAX请求
btn[3].onclick = function () {
fetch('http://127.0.0.1:8000/server',{
//请求方法
mothod:'GET',
//请求头
headers:{
b=2
},
//请求体
date:'username=admin'
}).then(response=>{})
};
四、AJAX请求问题
1.IE缓存
IE浏览器会把响应进行缓存，服务端数据更新后，IE浏览器首先使用的是缓存的信息，导致它不能及时的得到最新数据
//解决方法
xhr.open('GET','http://127.0.0.1:8000/server?t='+Date.now());//?t='+Date.now()每次请求的参数值都不同
2.请求超时和网络异常
//超时设置
xhr.timeout = 2000;//时间到了之后没有得到响应，自动取消请求
//超时回调
xhr.ontimeout = fuction(){
alert("网络异常，请稍后重试");
}
//网络异常回调
xhr.onerror = function(){
alert("网络有问题");
}
3.取消请求
xhr.abort();
4、请求重复发送
防止用户反复发送相同的请求，导致服务器压力过大
let xhr =null;
//设置标识变量
let isSending= false;//是否正在发送请求
btn.onclick = function () {
//判断标识变量
if(isSending){//正在发送请求，这取消此请求
xhr.abort();
}
xhr = new XMLHttpRequest();
//修改标识变量的值
isSending=true;
xhr.open('GET', 'http://127.0.0.1:8000/server');//设置参数server?a=1&b=2&c=3
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
//修改标识变量
isSending=false;
}
}
}
四、同源策略
同源：协议、域名、端口号必须完全相同
违背同源策略就是跨域
AJAX默认遵循同源策略
xhr.open('GET','/server');//满足同源策略，url可简写
解决跨域
1.JSONP
非官方的跨域解决方案，只支持get请求
JSONP就是利用script标签的跨域能力来发送请求（在网页中一些标签天生具有跨域能力，例如：img、link、iframe、script）
2.CORS
跨域资源共享，官方的跨域解决方案
不需要在客户端做任何操作，完全在服务器中进行处理，支持get、post请求
通过设置响应头来允许跨域
response.setHeader('Access-Control-Allow-Origin', '允许跨域的网页');
response.setHeader('Access-Control-Allow-Origin', '*');//允许所有网页
浙公网安备 33010602011771号