AJAX介绍和基本跨域使用

最新推荐文章于 2024-04-28 04:09:01 发布
最新推荐文章于 2024-04-28 04:09:01 发布
阅读量325 收藏 2
点赞数 3
分类专栏： 正在路上的前端攻城狮的烂笔记 # AJAX # JavaScript 文章标签： ajax javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45660621/article/details/122482718
版权

目录

原生AJAX

AJAX简介

  • AJAX全称是Asynchronous JavaScript And XML,简之就是异步的JS和XML
  • 通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据。
  • 通过XMLHttpRequest()来创建AJAX对象

XML简介

  • XML是指可扩展标签语言
  • XML 被设计用来传输和存储数据
  • XML 和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全部是自定义标签，用来表示一些数据。
    比如一个学生数据name='心猿'；age=18;gender="男"；
    用XML表示：
    <student>
        <name>心猿</name>
        <age>18</age>
        <gender>男</gender>
    </student>

AJAX的优点

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

AJAX的缺点

  • 没有浏览历史，不能回退
  • 存在跨域问题（同源）
  • SEO不友好，也就是说通过AJAX异步请求的网页内容是爬虫爬取不到的

express框架

在这里插入图片描述

  • 在node环境下输入npm install express

express的基本使用

Express的中间件(Middleware)

Express的中间件的作用：Express通过中间件接收客户端发来的请求，并对请求做出响应，也可以将请求交给下一个中间件继续处理。
中间件是指业务流程的中间处理环节。可以把中间件理解为处理客户端请求的一系列方法。
中间件的组成：

  • 中间件方法：由Express提供，用来拦截用户请求
  • 请求处理函数：由开发人员编写,负责处理客户端请求

常用的中间件方法：

app.get(‘请求路径’,‘请求处理函数’)：拦截get方式的请求

app.post(‘请求路径’,‘请求处理函数’)：拦截post方式的请求

app.use(‘请求路径’,‘请求处理函数’)：调用其他模块

利用中间件处理静态资源：
使用static()中间件，在客户端访问服务器的静态资源时使用

express.static()：是express内置的中间件，参数是静态资源所在的目录,要作为app.use的参数
常用的静态资源：图像、css、JavaScript、html

错误处理的中间件：
使用中间件方法创建web服务器

  • 第一步服务器代码的编写
// 1.引入express模块
const express = require("express");

// 2.创建web服务器对象
const app = express();

// 3.创建get路由: 接收客户端的get请求
// req: 即request 是对请求报文的封装
// res: 即response 是对响应报文的封装 
app.get('/', (req, res) =>{
    //设置响应
    res.send("Hello Express");
})
app.get('/list', (req,res) =>{
    res.end("Hello ListPage");
})
// 4.监听端口启动服务
app.listen(3000, ()=>{
    console.log("服务器运行在端口3000中~~~");
})

执行改代码
在这里插入图片描述
如果报以下错误说明端口已经被占用、
在这里插入图片描述

  • 第二步在浏览器中输入服务器IP地址及端口号
    由于我们是在本地开启的服务，所以直接访问本地地址即可(使用的HTTP协议)
    本地IP地址：127.0.0.1:3000或者localhost:3000
    在这里插入图片描述

在这里插入图片描述

AJAX发送GET请求

案例需求：
点击按钮客户端通过GET请求方法，让服务器发送的文本放到div中

  • readyState 是xhr对象的属性，表示状态 0 1 2 3 4
    0 表示未初始化
    1 表示xhr.open()方法已经调用完毕
    2表示xhr.send();已经调用完毕
    3表示服务已经返回部分结果
    4 表示服务端已经返回了所有的结果
  • xhr.status 状态码
  • xhr.statusText 状态字符串
  • getAllResponseHeaders()所有的响应头
  • xhr.response

给响应报文设置响应头 使其许跨域
res.setHeader(‘Access-Control-Allow-Origin’, ‘*’)
web服务器代码：

// 1.引入express模块
const express = require("express");

// 2.创建web服务器对象
const app = express();

// 3.创建get路由: 接收客户端的get请求
// req: 即request 是对请求报文的封装
// res: 即response 是对响应报文的封装 
app.get('/server', (req, res) =>{
    // 设置响应头 设置允许跨域
    res.setHeader('Access-Control-Allow-Origin', '*')
    //设置响应
    res.send("Hello Express");
})
// 4.监听端口启动服务
app.listen(3000, ()=>{
    console.log("服务器运行在端口3000中~~~");
})

html文件代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #90b;
        }
    </style>
</head>

