传统网站的问题
- 网速慢的情况下，页面加载时间长，用户只能等待；
- 表单提交后，一项不合格，需要重新填写所有内容；
- 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间；
Ajax
- 概述：是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。
- 应用场景：页面上拉加载更多数据、列表数据无刷新分页、表单项离开焦点数据验证、搜索框提示文字下拉列表。
- 运行环境：需要运行在网站环境中才能生效。
- 运行原理：Ajax相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览器页面的情况下，局部更新页面数据，从而提高用户体验。
运行环境配置
-
建立如下文件；
-
配置app.js文件，代码如下；
// 引入express框架
const express = require('express');
// 路径处理模块
const path = require('path');
// 创建web服务器
const app = express();
// 静态资源访问服务功能
app.use(express.static(path.join(__dirname,'public')));
//监听端口
app.listen(3000);
//控制台提示输出
console.log('服务器启动成功');
- 在public文件夹中创建index.html文件，代码如下；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>欢迎，这是public文件夹的index.html文件</h2>
</body>
</html>
- 在上图文件所在位置，打开powershell，执行nodemon app.js命令
- 在浏览器中打开localhost:3000,如下图就表示运行成功啦！
Ajax实现步骤
//1. 创建Ajax对象；
var xhr = new XMLHttpRequest();
//2. 告诉Ajax请求地址以及请求方式
xhr.open('get','http://www.example.com');
//3. 发送请求
xhr.send();
//4. 获取服务器端给与客户端的响应数据
xhr.onload = function(){
console.log(xhr.responseText)
}
服务器端响应的数据格式：在真实项目中，服务器端大多数情况下会以JSON对象作为响应数据的格式，当客户端拿到响应数据时，要将JSON数据和HTML字符串进行拼接，然后将拼接的结果展示在页面中。
在http请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。
请求参数的传递
- GET请求方式
xhr.open('get',''http://www.example.com?name=zhangsan$age=20');
- POST请求方式
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send('name=zhangsan$age=20');
请求报文：在HTTP请求喝响应的过程中传递的数据块就叫报文，包括要传送的数据喝一些附加信息，这些数据和信息要遵守规定好的格式。
请求参数的格式
- application/x-www-form-urlencoded
- appliction/json
请求头中指定Conten-Type属性的值是application/json，告诉服务器当前请求的参数格式是json。
//将json对象转换成json字符串
JSON.stringify()
注：get请求是不能提交json对象数据格式的，传统网站的表单提交也是不支持json对象数据格式的
获取服务器端响应
Ajax状态码：在创建ajax对象，配置ajax对象，发送请求，以及接收完服务器端响应数据，这个过程的每一步都对应一个数值，这个数值就是ajax状态码。
- 0：请求未初始化（还没有调用open() ）;
- 1：请求以及建立，但是还没有发送（还没有调用send() ）;
- 2：请求已经发送；
- 3：请求正在处理，通常响应中已经有部分数据可以用了；
- 4：响应已经完成，可以获取并使用服务器的响应了；
xhr.readyState // 获取ajax状态码- onreadystatechange 事件：当ajax状态码发送变化时将自动触发事件
两种获取服务端响应方式的区别
| 区别描述 | onload事件 | onreadystatechange事件 |
|---|---|---|
| 是否兼容IE版本 | 不兼容 | 兼容 |
| 是否要判断Ajax状态码 | 不需要 | 需要 |
| 被调用次数 | 一次 | 多次 |
Ajax错误处理
- 网络畅通，服务器能接收到请求，服务器端返回的结果不是预期结果；
可以判断服务器端返回的状态码，分别进行处理，xhr.status获取http状态码；- 网络畅通，服务器没有接收到请求，返回404状态码；
检查请求地址、请求方式是否错误；- 网络畅通，服务器能接收到请求，服务器端返回500状态码；
找服务器端开发人员；- 网络中断，请求无法发送到服务器端；
会触发xhr对象下面的onerror事件，在onerror事件处理函数中对错误进行处理；
- Ajax状态码：表示ajax请求的过程状态----ajax对象返回的
- http状态码：表示请求的处理结果----是服务器端返回的
低版本IE浏览器的缓存问题
问题：在低版本的IE浏览器中，Ajax请求有严重的缓存问题，即在请求地址不发生变化的情况下，只有第一次请求会真正发送到服务器端，后续请求都会从浏览器的缓存中获取，即使服务器端的数据更新了，客户端依然拿到的是缓存中的旧数据。
解决方案：在请求地址的后面加请求参数，保证每一次请求中的请求参数的值不相同。
xhr.open('get','http:///wwww.example.com?t='+Math.random());
同步异步概述
同步： 一个人一时间只能做一个事情，只有一个事情做完，才能做另件事情，落实到代码上，即代码逐行执行；
console.log("第一件事1");
console.log("第一件事2");
**异步：**一个一件事做了一半，转而去做其他事情，其他事情做完之后，再回过头继续做之前未完成的事情；
console.log("第一件事1");
setTimeout(()=>{
console.log('last');
},2000)
console.log("第一件事2");
Ajax封装
问题：发送一次请求代码过多，发送多次请求代码冗余。
解决方案：将请求代码封装到函数中，发送请求时调用函数即可。
请求参数要考虑的问题
- 请求参数位置的问题：
将请求参数传递到ajax函数内部，在函数内部根据请求方式的不同将请求参数放置在不同的位置。
get放在请求地址的后面；
post放在send方法中。 - 请求参数的格式问题：
application/x-www-form-urlencoded => 参数名称=参数值 & 参数名称=参数值
application/json => {参数名：参数值，参数名：参数值}
Object.assign(defaults,options);
//使用options对象中的属性覆盖defaults对象中的属性
扫一扫
1065
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
