AJAX基础 part1

已于 2022-03-24 15:59:55 修改
阅读量1.1k 收藏 1
点赞数
分类专栏： AJAX 文章标签： ajax 后端
于 2022-03-24 15:50:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sunny_Deer/article/details/123712936
版权

AJAX

express框架介绍与基本使用

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 EXPRESS');
});

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

效果:

在这里插入图片描述

AJAX-GET请求

编写sever.js文件
//server.js
// 1.引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request, response)=>{ 
    /*当客户端浏览器向服务器发送请求时，
    如果url的路径的第二段内容的路径是/server的话，
    就执行此处回调函数内部的代码,并且由response做出响应*/
    response.setHeader('Access-Control-Allow-Origin','*');//设置响应头，设置允许跨域
    response.send('HELLO AJAK');//设置响应体
});

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

在浏览器地址栏输入[127.0.0.1:8000/server](http://127.0.0.1:8000/server)查看服务是否启动

结果：

在这里插入图片描述

编写html页面文件
//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>get请求</title>
</head>
<style>
    #result {
        width: 200px;
        height: 100px;
        border: solid 1px red;
    }
</style>

<body>
    <div id="result">

    </div>
    <button>点击发送请求</button>
    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        //绑定事件
        btn.onclick = function () {
            //1.创建对象
            const xhr = new XMLHttpRequest();
            //2.初始化，设置请求方法和url
            xhr.open('GET', 'http://127.0.0.1:8000/server');
            //3.发送
            xhr.send();
            //4.事件绑定，处理服务端返回的结果
            //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) {
                        //处理结果 行 头 空行 体
                        //1.响应行
                        console.log(xhr.status); //状态码
                        console.log(xhr.statusText); //状态字符串
                        console.log(xhr.getAllResponseHeaders()); //所有的响应头
                        console.log(xhr.response()); //响应体
                    }
                }

            }
        }
    </script>
</body>

</html>

点击button后效果

在这里插入图片描述
在这里插入图片描述

将xhr返回的响应体显示到div中

const result = document.getElementById('result');
 //将响应体显示到div中
result.innerHTML=(xhr.response);

效果

在这里插入图片描述

AJAX-POST请求

编写server.js文件
//server.js
// 1.引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.post('/server',(request, response)=>{ //注意 此处应该写post，不再是get
    /*当客户端浏览器向服务器发送请求时，
    如果url的路径的第二段内容的路径是/server的话，
    就执行此处回调函数内部的代码,并且由response做出响应*/
    response.setHeader('Access-Control-Allow-Origin','*');//设置响应头，设置允许跨域
    response.send('HELLO AJAK');//设置响应体
});

app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中....");
});
编写html文件
//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>Post请求</title>
</head>
<style>
    #result {
        width: 200px;
        height: 100px;
        border: solid 1px red;
    }
</style>

<body>
    <div id="result"></div>
    <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/server');
             //3.发送
             xhr.send();
             //事件绑定
             xhr.onreadystatechange = function() {
                //判断（服务端返回了所有结果）
                if (xhr.readyState === 4) {
                    //判断响应状态码 200 404 403 401 500
                    //2xx 表示成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        result.innerHTML=(xhr.response);
                    }
                }

            }
        });
    </script>
</body>

</html>

结果：鼠标每移动到div上方是，发送一个post请求，并且请求的响应显示在div中
在这里插入图片描述

AJAX请求设置参数

  1. POST方式
 xhr.send('a=100&b=200&c=300');
 //or
 xhr.send('a:100&b:200&c:300');

在这里插入图片描述

在这里插入图片描述

AJAX设置请求头信息

请求头中一般存放一些用户身份信息
请求头

//设置请求头
//Content-type 用于设置请求体类型
//application/x-www-form-urlencoded 参数查询字符串的类型（固定写法）
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

自定义请求头信息

例如

xhr.setRequestHeader('name','Sunny_Deer');

