AJAX基础

最新推荐文章于 2024-09-14 11:06:39 发布

栋珞

最新推荐文章于 2024-09-14 11:06:39 发布

阅读量59

点赞数

分类专栏： AJAX 文章标签： ajax javascript 服务器

本文链接：https://blog.csdn.net/2202_75549187/article/details/129813644

版权

AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

AJAX是一种在浏览器中实现页面无刷新与服务器通信的技术，结合JavaScript和XML（现多用JSON）。它允许部分页面更新，但存在跨域、SEO等问题。HTTP协议规定了浏览器与服务器间的通信规则。Express是Node.js的Web应用框架，用于构建服务器。AJAX请求涉及XMLHttpRequest对象，包括GET和POST方法，同时介绍了处理跨域的方法如JSONP和CORS。

摘要由CSDN通过智能技术生成

AJAX

AJAX 简介

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML

通过 AJAX 可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据

AJAX 不是新的编程语言：而是一种将现有的标准组合在一起使用的新方式

XML 简介

XML 可扩展标记语言

XML 被设计用来传输和存储数据

XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签全部都是自定义标签，用来表示一些数据

比如我有一个学生数据：
	name = "孙悟空"; age = 18; gender = "男";
用 XML 表示：
<student>
	<name>孙悟空</name>
    <age>18</age>
    <gender>男</gender>
</student>

现在已经被 JSON 取代了

用 JSON 表示：
	{"name":"孙悟空","age":"18","gender","男"}

AJAX 的特点

AJAX 的优点

可以无需刷新页面与服务器端进行通信
允许你根据用户事件来更新部分页面内容

AJAX 的缺点

没有浏览历史，不能回退
存在跨域问题
SEO 不友好

AJAX 的使用

HTTP

HTTP (hypertext transport protocol) 协议 [超文本传输协议]，协议详细规定了浏览器和万维网服务器之间相互通信的规则
约定，规则

请求报文

重点是格式与参数

行 POST /s?ie=utf-8 HTTP/1.1
头 HOST: atguigu.com
Cookie: name=guigu
Content-type: application/x-www-form-urlencoded
User-Agent: chrom 83
空行
体 username=admin&password=admin

响应报文

行 HTTP/1.1 200 OK
头 Content-Type: text/html;charset=utf-8
Content-length: 2048
Content-encoding: gzip
空行
体

<html>
    <head>
    </head>
    <body>
        <h1></h1>
    </body>
</html>

404 找不到
403 被禁止
401 未授权
500 内部错误
200 OK

安装node

node 官网：(https://nodejs.org/en/)

node 中文：(https://nodejs.cn/)

官网安装好后控制台输入 node -v 查看版本号，有就安装完成

Express

express 中文官网：(expressjs.com.cn)

vs code 资源管理器右键点击终端

输入 npm init --yes // 启动终端

npm i express // 安装express框架

// 1. 引入express
const express = require('express');

// 2. 创建应用对象
const app = express();

// 3. 创建路由器规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response) => {
    // 设置响应
    response.send('HELLO ESPRESS');
});

// 4. 监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务器已经启动，8000 端口监听中....");
})

启动服务器 node js文件名

AJAX 请求

// 1.创建对象
const xhr = new XMLHttpRequest();
// 2.初始化 设置请求方法和 url
xhr.open('请求方法', 'url地址');
// 3.发送
xhr.send();
// 上面一套直接链接了服务器 下面就是享受成果
// 4.事件绑定 处理服务器返回的结果
xhr.onreadystatechange = function() {
    // 判断（服务器返回了所有的结果）
    if (xhr.readyState === 4) {
        // 判断响应状态码 200 404 403 401 500
        // 2xx 成功
        if (xhr.status >= 200 && xhr.status < 300) {
            // 处理结果  行 头 空行 体
            // 响应行
            // 设置对应样式
        }
    }
}

xhr.readyState

xhr.readyState  // 状态

0 表示未初始化
1 表示open方法调用完毕
2 表示send方法调用完毕
3 表示服务端返回了部分结果
4 表示服务端返回了所有结果

xhr.status

xhr.status  // 状态码      200 404 403等

xhr.statusText

xhr.statusText  // 状态字符串     OK 等

xhr.getAllResponseHeaders()

xhr.getAllResponseHeaders();  // 所有的响应头

xhr.response

xhr.response  // 响应体

设置请求参数

xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
xhr.send(a:100&b:200&c:300);

用 ? 开头，& 分隔，设置了 a=100，b=200，c=300 这三个值

// 1.创建对象
const xhr = new XMLHttpRequest();
// 2.初始化 设置请求方法和 url
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
// 3.发送
// xhr.send(a:100&b:200&c:300);
// xhr.send(a=100&b=200&c=300);
// xhr.send('1231323546');
xhr.send();
// 4.事件绑定 处理服务器返回的结果
// on  when  当...时候    
// change  改变
// readystate 是 xhr 对象中的属性，表示状态 0 1 2 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); // 响应体

            // 设置 result 的文本
            result.innerHTML = xhr.response;
        }
    }
}

