Ajax -- 总结 01

于 2024-08-22 09:00:00 发布
阅读量679 收藏
点赞数 22
文章标签： ajax 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78949452/article/details/141366084
版权

网络的基本知识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 物理层：源设备到目的设备 主要作用是传输比特流（就是由1、0转化为电流强弱来进行传输)-->
    <!-- 数据链路层 进行电信号的处理 进行数据的分组 一篇文章有多个标题 方便阅读 -->
    <!-- 网路层  进行数据包的传递 进行不同网络的选择 地图导航 负责规划路线找到最佳路线-->
    <!-- 传输层：数据包的传输 建立连接 保证数据不丢失 靠谱的快递员 不丢件 -->
    <!-- 会话层：建立连接 保持连接 关闭连接 谍战片中的接线员 -->
    <!-- 表示层：主要是进行对接收的数据进行解释、加密与解密、压缩与解压缩等 -->
    <!-- 应用层：qq 微信应用层 直接服务用户 比如餐厅的服务员 直接为用户提供网络服务 -->
    <!-- json 数据交换格式 -->
</body>
</html>

form表单的提交

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- action 要提交的地址 就是你请求的url -->
    <form action="提交的地址.html">
        <input type="text" name="username">
        <input type="text" name="password">
        <input type="submit">
    </form>
</body>
</html>

JOSN的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 对象是key:value
        // 对象是无序的键值对
        // JSON是一种数据交换格式
        var obj = {
            "name":"小明",
            "age":18
        }
        console.log(obj)
        // '{"name":"小明","age":18}'
        console.log('JSON.stringify(obj))
        console.log(JSON.parse('{"name":"小明","age":18}'))
    </script>
</body>
</html>

ajax的基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>

    <!-- ajax能在不刷新整个页面的情况下，实现局部更新 -->
    <!-- 前端要和后端进行通信 通过ajax 前后端的桥梁就是ajax -->
    <!-- 最终前端页面的数据要来源数据库 -->
    <!-- 我们就是通过ajax来与后台进行数据交互的 -->

    <script>
        document.querySelector('#app')

        // 定义一个实例化对象
        var xhr = new XMLHttpRequest();
        console.log(xhr);

        // 2.调用open方法填写你的请求方式和请求地址
        xhr.open('请求方式','请求地址')

        // 3.调用send方法发送请求
        xhr.send();

        // 4.监听请求状态
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200) {
                console.log('请求成功');
            }

        }
    </script>
</body>
</html>

get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // get请求可以直接在浏览器地址栏进行访问请求
        var xhr = new XMLHttpRequest();
        // http://localhost:3008/api/student/getStudent request URL
        xhr.open('get','http://localhost:3008/api/student/getStudent')
        xhr.send();
        xhr.onreadystatechange = function () {
            if(xhr.readyState==4){//请求完成
                if(xhr.status==200){//请求成功
                    console.log(JSON.parse(xhr.response))
                }
            }
        }
    </script>
</body>
</html>

post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // get请求一般用于查询 post一般用于提交数据
        var xhr = new XMLHttpRequest();
        // clazz班级 name 姓名  gender 性别 age 年龄 tel 电话 address 地址信息 remark 备注信息**
        xhr.open('post','http://localhost:3008/api/student/addStudent')
        // 设置传参的方式 设置请求头
        xhr.setRequestHeader('Content-Type','application/json')
        var obj={
            clazz:"123",
            name:'小明',
            gender:"男",
            age:18,
            tel:12345678900,
            address:"河南省郑州市",
            remark:"我是备注信息"
        }
        // 窗体格式
        // 设置请求头
        //  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
        xhr.send(JSON.stringify(obj))
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){//请求成功
            }
        }
    </script>
</body>
</html>

ajax是异步的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // ajax默认是异步的
        // js是单线程的
        // js代码是从上往下执行的

        setTimeout(function(){
            console.log('setTimeout')
        },2000)
        // var xhr = new XMLHttpRequest();
        // xhr.open('method','url',async)
        // xhr.open('get','http://localhost:3008/api/student/getStudent',false);
        // xhr.send();
        // console.log('xhr',xhr.response)
        // xhr.onreadystatechange = function(){
        //     if(xhr.readyState==4&&xhr.status==200){
        //         console.log('xhr',xhr.response)
        //     }
        // }
        console.log('小明')
        
    </script>
</body>
</html>