对于自定义请求头，需要在server中添加特殊相应头

response.setHeader('Access-Control-Allow-Headers','*');//"*"表示所有类型的头信息都可以接受

并且需要将server中的接受的请求类型改为all（表示可以接受所有类型的请求）

app.all('/server',(request, response)=>{
    /*当客户端浏览器向服务器发送请求时，
    如果url的路径的第二段内容的路径是/server的话，
    就执行此处回调函数内部的代码,并且由response做出响应*/
    response.setHeader('Access-Control-Allow-Origin','*');//设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Headers','*');
    response.send('HELLO AJAK');//设置响应体
});

自定义响应头效果
在这里插入图片描述

服务端响应JSON数据

实现通过浏览器监测键盘按键事件来发送请求，并且在服务器端响应JSON数据的请求随后返回JSON数据类型的响应，然后在客户端对JSON数据进行解析

服务器端设置JSON类型的响应：

app.all('/JSON_server',(request, response)=>{ 
    /*当客户端浏览器向服务器发送请求时，
    如果url的路径的第二段内容的路径是/server的话，
    就执行此处回调函数内部的代码,并且由response做出响应*/
    response.setHeader('Access-Control-Allow-Origin','*');//设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Headers','*');
    // response.send('HELLO AJAK');//设置响应体
    const data = {
        name:'Sunner_Deer'
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    response.send(str);

});

客户端解析JSON数据分为两种方式，一种是自动转换，一种是手动转换

手动转换
let data = JSON.parse(xhr.response);
console.log(data.name);//在控制台打印输出
result.innerHTML = data.name;
自动转换
console.log(xhr.response);
result.innerHTML = xhr.response.name;

 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;
                        //手动转换
                        // let data = JSON.parse(xhr.response);
                        // console.log(data.name);
                        // result.innerHTML = data.name;
                        //自动转换
                        console.log(xhr.response);
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        }
响应结果

在这里插入图片描述