// 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 get');
});
// 可以接收任意类型的请求
app.all('/server', (request, response) => {
    // 设置响应头
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 设置响应体
    response.send('HELLO AJAX post');
});

// 4. 监听端口启动服务
app.listen(8000, () => {
    console.log("服务已经启动，8000 端口监听中....");
});

AJAX-ondemon 自动重启工具安装

输入 npm install -g nodemon 安装

启动服务器 nodemon js文件名

启动后每次修改代码就会自动重启

使用文档官网：((https://www.npmjs.com/package/nodemon))

IE 缓存问题解决

xhr.open('请求方法', 'url地址?t='+Date.now());

给请求参数 t，等于当前时间 +Date.now()，让参数实时更新，不用再拿缓存里的参数

请求超时与网络异常处理

// 超时 2s 设置
xhr.timeout = 2000;
// 超时回调
xhr.ontimeout = function() {
    alert("网络异常，请稍后再试！");
}
//网络异常回调
xhr.onerror = function() {
    alert("你的网络似乎出现了一些问题");
}

取消请求

xhr.abort();

const btn = document.querySelectorAll('button');
let x = null;
btn[0].onclick = function() {
    x = new XMLHttpRequest();
    x.open('GET', 'http://127.0.0.1:8000/delay');
    x.send();
}

// abort
btn[1].onclick = function() {
    x.abort();
}

请求重复发送问题

// 标识变量
let isSending = false; // 是否正在发送AJAX

btn[0].onclick = function() {
    // 判断标识变量
    if (isSending) x.abort(); // 如果正在发送，则取消该请求，创建一个新的请求
    x = new XMLHttpRequest();
    // 修改 标识变量的值
    isSending = true;
    x.open('GET', 'http://127.0.0.1:8000/delay');
    x.send();
    x.onreadyStatechange = function() {
        if (x.readyState === 4) {
            // 修改标识变量
            isSending = false;
        }
    }
}

jQuery 发送 AJAX 请求

get 请求

$.get(url, [data],[callback],[type]);

url：请求的 URL 地址
data：请求携带的参数
callback：载入成功时回调函数
type：设置返回内容格式，xml，html，script， json，text，_default

post 请求

$.post(url, [data], [callback], [type]);

url：请求的 URL 地址
data：请求携带的参数
callback：载入成功时回调函数
type：设置返回内容格式，xml，html，script， json，text，_default

ajax 请求

$.ajax(url,[settings])

url：一个用来包含发送请求的URL字符串。
settings：AJAX 请求设置。所有选项都是可选的。

settings 选项有很多，建议参考JQuery文档：(https://jquery.cuishifeng.cn/jQuery.Ajax.html)

如果consolet出现黄色感叹号

<script crossorigin="anonymous" src="网络版jquery文件路径"></script>

crossorigin：跨源请求
anonymous：匿名
一般用于网络JQuery文件链接地址，匿名跨源请求

axios 发送 AJAX 请求

引入axios源文件，国外服务器

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

bootcdn.cn 国内服务器文件

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>

如果consolet出现黄色感叹号

<script crossorigin="anonymous" src="网络版axios文件路径"></script>

crossorigin：跨源请求
anonymous：匿名
一般用于网络axios文件链接地址，匿名跨源请求

get 请求

axios.get(url[,config]);

url：请求的 URL 地址
config：请求的参数

post 请求

axios.post(url[, data [,config]]);

url：请求的 URL 地址
data：发送请求体的参数
config：发送请求的参数

axios 请求

axios(config);

config：发送请求的参数
url、data、headers都写到config里面

fetch 函数发送 AJAX 请求

fetch(input[, init]);

input：一个 USVString 字符串，包含要获取资源的 URL。一个 Request 对象
init：一个配置对象，包含所有对请求的数值

跨域

同源策略

同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略

**同源：**协议、域名、端口号必须完全相同

未被同源策略就是跨域

如何解决跨域

JSONP

JSONP 是什么

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持 get 请求
JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script

JSONP 就是利用 script 标签的跨域能力来发送请求的
JSONP 的使用
1. 动态的创建一个 script 标签
  
  var script = document.createElement(“script”);
2. 设置 script 的 src，设置回调函数
  
  script.src = “http://localhost:3000/testAJAX?callback=abc”;

CORS

（http://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS）

CORS 是什么？

CORS（Cross Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持 get 和 post 请求，跨域资源共享标准新增了一组 HTTP 首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
CORS 怎么工作的？

CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行
CORS 的使用

主要是服务器端的设置：

router.get(“/testAJAX”, function(req, res) {});