ajax的局部更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <input type="text" name="id" id="idValue">
        <button id="btn">搜索</button>
        <div class="content"></div>
    </div>
    <script>
        // 获取dom对象
        var btn = document.getElementById('btn')
        var idValue = document.getElementById('idValue')
        var content = document.querySelector('.content')
        // 绑定事件
        btn.onclick = function(){
            // 获取输入框的值
            var xhr = new XMLHttpRequest();
            xhr.open('get', 'http://localhost:3008/api/student/getStudent?id='+idValue.value);
            xhr.send()
            xhr.onreadystatechange = function () {
                if(xhr.readyState==4 && xhr.status==200){
                    console.log(xhr.response)
                    var data = JSON.parse(xhr.response)[0]
                    console.log(data)
                    content.innerHTML = `<span>${data.name}</span><span>${data.address}</span>`

                }
             }
        }
        
    </script>
</body>
</html>

跨域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css">
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.min.js"></script>
</head>
<body>
    <script>
        // 跨域是违背了浏览器的同源策略
        // 同源策略是浏览器的一种安全策略
        // 同源策略呢？协议 域名 端口号完全一样就是同源如果其中有任何一个
        // 不一样就违背同源策略就产生跨域了
        // 怎么去解决跨域
        // 生产环境一般跨域都是后台解决
        // 前端代码要放到服务器上
        // jsonp
        // jsonp解决跨域的原理就是利用script标签的src属性可以跨域+回调函数
        // 
        function fun(res){
            console.log(res)
        }
    </script>
    <script src="http://localhost:3008/api/student/jsonpdemo?callback=fun"></script>
</body>
</html>

获取响应头

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var xhr = new XMLHttpRequest();
        xhr.open('get','http://localhost:3008/api/student/getStudent')
        xhr.send();
        xhr.onreadystatechange = function(){
            if(xhr.readyState ==4 && xhr.status == 200){
                console.log(xhr.getAllResponseHeaders()); // 获取所有的响应头
                console.log(xhr.getResponseHeader('Content-Type'));
            }
        }
    </script>
</body>
</html>

封装ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/ajaxFun.js"></script>
</head>
<body>
    <script>
        var obj={
            clazz:"123",
            name:'小明',
            gender:"男",
            age:20,
            tel:12345678900,
            address:"河南省郑州市",
            remark:"我是备注信息"
        }
        postData('/api/student/addStudent',obj,function(res){
            console.log(res)
        })
        getData('/api/student/getStudent',{name:"小明",id:1715137103824},function(res){
            console.log(res)
        })
    </script>
</body>
</html>