Wispertise
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax基础教程.part1
11-16
Ajax基础教程.part1Ajax基础教程.part1Ajax基础教程.part1
Ajax基础教程part1
06-12
本资源为Ajax基础教程，由于文件较大，分为13部分，请一起解压。为了防止资源分过高，只有part1需要资源分。
复习ajax-实现步骤及参数传递(part1)
Hiroshi's
12-04 162
先启动一个服务器，端口9999 开放static静态资源服务，指定路由为/p/ 注册一个get方式的路由，命中返回this is test1 新建一个html页面，我们分4个步骤去发送ajax请求： 1.创建一个ajax对象xhr 2.告诉xhr我们要用什么方式(get)去请求哪个地址 3.发送ajax请求 4.调用xhr.onload方法获取服务器返回的数据 控制台打印出来了，说明ajax发送成功 这里只是一个演示，真实项目中，不会去获取一段字符串，服务端大多数情况下会以JSON对象作为响应数据的格
AJAX基础 part2
Sunny_Deer的博客
04-18 614
AJAX解决ie缓存问题 当前端页面向服务起连续发送两条请求时，在ie浏览器中，第二次发送走的是第一次发送时产生的缓存，所以不能够及时的更新数据，解决办法就是在请求的url后加上一个动态可变的参数，这里以当前时间戳Date.now()为例； xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now()); 请求超时与网络异常 在服务端设置三秒的响应延时，模拟网络超时 在前端html中处理超时，并执行超时回调 效果 AJAX取消请求 <div
Part7: Ajax基础、JQuery版Ajax库封装
m0_46403734的博客
02-16 202
一、Ajax局部刷新和全局刷新
Ajax基础教程（part 1）
05-06
Ajax技术可以提供高度交互的Web应用，给予用户更丰富的页面浏览体验。
ajax基础教程part1
08-03
ajax基础教程配套 人民邮电出版社出版 关于AJAX基础教程中程序范例
AJAX基础教程part03
08-17
本教程分三部分上传，请大家分别下载完part01、part02、part03后，放到同一个目录下解压
【漏洞复现】某赛通电子文档安全管理系统 PolicyAjax SQL注入漏洞
siu~
08-08 302
某赛通电子文档安全管理系统PolicyAjax接口处存在sql注入漏洞，攻击者除了可以利用 SQL 注入漏洞获取数据库中的信息（例如，管理员后台密码、站点的用户个人信息）之外，甚至在高权限的情况可向服务器中写入木马，进一步获取服务器系统权限。
Day18_2--Vue.js Ajax（使用 Axios）基础入门学习
gitee_nanzhi66的博客
08-05 466
Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 环境中。它是现代化的 Ajax 库，用来替代传统的 XMLHttpRequest。
ajax part4
E___V___E的博客
08-08 124
这段思路很好，axios自带生成json文件和解析JSON文件，请求的时候参数是对象类型，但是提交给服务器axios会自动转换为JSON类型，响应返回的时候相反，自动解析JSON类型。使用modal其实就是一个大一点的提示框，但是对于提示信息不需要这么大。获取图像对象，准备数据，上传到服务器，将返回的URL网址渲染到页面上。服务器报错，可以检查一下fd的属性名是不是和要求的data属性名相同。data的data有用户数据。form-data表单数据。for：关联对象的ID。
ajax图书管理项目
E___V___E的博客
08-03 450
不离开当前页面，显示单独内容，让用户操作功能：不离开当前页面，显示单独内容，供用户操作步骤：1.引入bootstrap.css和bootstrap.js 2.准备弹框标签，确认结构3.通过自定义属性，控制弹框的显示和隐藏。
【漏洞复现】某赛通电子文档安全管理系统 NavigationAjax SQL注入漏洞
最新发布
siu~
08-08 196
某赛通电子文档安全管理系统NavigationAjax接口处存在sql注入漏洞，攻击者除了可以利用 SQL 注入漏洞获取数据库中的信息（例如，管理员后台密码、站点的用户个人信息）之外，甚至在高权限的情况可向服务器中写入木马，进一步获取服务器系统权限。
【漏洞复现】某赛通数据泄露防护(DLP)系统 NetSecConfigAjax SQL注入漏洞
siu~
08-08 209
某赛通数据泄露防护系统NetSecConfigAjax接口处存在sql注入漏洞，攻击者除了可以利用 SQL 注入漏洞获取数据库中的信息（例如，管理员后台密码、站点的用户个人信息）之外，甚至在高权限的情况可向服务器中写入木马，进一步获取服务器系统权限。
Ajax详解
yjp1240201821的博客
08-08 644
本文主要讲解Ajax，从其定义、使用详解、案例来帮助大家深刻理解Ajax
uniapp获取头像文件（二进制文件显示图片）
weixin_62639453的博客
08-08 251
由于在获取头像文件过程中，传递参数之后，请求成功了，但是后端给我返回了一串二进制数据流，傻傻的我，以为是乱码，跑去问后端大哥，人家跟我说这不是二进制吗，突然就觉得自己傻傻的。首先，我把他封装成一个工具，方法调用，不然每次都在页面上写一堆，因为请求头像的地方挺多。代码写的还是有些问题，还有这个方法只是其一，等发现好一点的办法再更新！
CAS5.3自定义登录校验规则
梧桐树的博客
08-04 312
前一篇文章中已经用到了这个抽象类, 这次要要做的还是改造它, 我们可以在之前的基础上来改造/*** 自定义登录拦截器*/@Setter@Override//查询用户信息//仅判断用户是否输入了自己的手机号,需要自行修改} else {throw new RuntimeException("验证码错误");} else {throw new RuntimeException("用户名或密码错误");} else {
el-table合计放在标题上方且合并列以及渲染后端返回的数据
qq_37953045的博客
08-08 80
el-table合计放在标题上方且合并列以及渲染后端返回的数据
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值