Ajax学习笔记

最新推荐文章于 2024-07-19 15:16:23 发布
最新推荐文章于 2024-07-19 15:16:23 发布
阅读量129 收藏
点赞数
文章标签： ajax 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58458057/article/details/126634781
版权

一：Ajax简介

Ajax全称Asynchronous JavaScript And XML，指异步的js和xml，Ajax不是新的编程语言，而是将现有标准组合在一起使用的新方式

二：Ajax特点

1：优点

  • 无需刷新页面与服务器端通信
  • 允许根据用户事件更新页面部分内容

2：缺点

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

三：HTTP协议

1：概念

HTTP协议 超文本传输协议，协议详细规定了浏览器和万维网服务器之间相互通信的规则

2：请求报文

a：请求行

  • 请求方法：常见的是GET和POST，此外还有DELETED等
  • 请求地址：和报文头组成完整的url请求
  • 协议名称及版本号：一般是HTTP/1.1

b：请求头

  • HTTP报文头，包含若干个属性，格式为"属性名: 属性值"

c：请求体

如果请求方法为GET，则请求体为空

3：响应报文

a：响应行

  • 响应协议
  • 状态码
  • 描述

b：响应头

响应名: 响应值

c：响应体

响应参数

四：AJAX请求基本操作

1：使用express开启后端

引入nodemon

npm install -g nodemon

引入express

npm i express

2：开启服务器

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

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

// 创建路由规则
// request是请求报文的封装
// response是响应报文的封装
app.get('/server',(request,response)=>{

    // 设置响应头 允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");

    // 设置响应
    response.send("hello ajax");
});

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

3:实现AJAX基本请求(超时请求，取消请求)

<!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>Ajax请求</title>
    <style>
        #cls{ 
            width: 300px;
            height: 200px;
            border: solid;
        }
    </style>
</head>
<body>
    <button>点击</button>
    <div id="cls"></div>
    <script>
        const btn = document.getElementsByTagName("button")[0];
        const result = document.getElementById("cls");
        // 绑定事件
        btn.onclick = function(){
            //创建对象
            const xhr = new XMLHttpRequest();
            // 初始化。设置请求方法和url，并传请求参数
            xhr.open('GET',"http://localhost:8000/server?a=100&b=114") 
            // 发送
            xhr.send();
            //取消发送
            x.abort();
            // 设置超时,2秒后为返回结果取消请求
            xhr.timeout = 2000;
            // 超时提醒
            xhr.ontimeout = function(){
                alert("网络异常，稍后重试")
            }
            // 事件绑定，处理服务器返回结果
            xhr.onreadystatechange=function(){
                // 说明返回所有结果
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        // 处理行 头 空行 体
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText)//状态字符串
                        console.log(xhr.getAllResponseHeaders);//响应头
                        console.log(xhr.response);//响应体 
                        result.innerHTML=xhr.response;   
                    }
                }
            }
        }
    </script>
</body>
</html>

查看AJAX请求
查看请求

4：AJAX实现post请求

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

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

// 创建路由规则
// request是请求报文的封装
// response是响应报文的封装
app.get('/server',(request,response)=>{

    // 设置响应头 允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");

    // 设置响应
    response.send("hello ajax");
});

app.post('/server',(request,response)=>{

    // 设置响应头 允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");

    // 设置响应
    response.send("hello ajax POST-Request");
});

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


<!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>Ajax请求</title>
    <style>
        #result{ 
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById("result");
        // 绑定事件
        result.addEventListener("mouseover",function(){
            console.log("test")
            // 创建对象
            const xhr = new XMLHttpRequest();
            // 初始化请求类型
            xhr.open('POST',"http://localhost:8000/server");
                        // 设置请求头
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            xhr.send('user:admin&password:123456');
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
// 处理服务端
                        result.innerHTML = xhr.response;
                    }
                }
            }
        });
    </script>
</body>
</html>

查看载荷
在这里插入图片描述

