基础
传统网站中存在的问题
- 网速慢的情况下，页面加载时间长，用户只能等待
- 表单提交后，如果一项内容不合格，需要重写所有表单内容
- 页面跳转，重新加载页面，造成资源浪费
基础
- 概述
它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。
Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 - 应用场景
- 页面上拉加载更多数据
- 列表数据无刷新分页 （就是只有动态数据进行刷新，其他静态部分不需要再次刷新）
- 表单项离开焦点数据验证（避免用户输入错误提交之后再返回，重新跳转）
- 搜索框提示文字下拉列表
- 运行环境
运行在网站环境中才能生效 - 运行原理
Ajax 相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。
运行原理及实现
实现步骤
- 创建AJAX对象
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
let xhr = new XMLHttpRequest();
- 确认请求地址以及请求方式
参数1是请求方式，参数2是请求地址
xhr.open('get','http//www.example.com')
- 发送请求
xhr.send();
- 获取服务器端给客户端的响应数据
.onload,当Ajax接受完服务器端的响应之后，触发事件
xhr.onload = function (){
console.log(xhr.responseText);
}
服务器端响应的数据格式
- 在真实的项目中，服务器端大多数情况下会以 JSON 对象作为响应数据的格式。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中。
- 所以 .responseText返回的是字符串类型
- 在 http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输，所以要自己 转为json对象，JSON.parse()//全局对象window可省略
console.log(JSON.parse(xhr.responseText));
请求参数
传统网站表单提交
用form
传递
- GET请求
//拼接成get的格式uname=xxx&age=yy
let params='uname='+uname.value+'&age='+age.value;
xhr.open('get','http://127.0.0.1/get?'+params);
- POST请求
- 请求报文
在 HTTP 请求和响应的过程中传递的数据块就叫报文，包括要传送的数据和一些附加信息，这些数据和信息要遵守规定好的格式。
- 请求报文
let params='uname='+uname.value+'&age='+age.value;
xhr.open('post','http://127.0.0.1/post');
//设置请求参数格式的类型
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send(params);
let jsonParams={uname:uname.value,age:age.value};
xhr.open('post','http://127.0.0.1/post');
xhr.setRequestHeader('Content-Type','application/json');
xhr.send(JSON.stringify(jsonParams));
格式
- application/x-www-form-urlencoded
uname=xxx&age=yy - application/json
{uname:'xxx',age:'yy'}- 请求头中指定 Content-Type 属性的值是 application/json，告诉服务器端当前请求参数的格式是 json
- 传递参数必须是字符串形式，所以
JSON.stringify()转换成字符串传递 - 注意：get 请求是不能提交 json 对象数据格式的，传统网站的表单提交也是不支持 json 对象数据格式的。
- 接收响应得到的数据的时候，要在app.js中设置传送json格式，引用express.json()
app.js:
app.use(express.json());
app.post('/post',(req,res)=>{
res.json(req.body);
})
获取服务端的响应
- Ajax状态码
在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程中的每一个步骤都会对应一个数值，这个数值就是ajax状态码。
0：请求未初始化(还没有调用open())
1：请求已经建立，但是还没有发送(还没有调用send())
2：请求已经发送
3：请求正在处理中，通常响应中已经有部分数据可以用了
4：响应已经完成，可以获取并使用服务器的响应了
xhr.readyState // 获取Ajax状态码
- onreadystatechange事件
当 Ajax 状态码发生变化时将自动触发该事件。
在事件处理函数中可以获取 Ajax 状态码并对其进行判断，当状态码为 4 时就可以通过 xhr.responseText 获取服务器端的响应数据了。
//0:创建对象
let xhr=new XMLHttpRequest();
//1:进行配置，未发送请求
xhr.open('get','http://127.0.0.1/readystate');
//最好写在发送请求的上面
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
console.log(xhr.responseText);
}
}
xhr.send();
推荐使用 onload事件
Ajax错误处理
- 网络畅通，服务器端能接收到请求，服务器端返回的结果不是预期结果。
解决：可以判断服务器端返回的状态码，分别进行处理。xhr.status 获取http状态码 - 网络畅通，服务器端没有接收到请求，返回404状态码。
解决：检查请求地址是否错误 - 网络畅通，服务器端能接收到请求，服务器端返回500状态码。
解决：服务器端错误，找后端程序员进行沟通 - 网络中断，请求无法发送到服务器端。
解决：会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理
| 状态码 | 含义 | 来源 |
|---|---|---|
| Ajax | 表示Ajax请求的过程状态 | 是由Ajax对象返回的 |
| Http | 表示请求的处理结果 | 是服务器端返回的 |
低版本IE浏览器的缓存问题
问题： 在低版本的 IE 浏览器中，Ajax 请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。
解决方案： 在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。
xhr.open('get', 'http://www.example.com?t=' + Math.random());
Ajax异步编程
异步概述：
落实到代码上，就是异步代码虽然需要花费时间去执行，但程序不会等待异步代码执行完成后再继续执行后续代码，而是直接执行后续代码，当后续代码执行完成后再回头看异步代码是否返回结果， 如果 已有返回结果， 再调用事先准备好的 回调函数处理异步代码执行的结果。
Ajax封装
将请求代码封装到函数中，发请求时调用函数即可
function ajax(options) {
let xhr=new XMLHttpRequest();
xhr.open(options.type,options.url);
xhr.send();
xhr.onload=function(){
let response=xhr.responseText;
options.success(response);
}
}
ajax({
//请求方式
type:'get',
//请求地址
url:'http://127.0.0.1/first',
success:function(data){
console.log(data);
}
})
请求参数要考虑的问题
- 请求参数位置的问题
- 将请求参数传递到Ajax函数内部，在函数内部根据请方式的不同将请求参数放置在不同的位置
- get 放在请求地址的后面
- post 放在send方法中
- 请求参数格式的问题
- application/x-www-form-urlencoded
参数名1=参数值1&参数名2=参数值2 - application/json
- 传递对象类型
- 在函数内部对象数据类型转换为字符串更加方便
- application/x-www-form-urlencoded
let params='';//拼接请求参数
for(let k in options.data){
params+=k+'='+options.data[k]+'&';
}
//将参数最后的&截取掉
params=params.substr(0,params.length-1);
if(options.type=='get'){
options.url+='?'+params;
}
xhr.open(options.type,options.url);
if(options.type=='post'){
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(params);
}else{
xhr.send();
}
封装总结
- 设置默认的参数对象
- 用options的属性将defaults的对应的属性覆盖掉，选用内置方法Object.assign();能够对原对象造成影响
- 采用遍历对象的方式为get请求拼接请求参数（要截取掉最后的 &连接符）
- 为post请求发送设置请求头格式
- 对响应头的数据格式进行判断，是否要转换json格式
- 对请求成功和失败进行分离处理
function ajax(options) {
//设置默认值
let defaults={
type:'get',
url:'',
data:{},
header:{
'Content-Type':'application/x-www-form-urlencoded'
}
}
//用options的属性将defaults的对应的属性覆盖掉
Object.assign(defaults,options);
let xhr=new XMLHttpRequest();
//拼接请求参数
let params='';//拼接请求参数
for(let k in defaults.data){
params+=k+'='+defaults.data[k]+'&';
}
//将参数最后的&截取掉
params=params.substr(0,params.length-1);
if(defaults.type=='get'){
defaults.url+='?'+params;
}
xhr.open(defaults.type,defaults.url);
//为post设置请求头格式
if(defaults.type=='post'){
let contentType=defaults.header['Content-Type'];
xhr.setRequestHeader('Content-Type',contentType);
if(contentType=='application/json'){
xhr.send(JSON.stringify(defaults.data));
}else{
xhr.send(params);
}
}else{
xhr.send();
}
xhr.onload=function(){
//获取响应头数据
let contentType=xhr.getResponseHeader('Content-Type');
let responseText=xhr.responseText;
//如果包含这个字符串,转换成json格式
if(contentType.includes('application/json')){
responseText=JSON.parse(responseText);
}
//请求成功和失败分离处理
if(xhr.status==200){
defaults.success(responseText,xhr);
}else{
defaults.error(responseText,xhr);
}
}
}
ajax({
//请求方式
// type:'get',
//请求地址
url:'http://127.0.0.1/ajaxFin',
data:{
name:'cindy',
age:20
},
success:function(data){
console.log(data);
},
error:function(data,xhr){
console.log(data,xhr);
}
})
模板引擎
作用：使用模板引擎提供的模板语法，可以将数据和 HTML 拼接起来。
使用步骤
FormData
- FormData对象的作用
- 模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。
- 异步上传二进制文件
使用
实例方法
二进制文件上传
-
上传
-
进度展示
-
上传图片及时预览
H5：filereader对象（仅支持H5)
传统方法：
同源政策
Ajax请求限制
Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求。
同源概念
如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。
举例：
| 请求地址 | 协议 | 域名 | 端口 | 同源 |
|---|---|---|---|---|
| http://www.example.com/dir/page.html | http | www.example.com | 80 | |
| http://www.example.com/dir2/other.html | http | www.example.com | 80 | 同源 |
| http://example.com/dir/other.html | http | example.com | 80 | 不同源（域名不同） |
| http://v2.www.example.com/dir/other.html | http | v2.www.example.com | 80 | 不同源（域名不同） |
| http://www.example.com:81/dir/other.html | http | www.example.com | 81 | 不同源（端口不同） |
| https://www.example.com/dir/page.html | https | www.example.com | 80 | 不同源（协议不同） |
- 同源政策的目的
同源政策是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指 A 网站在客户端设置的 Cookie，B网站是不能访问的。
随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax 请求，如果请求，浏览器就会报错（浏览器拒绝接受）。
使用JSONP解决同源限制问题
jsonp 是 json with padding 的缩写，它不属于 Ajax 请求，但它可以模拟 Ajax 请求
- 核心：
- 在服务器端将json数据作为函数的参数，将json数据填充到函数之中
- 前后端配合开发完成
JSONP代码优化
- 客户端需要将函数名成传递到服务器端
- 问题： 要求服务器端返回的调用的函数名称和客户端定义的函数名称一致，麻烦
- 解决： 客户端开发人员只需要将函数的名字，通过请求参数发送给服务器端。 服务器端，只要接收到函数名字，然后再返回函数调用即可。这样，无论客户端的函数名字修改多少次，都不会影响到服务器端，因为客户端总是将最新修改后的函数名字传递给服务器端。服务器端只需要直接返回就可以了
- 具体方法： 请求地址后加get形式的参数，callback（约定俗成），参数值为函数名称
- 将script请求的发送变成动态请求
213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