<body>
    <button id="btn">点击发送请求</button>
    <div id="result"></div>
    <script>
        // 获取button元素
        const btn = document.getElementById('btn');
        const result = document.getElementById("result");
        // 绑定事件
        btn.onclick = function () {
            // 1. 创建对象
            const xhr = new XMLHttpRequest();
            // 2.初始化 设置请求的方法和url
            xhr.open('GET', 'http://127.0.0.1:3000/server');
            // 3.发送
            xhr.send();
            // 4.事件绑定 出来服务端返回的结果
            // readyState 是xhr对象的属性，表示状态 0 1 2 3 4 
            // 0 表示未初始化 
            // 1 表示xhr.open()方法已经调用完毕
            // 2 表示xhr.send();已经调用完毕 
            // 3 表示服务已经返回部分结果
            // 4 表示服务端已经返回了所有的结果
            xhr.onreadystatechange = function () {
                // 判断（服务端返回了所有的结果）
                if (xhr.readyState === 4) {
                    // 判断响应状态码 200 
                    // 2xx 表示成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理结果 行 头 空行 体
                        // 1.响应行
                        console.log("状态码:" + xhr.status);// 状态码
                        console.log("状态字符串:" + xhr.statusText);//状态字符串
                        console.log("所有的响应头" + xhr.getAllResponseHeaders());//所有的响应头
                        console.log("响应体:" + xhr.response);//响应体

                        // 将响应体的结果放到div里面去
                        result.innerHTML = xhr.response;
                    }
                }
            }
        }
    </script>
</body>

</html>

效果
在这里插入图片描述
通过控制台查看完整的响应头信息：
在这里插入图片描述

AJAX发送POST请求

案例需求：
点击按钮客户端通过POST请求方法，让服务器发送的文本放到div中

web服务器代码：

// 1.引入express模块
const express = require("express");

// 2.创建web服务器对象
const app = express();

// 3.创建get路由: 接收客户端的get请求
// req: 即request 是对请求报文的封装
// res: 即response 是对响应报文的封装 
app.post('/server', (req, res) =>{
    // 设置响应头 设置允许跨域
    res.setHeader('Access-Control-Allow-Origin', '*')
    //设置响应
    res.send("Hello Express");
})

// 4.监听端口启动服务
app.listen(3000, ()=>{
    console.log("服务器运行在端口3000中~~~");
})

html文件代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #90b;
        }
    </style>
</head>

<body>
    <button id="btn">点击发送请求</button>
    <div id="result"></div>
    <script>
        // 获取button元素
        const btn = document.getElementById('btn');
        const result = document.getElementById("result");
        // 绑定事件
        btn.onclick = function () {
            // 1. 创建对象
            const xhr = new XMLHttpRequest();
            // 2.初始化 设置请求的方法和url
            xhr.open('POST', 'http://127.0.0.1:3000/server');
            // 3.发送
            xhr.send();
            xhr.onreadystatechange = function () {
                // 判断（服务端返回了所有的结果）
                if (xhr.readyState === 4) {
                    // 判断响应状态码 200 
                    // 2xx 表示成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理结果 行 头 空行 体
                        // 1.响应行
                        console.log("状态码:" + xhr.status);// 状态码
                        console.log("状态字符串:" + xhr.statusText);//状态字符串
                        console.log("所有的响应头" + xhr.getAllResponseHeaders());//所有的响应头
                        console.log("响应体:" + xhr.response);//响应体

                        // 将响应体的结果放到div里面去
                        result.innerHTML = xhr.response;
                    }
                }
            }
        }
    </script>
</body>

</html>

在这里插入图片描述
通过控制台查看完整的响应头信息：
在这里插入图片描述
在POST请求方法中可以通过给xhr.send()传参，来设置请求体的参数
例如在这样写,这种写法巨多

  • xhr.send('a=100&b=200&c=300');
    在这里插入图片描述

或者这样写

  • xhr.send('a:100&b:200&c:300');
    在这里插入图片描述

还有可以用JSON格式写。

设置请求头信息
可以使用xhr.setRequestHeader('', '') 来设置请求头的信息。