柿子来了
关注
  • 22
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【Ajax-Servlet】第一课 员工管理系统-环境搭建
笔触狂放的博客
05-18 683
概念 本文结合前端ajax技术使用Json格式作为数据传输，与tomcat服务器Servlet做Http的网络交互。 需求分析 因公司扩大规模 现需要招聘100名员工 为了方便管理员工信 息需要开发一个系统进行管理 该项目主要需要实现如下功能： 1.完成添加新入职员工 2.根据现有的部门名称供用户进行选择，用户也能添加新的部门 3.展示员工信息列表 4.实现根据部门名称以及入职时间进行二级联动搜索新员工的信息 5.完成修改新员工的信息 6.完成删除新员工的信息 数据库设计 建立数据
【Ajax】HTTP相关问题-GET-POST-XHR使用-jQuery中的ajax-跨域-同源-jsonp-cors
热门推荐
YK菌的博客
02-23 3万+
文章目录1. Ajax概述1.1 AJAX 简介1.2 XML 简介1.3 AJAX 的特点1.3.1 AJAX 的优点1.3.2 AJAX 的缺点2. 原生AJAX 的基本使用2.0 准备工作2.1 核心对象2.2 使用步骤2.3 使用案例1. GET 请求设置请求参数2. POST请求2.4 解决IE 缓存问题2.5 AJAX 请求状态3. jQuery 中的AJAX3.1 get 请求3.2 post 请求4. 跨域4.1 同源策略4.2 如何解决跨域4.2.1 JSONP4.2.2 CORS 1.
Ajax--表单映射
BtWangZhi的博客
08-07 893
1 在表单序列化映射到后台实体对象中，走了蛮多弯路，特总结如下。 表单：&amp;lt;form id=&amp;quot;form01&amp;quot; enctype=&amp;quot;multipart/form-data&amp;quot;&amp;gt; &amp;lt;input type=&amp;quot;text&amp;quot; name=&amp;quot;name&amp
JQuery AJAX - NODEJS - Mysql 总结
yutiansut的博客
04-23 1383
【摘要】通过JQuery AJAX 对于服务器进行动态请求和页面刷新，nodejs搭建HTTP服务，中间件 路由跳转，后台和mysql交互，mysql存储着数据。 首先我们需要搭建一个http服务，使用简单的express建站npm install -g express npm install express-generator -g //新建一个目录 mkdir xxx //xxx只是路径名 cd
Ajax基础-01
weixin_30344131的博客
10-01 678
一. Ajax 1. 什么是ajax Ajax: asynchronous javascript and xml (异步js和xml)，其是可以与服务器进行(异步/同步)交互的技术之一。 ajax的语言载体是javascript。最大特点：页面不刷新 2. ajax出现的历史 1999年，微软公司发布IE5浏览器的时候嵌入的一种技术。起初名...
Web前端-AJAX知识总结思维导图
season_26的博客
03-14 355
自己根据教程整理的思维导图。
day44-Ajax-Json-课件-代码-总结
全力以赴烂口发_青春饭耗不起
09-03 232
黑马day44-Ajax-Json-课件-代码-总结： 学习总结：http://pan.baidu.com/s/1kUEwzQ3 内容：pdf课件(有详细笔记，标记重点)，代码。===项目03是 个onkeyup或onkeydown 输入提示   案例。
AJAX--URL--http、https、websocket协议、跨域
weixin_43750611的博客
09-13 1303
AJAXajax一. 客户端与服务器二. url地址2.1 概念：URL（全称是UniformResourceLocator）中文叫统一资源定位符，用于标识互联网上每个资源的唯一存放位置。浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。2.2 url地址的组成部分2.3 网页的打开过程 ***2.4 网页中如何请求数据三. ajax3.1 ajax优点3.2 ajax缺点3.3 ajax流程3.4 ajax提交数据到php服务器端3.4.1 准备工作3.4.2 get方式提交
2022-01-23总结
qq_63913514的博客
01-23 308
第六篇博客
ajax类AJAXRequest v0.8.01 2008-01-31 最新版附使用帮助
10-30
### AJAXRequest v0.8.01：一个轻量级的AJAX开发框架 #### 一、概述 AJAXRequest v0.8.01 是一个于2008年1月31日发布的轻量级AJAX应用程序开发框架。该版本作为最新版附带了详细的使用帮助文档，旨在帮助开发者更...
Labs-Project-01
02-18
总结来说，"Labs-Project-01"是一个很好的起点，让你深入了解网页开发的基本原理和实践技巧。通过这个项目，你将掌握如何构建一个从静态到动态的完整网页，并对HTML、CSS和JavaScript有深入的理解。记得实践中不断...
f01-weather
03-31
API调用通常会使用JavaScript，可能结合使用Ajax异步请求数据。 在`<body>`部分，HTML会创建各种元素来展示天气信息，例如： - **标题**：`<h1>`可以用来显示城市名和当前日期。 - **段落**：`<p>`用于展示温度、...
Project-01
03-08
在"Project-01-main"这个文件夹中，我们可以预见到包含项目的源代码文件，如HTML、CSS和JavaScript文件，以及可能的配置文件和测试脚本。开发者可以通过这些文件了解项目的整体架构和实现细节，从而学习如何用...
Testing-01
03-26
它构成了互联网上大部分页面的基础，让开发者能够...总结来说，"Testing-01"可能涵盖HTML的基本概念、语法规则、测试方法以及与CSS、JavaScript的协作等内容。理解和熟练掌握这些知识点对于任何Web开发者都至关重要。
26.10 Django Ajax异步提交
清风
08-18 1006
1.2 请求方式 1.3 表单属性 1.4 页面刷新 3. 异步提交 3.1 Ajax介绍 3.2 基础模板 3.3 使用示例 4.1 请求与响应 4.2 请求体编码 4.2.1 表单编码类型 4.2.2 表单URL编码 4.3.1 表单URL编码 4.4.1 纯文本类型
Ajax学习笔记
最新发布
小陈从不熬夜
08-21 589
Ajax学习笔记
http request-02-Ajax XHR 的替代方案-fetch 标准
08-18 827
从高层次来看，获取资源是一个相当简单的操作。请求发出，响应返回。然而，这一操作的细节相当复杂，过去通常没有被仔细记录，并且在不同的 API 之间有所不同。许多 API 提供了获取资源的能力，例如 HTML 的<img>和<script>元素，CSS 的cursor和，JavaScript 的和API。Fetch 标准提供了一个统一的架构，使这些功能在各种获取方面（如重定向和 CORS 协议）保持一致。Fetch 标准还定义了fetch()
Ajax基础案例
小陈从不熬夜
08-21 233
Ajax入门基础案例
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值