AJAX简单入门知识总结
简介：该文章为学习尚硅谷Ajax的3小时课程入门笔记，主要用于本人日后回忆记录，所以有些内容并没有太多详细解释。
源代码：尚硅谷-AJAX源码笔记
1.Express框架
1.1 Express框架环境搭建
- 在官网中,安装node.js
- 使用vs打开项目文件夹，打开集成终端
- 在集成终端中初始化项目：npm init --yes
- 安装Express：npm i express
1.2 Express框架的使用
-
引用express：
const express=require('express'); -
创建应用对象：
const app=express(); -
创建路由规则：
//request:对请求报文的封装 //response:对响应报文的封装 app.get('/',(request,response)=>{ response.send("HELLO EXPRESS"); }); -
监听端口启动服务:
app.listen(8000,()=>{ console.log("服务已启动，8000端口监听中....."); });
2.原生AJAX
2.1 AJAX操作基本步骤
-
创建对象
const xhr=new XMLHttpRequest(); -
初始化 设置请求的方法和url
xhr.open('GET','http://127.0.0.1:8000/server'); -
发送请求
xhr.send(); -
事件绑定—处理服务端返回的结果
//on when 当什么时候 //readystate 是xhr对象的属性，表示状态 0 1 2 3 4 //0:未初始化 //1:open方法调用完毕 //2:send方法调用完毕 //3:服务端返回了部分结果 //4：服务器端返回了全部结果 xhr.onreadystatechange=function(){ if(xhr.readystate===4){ //判断状态码 200 404 403 401 500 //2xx 成功 if(xhr.status>=200 && xhr.status<300){ //处理结果 console.log(xhr.status);//状态码 console.log(xhr.statusText);//状态字符串 console.log(xhr.getAllResponseHeaders());//所有响应头 console.log(xhr.response);//响应体 } } }
2.2 GET和POST传参方式
-
GET:直接在url中拼接
xhr.open("GET","http://127.0.0.1:8000/server?a=1&b=2") //传入参数a:1 b:2 -
POST：在xhr.send(参数)中写入参数
xhr.send("a=1&b=22")； //传入参数a=1&b=22
2.3 设置请求头
xhr.setRequestHeader(‘头的名字’，‘头的内容’)
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
//Content-Type:设置请求体内容的类型
//application/x-www-form-urlencoded:请求参数类型
2.4 处理JSON响应
-
手动对数据处理。使用JSON解析函数
let data=JSON.parse(xhr.response);//转换成JSON类型 -
自动转换。（需要在xhr.open前设置）
xhr.responseType='json';
2.5 IE 缓存问题
描述：IE浏览器对AJAX请求结果做一个缓存，当下次再调用请求时只拿本地的缓存，不会拿服务器上请求结果。所以会出现服务器返回结果变更了，但是在IE 浏览器中显示的还是旧数据。
解决办法：在请求的url中增加一个动态的参数，时刻让url变动。如使用Data.now()获取当前时间戳。
xhr.open('GET','http://127.0.0.1:8000/ie?' + Date.now());
2.6 请求超时与网络异常优化
-
超时设置以及超时处理（需要在xhr.send()前设置）
//超时设置：2s xhr.timeout = 2000; //超时处理 xhr.ontimeout=function(){ alert("请求超时，请重试！"); } -
网络异常优化（需要在xhr.send()前设置）
xhr.onerror=function(){ alert("网络异常，请检查网络"); }
2.7 手动取消AJAX请求
xhr.abort();
2.8 AJAX 请求重复发送问题
描述：用户可能会短时间内重复点击触发AJAX请求，在这种情况下会导致服务器崩溃
解决办法：触发AJAX后会看一下之前是否有发送相同的请求，如果有把之前的请求取消掉，重新发送新的请求。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>重复请求问题</title>
</head>
<body>
<button>点击发送</button>
<script>
const btn = document.getElementsByTagName('button')[0];
let xhr = null;
let isSending = false; //是否正在发送AJAX请求
btn.addEventListener('click', function() {
if (isSending) xhr.abort(); //如果正在发送，则取消该请求，创建一个新的请求
xhr = new XMLHttpRequest();
//修改 标识变量的值
isSending = true;
xhr.open('GET', 'http://127.0.0.1:8000/delay');
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
//发送请求后，不过返回的是正确的还是错误的，修改标识变量
isSending = false;
if (xhr.status >= 200 && xhr.status < 300) {
console.log(xhr.response);
}
}
}
});
</script>
</body>
</html>
3.jQuery中的AJAX
3.1 引用jQuery
在html的title下引入jQuery
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
3.2 get请求
$.get(url,[data],[callback],[type])
url:请求的URL地址
data:请求携带的参数
callback:载入成功时回调函数
type:设置返回内容格式。xml，html，script，json，text，default。
//get请求
$('button').eq(0).click(function() {
$.get('http://127.0.0.1:8000/jquery-ajax', {
a: 11,
b: 12
}, function(data) {
console.log(data);
}, 'json');
});
3.3 post请求
$.post(url,[data],[callback],[type])
url:请求的URL地址
data:请求携带的参数。
callback:载入成功时回调函数
type：设置返回内容格式。xml,html,script,json,text,default
//post请求
$('button').eq(1).click(function() {
$.post('http://127.0.0.1:8000/jquery-ajax', {
a: 11,
b: 12
}, function(data) {
console.log(data);
}, 'json')
});
3.4 jQuery 通用方法发送ajax
$.ajax({
url:请求的URL地址，
data:携带的参数，
type：请求发送的方式（GET,POST），
dataType：响应结果类型，
success：成功回调，
timeout：超时时间，
error：失败的问题，
header：头信息，
})
//通用方法发送ajax
$('button').eq(2).click(function() {
$.ajax({
url: 'http://127.0.0.1:8000/jquery-ajax',
type: 'GET',
data: {
a: 111,
b: 222
},
dataType: 'json',
success: function(data) {
console.log(data);
},
timeout: 2000,
error: function() {
console.log('网络延迟，请稍后再试！');
}
});
});
4.axios发送AJAX请求
4.1 描述：
使用axios可以直接
4.2 在线引入axios
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.min.js"></script>
4.3 配置axios基本url：
axios.defaults.baseURL="http://127.0.0.1:8000";
4.4 get请求
axios.get(url，{
//url请求参数
params:{ },
//请求头信息
headers:{ }
}).then(value=>{回调处理});
4.5 post请求
axios.post(url,{请求体},{
//url参数
params:{},
//请求头参数
headers:{}
}).then(value=>{回调函数});
4.6 axios通用方法发送ajax
axios({
//请求方法
method：‘POST’,
url:请求地址,
data：请求体参数,
headers:头信息
}).then(response=>{回调函数})
5.fetch函数发送ajax请求
fetch(url,{ //配置对象
method:请求方法,
headers:头信息,
body:请求体
}).then(response=>{回调函数})；
回调函数中，可以通过response.text()返回文本对象；response.json()返回json对象
6.跨域
6.1同源策略
同源策略（Same-Origin Policy）最早由Netscape公司提出，是浏览器的一种安全策略。所谓同源：协议、域名、端口号必须完全相同。
违背同源策略就是跨域。
比如，京东只能向京东的网站发起请求，如果京东像淘宝发起请求那么这就是跨域。
6.2如何解决跨域
6.2.1 JSONP
1. JSONP是什么？
JSONP(JSON with Padding),是一个非官方的跨域解决方案，只支持GET请求。
2. JSONP是怎么工作的？
在网页有一些标签天生具有跨域能力，比如img，link，ifame，script
JSONP就是利用script标签的跨域能力来发送请求的。
3. JSONP的使用
//1.script标签引入服务器接口地址
<script src="http://127.0.0.1:8000/jsonp-server"></script>
//2.服务器脚本需要返回的是js代码，因为script只能接受js代码
app.get("/jsonp-server",(request,response)=>{
//这里用end，可以忽略请求头
response.end("console.log(data)");
});
4.使用jquery的方式使用jsonp
//前端页面：点击按钮获取服务器端数据
<button>点击发送jsonp请求</button>
<div id="result"></div>
<script>
$('button').eq(0).click(function() {
$.getJSON("http://127.0.0.1:8000/jquery-jsonp-server?c1=?", function(data) {
$("#result").html(`
名称:${data.name};<br/>
城市:${data.city};
`);
});
});
</script>
//服务器端
// jQuery发送jsonp请求
app.all("/jquery-jsonp-server", (request, response) => {
const data = {
name: "尚硅谷",
city: ["北京", "广州", "石家庄"]
}
let cd = request.query.c1;//获取jquery传入的函数名
let str = JSON.stringify(data);
response.end(`${cd}(${str})`);
});
6.2.2 CORS
跨源资源共享（CORS） - HTTP | MDN (mozilla.org)
1.CORS是什么？
CORS(Cross-Origin Resource Sharing) ,跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。（前端正常操作，后端服务器去设置请求头）
2.CORS是怎么工作的？
CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。
7.nodemon工具
7.1 描述
基于node.js开发应用的一个工具，该工具可以在文件被修改后自动重启服务
7.2 安装:打开终端，输入安装语句
npm install -g nodemon
7.3 使用：nodemon 服务器文件
nodemon 服务文件
1623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