1900's 88 keys
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
AJAX请求及解决跨域问题
m0_59092234的博客
07-30 743
AJAX其实就是异步的js和xml通过ajax可以在浏览器中发送异步请求。最大优势无刷新获取数据优点1.可以无需刷新页面与服务器进行通信2.允许根据用户事件更新部分页面内容当然也存在其缺点问题比如跨域问题等！...
ajax 跨域问题解决方案
炒鸡加倍
02-28 525
注：关于跨域，有N种类型，本文只专注于ajax请求跨域(ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨域等这里不做介绍) 一、原因 浏览器的同源策略会导致跨域，这里同源策略又分为以下两种 DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。 X...
Ajax跨域的所有方法（最详细带使用教程！！！）
最新发布
2401_84446548的博客
04-28 1012
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
ajax 跨域，解决方案
油墨香^-^的博客
05-17 3121
答案：只需要点击标题下面的蓝色字【web前端开发】关注即可。 前言 从刚接触前端开发起， 跨域这个词就一直以很高的频率在身边重复出现，一直到现在，已经调试过N个跨域相关的问题了，16年时也整理过一篇相关文章，但是感觉还是差了点什么，于是现在重新梳理了一下。 个人见识有限，如有差错，请多多见谅，欢迎提出issue，另外看到这个标题，请勿喷~ 题纲 关于跨域，有N种类型，本文只专注于 ajax请求跨域(ajax跨域只是属于浏览器"同源策略"中的一部分，其它的还有Cookie跨域iframe跨域，Loc
Ajax跨域访问解决方案
04-01
NULL 博文链接：https://exceptioneye.iteye.com/blog/1405495
AJAX跨域问题解决方案
weixin_59528719的博客
02-22 1491
跨域访问的资源、跨域访问
demo跨域ajax_DEMO_ajax跨域_
09-30
以上就是C#和Ajax跨域通信的基本原理和实现方法。在实际应用中，还需考虑安全性，谨慎设置允许跨域的源，以及是否允许携带Cookie等认证信息。通过理解并正确实施这些策略，你可以确保C#服务器与任何合法源的前端应用...
Springboot解决ajax+自定义headers的跨域请求问题
10-16
这导致了在处理跨域请求时的一些挑战，尤其是在使用AJAX和自定义headers时。Spring Boot作为流行的Java后端框架，提供了优雅的解决方案来处理这类问题。 首先，我们来理解什么是跨域。跨域是指一个域下的文档或脚本...
原生JS实现ajax与ajax的跨域请求实例
10-18
本文将详细介绍如何使用原生JS实现AJAX以及处理跨域请求的问题。 首先，实现AJAX的基本步骤如下： 1. **获取XMLHttpRequest对象**：这是AJAX的核心，它提供了一个与服务器通信的接口。在JavaScript中，可以通过`...
使用script的src实现跨域和类似ajax效果
09-04
尽管这种方法相比真正的Ajax请求较为复杂，但它提供了一种在跨域情况下获取和更新数据的途径。 总结来说，利用`<script>`标签的`src`属性进行跨域数据获取是一种常见的解决策略，尤其适用于简单的数据获取场景。...
原生js的ajax和解决跨域的jsonp(实例讲解)
11-27
在本文中，我们将深入理解原生JavaScript中的AJAX实现，并探讨如何使用JSONP解决跨域问题。 ### AJAX基础 #### 创建XMLHttpRequest对象 在JavaScript中，我们首先需要创建一个`XMLHttpRequest`对象，这个对象是...
解决ajax跨域问题
08-10
解决ajax跨域的问题的小demo,供大家参考,需要的可以下载。
ajax跨域，这应该是最全的解决方案了
02-25
关于跨域，有N种类型，本文只专注于ajax请求跨域(ajax跨域只是属于浏览器"同源策略"中的一部分，其它的还有Cookie跨域iframe跨域，LocalStorage跨域等这里不做介绍)，内容大概如下：什么是ajax跨域原理表现(整理了一些遇到的问题以及解决方案)如何解决ajax跨域JSONP方式CORS方式代理请求方式如何分析ajax跨域http抓包的分析一些示例ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”,可以参考浏览器同源政策及其规避方法(阮一峰)CORS是一个W3C标准，全称是"跨域资源共享"（Cross-originresourcesharing）。它允许浏
解决ajax跨域问题【5种解决方案】
jiao512的专栏
03-05 1784
0305-01
ajax跨域问题全面解决方案
faxiu的博客
03-02 302
本文为学习慕课网 晓风轻老师 的教程后自行编辑，仅作为本人日后复习翻阅。 1.为什么会发生AJAX跨域？ 浏览器限制 (跨域问题是浏览器在前台做的校验，和后台没有关系) 跨域 (请求客户端为localhost：8081，服务端为：localhost:8081) XHR(XMLHttpRequest)请求 2.解决思路： 浏览器 — 指定参数让浏览...
ajax 如何解决跨域问题，我试了试这种方案...
qq_41566366的博客
08-08 342
今天使用ajax跨域请求获取数据，但是报错cors $.ajax({ url: "", type: "", contentType: "", dataType: "json", success: function (data) {} }) 我尝试多遍后发现，当type为Get，contentType为application/x-www-form-urlencoded、 multipart/form-data、text/plain。 解决问题的灵感来自于：htt
Ajax跨域实现代码(后台jsp).docx
01-11
AJAX跨域实现是指在使用AJAX进行前端与后台数据交互时，如果涉及到跨域请求，需要采取一些特殊的处理方法来解决跨域限制的问题。本文主要介绍了在后台JSP中实现AJAX跨域请求的代码。 首先，需要了解AJAX的基本概念...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值