Ajax Note

已于 2022-02-14 10:37:13 修改
阅读量317 收藏
点赞数 1
文章标签： ajax javascript 服务器
于 2022-02-13 11:56:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58562753/article/details/122905761
版权

AJAX 简介

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

通过 AJAX 可以在浏览器中向服务器发送异步请求，

最大的优势：无刷新获取数据。 AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

XML 简介

XML 可扩展标记语言。 XML 被设计用来传输和存储数据。 XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签， 全都是自定义标签，用来表示一些数据。

现在已经被 JSON 取代了.

AJAX 的优点

1) 可以无需刷新页面而与服务器端进行通信。

2) 允许你根据用户事件来更新部分页面内容。

AJAX 的缺点

1) 没有浏览历史，不能回退

2) 存在跨域问题(同源)

3) SEO 不友好

HTTP

        1.GET 和 POST 只是 HTTP 协议中两种请求方式，所以在传输上，没有区别，因为HTTP 协议是基于 TCP/IP 的应用层协议。
       2. 报文格式上，不带参数时，最大区别仅仅是第一行方法名不同，一个是GET，一个是POST
带参数时报文的区别呢？在约定中，GET 方法的参数应该放在 url 中，POST 方法参数应该放在 body 中。

       3. POST 比 GET 安全，因为数据在地址栏上不可见。然而从传输的角度来说，他们都是不安全的，因为 HTTP 在网络上是明文传输，只要在网络节点上抓包，就能完整地获取数据报文。
要想安全传输，就只有加密，也就是 HTTPS。

        4.get请求是可以缓存的，post请求不可以缓存。

        5.后退页面的反应，get请求页面后退时，不产生影响，post请求页面后退时，会重新提交请求。

       6. 传输数据的大小，get一般传输数据大小不超过2k-4k（根据浏览器不同，限制不一样，但相差不大），post请求传输数据的大小根据php.ini 配置文件设定，也可以无限大。

客户端发请求给服务器。

服务器响应客户端。

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState属性 存有 XMLHttpRequest 的状态信息。

 

 get和post发请求

和javaweb类似。

get:

前端：传入请求参数、提交请求,

 <script>
        //1.创建对象
        //2.初始化  设置请求方法和url
        //3.发送
        //4.事件绑定，处理回传数据
       
        //获取button元素
        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/sever?a=100&b=200');
            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            // on  when 当....时候
            // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
            // change  改变
            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;
                    }else{

                    }
                }
            }


        }
    </script>

服务器：接收请求报文，回传数据。

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

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

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/sever', (request, response)=>{
    //设置响应头，允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX ');

});

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

console： 

POST，客户端设置请求头，请求体(请求参数在请求体中)

 <script>
        //获取元素对象
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover", function(){
            //1. 创建对象
            const xhr = new XMLHttpRequest();
            //2. 初始化 设置类型与 URL
            xhr.open('POST', 'http://127.0.0.1:8000/sever');
            //设置请求头信息
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//设置请求体类型
            xhr.setRequestHeader('name','atguigu');//自定义
            //3. 发送   传入请求参数
            //xhr.send();
            xhr.send('a=100&b=200&c=300');
            // xhr.send('a:100&b:200&c:300');
            // xhr.send('1233211234567');
            
            //4. 事件绑定
            xhr.onreadystatechange = function(){
                //判断
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理服务端返回的结果
                        result.innerHTML = xhr.response;
                    }
                }
            }
        });
    </script>

服务器端响应json数据

 <script>
        const result = document.getElementById('result');
        //绑定键盘按下事件
        window.onkeydown = function(){
            //发送请求
            const xhr = new XMLHttpRequest();
            //设置响应体数据的类型
            xhr.responseType = 'json';
            //初始化
            xhr.open('GET','http://127.0.0.1:8000/json-server');
            //发送
            xhr.send();
            //事件绑定
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        //
                        // console.log(xhr.response);
                        // result.innerHTML = xhr.response;
                        // 1. 手动对数据转化
                        // let data = JSON.parse(xhr.response);
                        // console.log(data);
                        // result.innerHTML = data.name;
                        // 2. 自动转换
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        }
    </script>
//JSON 响应
app.all('/json-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //响应头
    response.setHeader('Access-Control-Allow-Headers', '*');
    //响应一个数据
    const data = {
        name: 'atguigu'
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});

安装nodemon自动重启服务，类似于热部署。

npm install -g nodemon

nodemon.cmd server.js

请求超时与网络异常处理

设置超时、设置超时回调函数。