5：AJAX响应JSON数据

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

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

// 创建路由规则
// request是请求报文的封装
// response是响应报文的封装
app.get('/server',(request,response)=>{

    // 设置响应头 允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");

    // 设置响应
    response.send("hello ajax");
});

app.post('/server',(request,response)=>{

    // 设置响应头 允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");

    // 设置响应
    response.send("hello ajax POST-Request");
});

app.all('/serverall',(request,response)=>{

    // 设置响应头 允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");

    const data = {
        name:'lunai'
    }
    // 
    let str = JSON.stringify(data)
    // 设置响应
    response.send(str);
});

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


<!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>Ajax请求</title>
    <style>
        #result{ 
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById("result");
        // 标识变量
        let isSeading = false;
        // 绑定事件
        result.addEventListener("mouseover",function(){
            // 判断是否已经发送请求服务器操作
            if(isSeading)
                xhr.abort();
            console.log("test")
            // 创建对象
            const xhr = new XMLHttpRequest();
            // 设置响应数据类型
            xhr.responseType = 'json';
            isSeading = true;
            // 初始化请求类型
            xhr.open('POST',"http://localhost:8000/serverall");
            // 设置请求头
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
            xhr.send('user:admin&password:123456');
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
// 处理服务端   
                        result.innerHTML = xhr.response.name;
                    }
                }
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

6：JQuery发送AJAX请求

要先引入JQuery

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<!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>Ajax请求</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        #result{ 
            width: 300px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="result">
        <h2>jquery发送AJAX请求</h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法ajax</button>
    </div>
    <script>
        $('button').eq(0).click(function(){
            $.get("http://localhost:8000/jquery",{a:114,b:514},function(data){
                console.log(data)
            })
        })
        $('button').eq(1).click(function(){
            $.post("http://localhost:8000/jquery",{a:114,b:514},function(data){
                console.log(data)
            },'json');
        })
        $('button').eq(2).click(function(){
            $.ajax({
                url: 'http://localhost:8000/jquery',
                data: {a:100,b:200},
                // 请求类型
                type: 'POST',
                dataType: 'json',
                success: function(data){
                    console.log(data)
                }
            })
        })
    </script>
</body> 
</html>

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

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

// 创建路由规则
// request是请求报文的封装
// response是响应报文的封装
app.get('/server',(request,response)=>{

    // 设置响应头 允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");

    // 设置响应
    response.send("hello ajax");
});

app.post('/server',(request,response)=>{

    // 设置响应头 允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");

    // 设置响应
    response.send("hello ajax POST-Request");
});

app.post('/jquery',(request,response)=>{

    // 设置响应头 允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");

    // 设置响应
    const data={name: 'lunai'}
    response.send(JSON.stringify(data));
});

app.get('/jquery',(request,response)=>{

    // 设置响应头 允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");

    // 设置响应
    response.send("hello jquery");
});

app.all('/serverall',(request,response)=>{

    // 设置响应头 允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");

    const data = {
        name:'lunai'
    }
    // 
    let str = JSON.stringify(data)
    // 设置响应
    response.send(str);
});