<script>
        const btn = document.getElementsByTagName('button')[0];
        const result = document.querySelector('#result');

        btn.addEventListener('click', function(){
            const xhr = new XMLHttpRequest();
            //超时设置 2s 设置
            xhr.timeout = 2000;
            //超时回调
            xhr.ontimeout = function(){
                alert("网络异常, 请稍后重试!!");
            }
            //网络异常回调
            xhr.onerror = function(){
                alert("你的网络似乎出了一些问题!");
            }

            xhr.open("GET",'http://127.0.0.1:8000/delay');
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status< 300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>
//延时响应
app.all('/delay', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    setTimeout(() => {
        //设置响应体
        response.send('延时响应');
    }, 3000)
});

手动取消请求

x.abort();

<button>点击发送请求</button>
    <button>点击取消发送请求</button>
    

    <script>
       const btns = document.getElementsByTagName('button');

        let x = null; 
        btns[0].onclick = function(){
            x = new XMLHttpRequest();
            x.open("GET","http://localhost:8000/delay");
            x.send();
        }

        btns[1].onclick = function(){
            x.abort();

        }
    </script>

请求重复发送问题

当前面一次请求没有完成时(正在发送)，再次重复发请求时，取消前一次发的请求。

<button>点击发送</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;
        //标识变量
        let isSending = false; // 是否正在发送AJAX请求

        btns[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;
                }
            }
        }

        // abort
        btns[1].onclick = function(){
            x.abort();
        }
    </script>

Axios发送请求

Axios，可以理解为ajax i/o system，这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。具备以下特点：

1.在浏览器中创建XMLHttpRequest请求
2.在node.js中发送http请求
3.支持Promise API
4.拦截请求和响应
5.转换请求和响应数据
6.取消要求
7.自动转换JSON数据
8客户端支持防止CSRF/XSRF(跨域请求伪造)
Axios 函数发送请求

<body>
    <button>GET</button>
    <button>POST</button>
    <button>AJAX</button>

    <script>
        // https://github.com/axios/axios
        const btns = document.querySelectorAll('button');

        //配置 baseURL
        axios.defaults.baseURL = 'http://127.0.0.1:8000';

        btns[0].onclick = function () {
            //GET 请求
            axios.get('/axios-server', {
                //url 参数
                params: {
                    id: 100,
                    vipNumbers: 7
                },
                //请求头信息
                //自定义请求头部属性，会先发送一个option请求，所以在all函数里面才能返回
                headers: {
                    name: 'atguigu',
                    age: 20
                }
            }).then(value => {
                console.log(value);
            });
        }

        btns[1].onclick = function () {
            axios.post('/axios-server', {
                username: 'admin',
                password: 'admin'
            }, {
                //url 
                params: {
                    id: 200,
                    vipNumbers: 9
                },
                //请求头参数
                headers: {
                    height: 180,
                    weight: 180,
                }
            });
        }
    
        btns[2].onclick = function(){
            axios({
                //请求方法
                method : 'POST',
                //url
                url: '/axios-server',
                //url参数
                params: {
                    vip:10,
                    level:30
                },
                //头信息
                headers: {
                    a:100,
                    b:200
                },
                //请求体参数
                data: {
                    username: 'admin',
                    password: 'admin'
                }
            }).then(response=>{
                //响应状态码
                console.log(response.status);
                //响应状态字符串
                console.log(response.statusText);
                //响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);
            })
        }
    </script>
</body>

fentch函数发送Ajax请求

<button>AJAX请求</button>
    <script>
        //文档地址
        //https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch
        
        const btn = document.querySelector('button');

        btn.onclick = function(){
            fetch('http://127.0.0.1:8000/fetch-server?vip=10', {
                //请求方法
                method: 'POST',
                //请求头
                headers: {
                    name:'atguigu'
                },
                //请求体
                body: 'username=admin&password=admin'
            }).then(response => {
                // return response.text();
                return response.json();
            }).then(response=>{
                console.log(response);
            });
        }
    </script>

跨域

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

同源： 协议、域名、端口号 必须完全相同。 违背同源策略就是跨域。

1.jsonp

JSONP 是什么

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

SONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script。 JSONP 就是利用 script 标签的跨域能力来发送请求的。

步骤：

1.动态的创建一个 script 标签 var script = document.createElement("script");

2.设置 script 的 src，设置回调函数 script.src = "http://localhost:3000/testAJAX?callback=abc"; function abc(data) { alert(data.name); };

3.将 script 添加到 body 中 document.body.appendChild(script);

4.服务器中路由的处理 router.get("/testAJAX" , function (req , res) { console.log("收到请求"); var callback = req.query.callback; var obj == {  name:"孙悟空", age:18 } res.send(callback+"("+JSON.stringify(obj)+")"); })

2.CORS

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

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

主要是服务器端的设置： router.get("/testAJAX" , function (req , res) {

         //通过 res 来设置响应头，来允许跨域请求

         //res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");

         res.set("Access-Control-Allow-Origin","*");

        res.send("testAJAX 返回的响应"); })

B1293773843
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Cordova Ajax请求跨域问题整理
天马3798
02-17 1万+
一、默认情况下Cordova在页面中不能直接使用Ajax请求访问外域的数据 异常1： ripple.js:51 Refused to connect to 'http://localhost:59201/api/category/getlistbyparent?ProjectCode=lc_app_v1' because it violates the following Content Se
Ajax-simplenote.zip
09-17
Ajax-simplenote.zip,日晷,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、json、xml和javascript。它用于创建动态网页，其中网页的小部分在不重新加载网页的情况下更改。
AJAX_NOTE
weixin_33701617的博客
08-26 62
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 ### 示例 ### function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, ...
AJAX【随手记】
m0_63139310的博客
05-06 342
AJAX可以在不加载整个页面的情况下与服务器交换数据并更新部分网页内容，即异步更新（无刷新获取数据）。例如百度搜索词条下面会出现其他相关的词条或者在浏览 网页时快滚到底部时页面显示更多内容就是用AJAX实现。 AJAX是异步的js和xml（xml的作用是传输和存储数据）（异步是指客户端不需要等待服务器响应，在服务器处理请求时客户端可以进行其他操作）。 XML 是可拓展标记语言，用来传输和存储数据。和html不同的是没有预定义标签，全都是自定义标签，用来表示数据。例如要显示名字就直接定义标签为<n
Ajax请求的基本操作（get）
weixin_42541725的博客
02-16 7197
Ajax请求的基本操作（get）
AJAX note
hi_23
12-21 502
Web2.0 概述     Web1.0    vs.    Web2.0     天天谈门户        谈个性化     关注的是内容      关注的是应用     谈挂牌推销        谈服务     谈密闭、大而全     谈大家开放、谈联合     网站中心化        个人中心化 Web1.0 vs. Web2.0结论：     是网络传媒的一种发展趋势是一
AJAX Note
新手记录工作中成长点滴-
12-14 375
Web2.0 概述     Web1.0    vs.    Web2.0     天天谈门户        谈个性化     关注的是内容      关注的是应用     谈挂牌推销        谈服务     谈密闭、大而全     谈大家开放、谈联合     网站中心化        个人中心化 Web1.0 vs. Web2.0结论：     是网络传媒的一种发展趋势是一
ajax 调用node,nodejs写api给前端调用。
weixin_42197110的博客
08-06 504
nodejs 实现 Web api。流程：1.npm init 生成package.json文件2. 安装依赖npm install express –savenpm install body-parser –save3.新建app.js4.新建index.html服务器端代码(app.js)：var express=require('express');var app =express();va...
13. AJAX Note
十年技术一场空！
04-23 109
Web2.0 概述 Web1.0 vs. Web2.0 天天谈门户 谈个性化 关注的是内容 关注的是应用 谈挂牌推销 谈服务 谈密闭、大而全 谈大家开放、谈联合 网站中心化 个人中心化 Web1.0 vs. Web2.0结论： 是网络传媒的一种发展趋势...
Ajax 学习笔记
高大哥
04-30 803
1 Ajax 概述 1.1 什么是 Ajax AJAX 全称：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 通俗理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是 Ajax。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 1.2 jQuery 中的 Ajax 浏览器中提供的 XMLHttpRequest 用法比较复杂，
云笔记cloudnote
07-01
在前端开发方面，可能会使用React或Vue.js等现代JavaScript框架构建用户界面，配合Ajax技术实现无刷新交互。后端接口设计则应遵循RESTful原则，提供清晰、简洁的API，便于前端调用。 总结来说，"cloudnote"云笔记...
note
04-01
在"note-main.js"中，开发者通常会编写各种JavaScript代码来处理用户交互、操纵DOM（Document Object Model）元素，以及与服务器进行异步通信（Ajax）。 一、基础语法 JavaScript的基础语法包括变量声明（var、let...
Ajax学习笔记
2301_79614379的博客
07-21 1049
定义：asyn和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用Promise。概念：在async函数内，使用await关键字取代then函数，等待获取Promise对象成功状态的结果值。定义：执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里回调函数的执行机制，就叫事件循环。axios响应拦截器：响应回到then/catch之前，触发的拦截函数，对响应的结果统一处理。Promise本身是同步的，而then和catch回调函数是异步的。
Next.js静态导出与动态路由优化
天涯学馆
07-20 1053
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 409
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 843
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 997
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
qq_61132537的博客
07-22 898
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
thymeleaf ajax
09-13
Note that the Thymeleaf fragment "messageFragment :: message" is returned from the "/sendMessage" endpoint. This allows only the "message" fragment of the template to be updated instead of the entire ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值