// 监听端口启动
app.listen(8000,()=>{
    console.log("已启动");
})
鹿乃会发光~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ajax学习笔记
11-30
ajax学习笔记。。。。。。。。。。。。。。。。。。。。。。
Ajax学习笔记整理
10-22
Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据
史上最详细Ajax学习笔记
楠黎倾风的博客
09-19 7947
史上最强Ajax学习笔记
AJAX学习笔记
weixin_44497507的博客
11-10 538
【代码】AJAX学习笔记。
Ajax 学习笔记
爱学习的小强
10-18 3033
文章目录get请求带参数的get请求json字符串和json格式get请求的封装基于promise的get请求的封装post请求post请求的封装utils.js封装get和post请求get和post方法封装成两个get和post方法封装成一个ajax例子-段子请求fetch方法基于fetch的get请求基于fetch的post请求原因分析浏览器的同源策略定义为什么要使用同源策略举例src属性开放性原则例子1例子1(动态函数名)例子(百度动态搜索框)三次握手和四次挥手初步理解常见状态码 get请求 ge
jQuery+AJAX学习笔记
10-10
jQuery+AJAX学习笔记
16ajax学习笔记1
08-08
在本篇16ajax学习笔记1中，我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求： Ajax的首要任务是创建XMLHttpRequest对象，这是浏览器提供的API。在JavaScript中，我们可以通过new ...
Spark学习之SparkSQL
m0_58050808的博客
07-16 413
Spark SQL中的DataFrame DSL（Domain Specific Language，领域特定语言）是一种用于处理DataFrame的编程风格，它允许开发者以命令式的方式，通过调用API接口来操作DataFrame。这种风格**介于代码和纯SQL之间，**提供了一种更加灵活和强大的数据处理方式。DataFrame DSL（Domain Specific Language，领域特定语言）中的。idea里面将代码编写好打包上传到集群中运行，上线使用。
ajax实时监测与springboot的实例分析
羽墨墨的博客
07-16 398
ajax实时监测和springboot举例分析
Ajax是什么？如何在HTML5中使用Ajax？
m0_70066267的博客
07-16 1882
Ajax，全称Asynchronous Javascript And XML（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。这种技术极大地提升了用户体验，减少了数据传输量，并节省了网络带宽。Ajax并非一种新的编程语言，而是一种基于现有标准的技术，主要依赖于JavaScript和XMLHttpRequest对象来实现。：这是Ajax技术的核心，用于与服务器进行异步通信。
【精简版】jQuery 中的 Ajax 详解
weixin_46485638的博客
07-15 995
精简的 jQuery 中的 Ajax 详解。
昇思25天学习打卡营第14天|LLM-文本解码原理--以MindNLP为例
wwt72的博客
07-17 676
限制输出序列的最大长度为50个token。top-p=0.95，top-p采样表示在每一步生成token时，只从概率分布中累计概率达到95%的token中进行采样，有助于保持生成文本的流畅性和质量，同时允许一些低概率的token被选中，从而增加多样性。表示禁用了top-k采样，因为在top-k采样中，通常是从概率最高的k个token中随机选择一个token作为下一个输出，而这里设置为0表示不限制token的选择，实际上这将等同于使用 softmax 概率分布直接进行采样。这有助于提高生成文本的多样性。
kubernetes学习日志（七）
qq_47037022的博客
07-18 374
本文记录了service管理，ingress管理，Dashboard管理插件，集群鉴权策略，角色与全局角色，赋权与全局角色赋权。
NumPy库学习之np.random.rand函数
qq_46396470的博客
07-15 308
是 NumPy 库中的一个函数，用于生成随机数。这些随机数是从均匀分布 [0, 1) 中抽取的，即每个数都在0到1之间，但不包括1。
手写简易版Spring IOC容器02【学习】
最新发布
weixin_44794897的博客
07-19 339
其中applyPropertyValues用于从beanDefinition中读取属性的配置信息然后通过BeanUtil(hutool-all中提供的类)为其赋值@Overridetry {// 创建bean实例Class<?if (null!break;// 设置属性值try {// 从beanDefinition中获取property通过Resource获取文件流。
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 181
【代码】博客前端项目学习day03——框架页。
钓鱼攻击 - 基础学习
Reset
07-16 700
钓鱼攻击是一种典型的欺诈式攻击手段，攻击者通过伪装成可以信任的角色，利用电子邮件或其他通信渠道向被攻击者发送植入了木马的文档或恶意链接，并诱骗被攻击者点击执行，从而实现对被攻击者计算机的远程控制或恶意程序感染。
Ajax学习笔记pink老师
07-29
以下是一份简要的Ajax学习笔记，希望对您有所帮助： 1. 什么是Ajax？ - Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web应用程序的技术。 - 它通过在后台与服务器...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值