尚硅谷Ajax笔记

最新推荐文章于 2024-07-05 22:58:38 发布
最新推荐文章于 2024-07-05 22:58:38 发布
阅读量1.1k 收藏 2
点赞数 9
分类专栏： 前端 文章标签： ajax 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57780589/article/details/135894838
版权

一天拿下


b站链接

介绍

ajax优缺点
在这里插入图片描述
http

node.js下载配置好环境

express框架
切换到项目文件夹，执行下面两条命令
有报错,退出用管理员身份打开
或者再命令提示符用管理员身份打开

npm init --yes
npm i  express

请求

    <script>
        //引入express
        const express = require('express');
        //创建应用对象
        const app = express();

        //创建路由规则
        //request对请求报文的封装
        //response是对响应报文的封装
        app.get('/',(request,response)=>{
            //设置响应
            response.send('HELLO EXPRESS');
        });

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

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>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
   <button>点击发送请求</button>
   <div id = "result"></div>
   <script>
    const btn = document.getElementsByTagName('button')[0];
    btn.onclick=function(){
        // console.log('test');
        //创建对象
        const xhr = new XMLHttpRequest();
        const result = document.getElementById("result");
        //初始化 设置请求方法和url
        xhr.open('GET','http://127.0.0.1:8000/server');
        //发送
        xhr.send();
        xhr.onreadystatechange = function(){
            //判断（服务端返回了所有的结果）
            if(xhr.readyState === 4){
                if(xhr.status >=200 && xhr.status<300){
                    //响应行
                    /* console.log(xhr.status);//状态码
                    console.log(xhr.statusTest);//状态字符串
                    console.log(xhr.getAllResponseHeaders());//所有响应头
                    console.log(xhr.response); */

                    result.innerHTML = xhr.response;
                }else{

                }
            }
        }

    }
   </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>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById("result");
        //绑定事件
        result.addEventListener("mouseover",function(){
            //创建对象
            const xhr = new XMLHttpRequest();
            //初始化 设置类型与URL
            xhr.open('POST','http://127.0.0.1:8000/server');
            //发送
            xhr.send('1234567');
            //事件绑定
            xhr.onreadystatechange = function(){
                //判断
                if(xhr.readyState === 4){
                    if(xhr.status>=200 && xhr.status<300){
                        //处理服务端返回结果
                        result.innerHTML=xhr.response;
                    }
                }
            }
        })
    </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 EXPRESS');
});
app.post('/server',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('HELLO AJAX POST');
});

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

设置请求头

//设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
              xhr.setRequestHeader('name','atguigu');
            //发送
            xhr.send('a=100 & b=200 &c=300');

在这里插入图片描述

app.all('/server',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    response.setHeader('Access-Control-Allow-Hearders','*')
    //设置响应体
    response.send('HELLO AJAX POST');
});

json数据响应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #90b;
        }
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        const result = document.getElementById("result");
        //绑定事件
        window.onkeydown = function(){
       
            //创建对象
            const xhr = new XMLHttpRequest();
            //设置响应体数据类型
            xhr.responseType = 'json';
            //初始化 设置类型与URL
            xhr.open('GET','http://127.0.0.1:8000/json-server');
            //设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.setRequestHeader('name','atguigu');
            //发送
            xhr.send();
            //事件绑定
            xhr.onreadystatechange = function(){
                //判断
                if(xhr.readyState === 4){
                    if(xhr.status>=200 && xhr.status<300){
                        console.log(xhe.response);
                        //处理服务端返回结果
                        result.innerHTML=xhr.response.name;
                    }
                }
            }
        }
    </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.all('/server',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    response.setHeader('Access-Control-Allow-Hearders','*')
    //响应一个数据
    const data = {
        name:'atguigu'
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});

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

nodemon
有报错，退出软件用管理员身份打开

npm install -g nodemon

nodemon server.js

ie缓存

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

        btn.addEventListener('click',function(){
            // console.log('test');
            const xhr = new XMLHttpRequest();
            xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now());
            xhr.send();
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >=200 && xhr.status<300){
                        result.innerHTML = xhr.response;
                    }
                }
            }
        })
    </script>

//引入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.all('/server',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    response.setHeader('Access-Control-Allow-Hearders','*')
    //响应一个数据
    const data = {
        name:'atguigu'
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});

app.all('/json-server',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    response.setHeader('Access-Control-Allow-Hearders','*')
    //响应一个数据
    const data = {
        name:'atguigu'
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    //设置响应体
    response.send(str);
});

app.get('/ie',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send('HELLO IE');
});
//监听端口启动服务
app.listen(8000,()=>{
    console.log("服务已经启动，8000端口监听中……");
});

超时与网络异常

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

        btn.addEventListener('click',function(){
            // console.log('test');
            const xhr = new XMLHttpRequest();

            //超时
            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.get('/delay',(request,response)=>{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    setImmeout(()=>{
 //设置响应体
 response.send('延时响应');
    },3000);
   
});

取消请求


<!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>
    <button>点击登录</button>
    <button>点击取消</button>
    <script>
        const btns = document.querySelectorAll('button');
        let x =null;

        btns[0].onlick = function(){
            x=new XMLHttpRequest();
            x.open("GET",'http://127.0.0.1:8000/delay');
            x.send();
        }

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

请求重复发送问题

<script>
        const btns = document.querySelectorAll('button');
        let x =null;

        btns[0].onlick = 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;
                }
            }
        }

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

怎么感觉学的迷迷糊糊的……
emo中

我还会回来的……

二级目录

三级目录

佳美不ERROR
关注
  • 9
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【ajax】0.b站-尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版） 笔记
weixin_43210113的博客
12-04 574
〇、前情提要 参考： b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版） https://www.bilibili.com/video/BV1WC4y1b78y?p=2 笔记视频链接 链接：https://pan.baidu.com/s/1Wnwb42-AaqAlg6cQ0PRHwg 提取码：3waj 【ajax】HTTP协议+Chrome网络控制台查看POST、GET通信报文 https://blog.csdn.net/weixin_43210113/a
~【笔记】尚硅谷Ajax笔记~
weixin_55935744的博客
11-02 1508
点击通往->尚硅谷Ajax视频. 尚硅谷Ajax笔记 & 目录：
尚硅谷Ajax笔记（word）
01-10
尚硅谷ajax视频课程同步笔记绝对是可以使用的哦，这个是自己总结的笔记
尚硅谷ajax学习记录（一）
m0_56685529的博客
04-28 546
尚硅谷ajax学习
npm使用介绍
xidianzxm
12-06 282
1、npm介绍 NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种： 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。 由于新版的nodejs已经集成了npm，所以之前npm也一并安装好...
AJAX学习笔记-B站尚硅谷视频
m0_54281014的博客
01-08 142
ajax基础学习笔记
AJAX尚硅谷学习笔记
qq_45005416的博客
05-11 712
尚硅谷AJAX学习笔记
ajax尚硅谷笔记——跨域请求、axios发送ajax请求、jquery发送ajax请求
weixin_53317758的博客
11-21 2049
script标签作为函数被服务调用，其中加上该函数的参数作为用户需要看到的数据内容
尚硅谷_Ajax
11-12
Ajax的技术的产生 Ajax被认为是(Asynchronous JavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. “Ajax”这个名字是在2005年2月，Adaptive Path的Jesse James Garrett在他的文章Ajax:A New Approach to Web Application中创造。 而Ajax这项技术，是Google在Google Labs发布Google Maps和Google Suggest后真正为人所认识。
尚硅谷_教学课件_Ajax
05-11
在"尚硅谷_教学课件_Ajax"这个课程中，将全面介绍Ajax的核心概念、工作原理以及实际应用。 ### 1. Ajax核心概念 Ajax并非一种单一的技术，而是一组用于创建动态和交互性网页的技术集合，主要包括以下几个方面： -...
Java Web 教程-尚硅谷学习笔记 2022 年
08-03
《Java Web教程——尚硅谷学习笔记 2022年》是针对Java Web开发的一份详细教程，旨在帮助学习者掌握这一领域的核心概念和技术。这份资料涵盖了从基础到进阶的多个方面，包括了Java Web开发的基础知识、核心技术以及...
springMVC相关笔记
06-30
在本笔记中，我们将深入探讨如何使用 Spring MVC 实现“Hello, World!”程序以及如何在其中进行值传递。 1. **Spring MVC 架构** Spring MVC 采用分层架构，包括 DispatcherServlet、Controller、Model、View 和 ...
(尚硅谷)javaweb学习笔记----------ajax部分
weixin_52618349的博客
09-13 316
AJAX请求 什么是AJAX请求 AJAC即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 ajax是一种浏览器通过js异步发起请求。局部更新页面的技术。 例： 建立BaseServlet类： 再建立一个AjaxServlet类继承BaseServlet类 最后建立ajax.html 点击按钮： Ajax...
Vue.js尚硅谷视频学习笔记(第三章：vue-ajax)
canxuezhang的博客
02-27 617
Vue，热门框架学习。
尚硅谷ajax视频教程2
weixin_33933118的博客
04-19 254
7、7. 尚硅谷_佟刚_Ajax_典型应用_验证用户名是否可用 整个项目的目录路径如下所示 我们首先新建立一个web工程，在webroot下面新建立一个script的文件夹，导入jquer文件 接下来我们编写index.jsp文件，通过ajax的方式校验该用户名是否在后台已经被注册 index.jsp文件内容如下所示： <%@ page language="java" im...
jQuery第二天
毕富国的博客
08-05 187
CSS模块 style样式 css(styleName): 根据样式名得到对应的值 css(styleName, value): 设置一个样式 css({多个样式对}): 设置多个样式 位置坐标 offset(): 读/写当前元素坐标(原点是页面左上角) position(): 读当前元素坐标(原点是父元素左上角) scrollTop()/scrollLeft(): 读/...
20231109-【尚硅谷】3小时Ajax入门到精通学习笔记
qq_44887198的博客
11-15 518
文章目录1、安装NodeJS2、Express框架AJAX发送GET请求AJAX发送POST请求设置请求头信息服务端响应JSON数据安装自动重启服务端工具解决IE缓存问题请求超时与网络异常（xhr.timeout = 2000;）取消请求（xhr.about();）解决请求重复发送问题jQuery发送AJAX请求Axios发送AJAX请求使用fetch函数发送AJAX请求原生JSONPjQuery发送JSONP请求 1、安装NodeJS 【官网链接】安装一直点下一步就行了 验证是否安装成功： ① win +
AJAX-day1：
最新发布
2303_79590957的博客
07-05 1109
AJAX是浏览器与服务器进行数据通信的技术 =>把数据变活。
尚硅谷 vue2 笔记
06-20
### 回答1： 尚硅谷的Vue2笔记是学习Vue技术的好帮手。这份笔记详细地介绍了Vue的基本概念和使用方法，包括Vue的属性、指令、事件、计算属性、过滤器、组件等等。通过阅读这份笔记，我们可以了解Vue的整个生命周期，并且学习如何在Vue中绑定数据、响应事件、使用组件化等等。另外，笔记中也提到了Vue的MVVM模式、路由、状态管理、Ajax等进阶使用方法，以及Vue的一些注意点和优化技巧，这些非常实用且有助于深入学习和应用Vue技术。 总体来说，尚硅谷的Vue2笔记内容丰富、清晰易懂，适合初学者和中级开发者使用，是学习Vue技术的一份不错资料。需要注意的是，笔记中的代码及部分内容可能存在过时和不准确的情况，需要和Vue官方文档及其他权威资料进行比较和验证。 ### 回答2： 尚硅谷的Vue2笔记是一份非常全面和深入的Vue学习资料，它涵盖了Vue框架的基本概念和重要特性，包括Vue的组件化开发、指令、路由、Vuex状态管理、axios网络请求等。该笔记不仅注重理论知识的讲解，而且注重实战应用。它提供了大量的示例代码和练习项目，帮助学习者理解和掌握Vue的核心概念和技术。 在Vue2笔记中，作者从Vue的基本概念和MVVM架构模式开始讲解，然后逐步深入介绍了Vue的各种特性和用法，如组件、生命周期、计算属性、watch、事件处理、槽位、指令等等。特别是在组件化开发方面，作者详细介绍了组件之间的通信方式、props和$emit的使用、slot插槽的应用等等，这些都是Vue组件化开发中非常重要的概念。 除了组件化开发之外，Vue2笔记还详细介绍了Vue的路由、状态管理和网络请求等其他关键特性。在路由方面，作者讲解了Vue-Router的基本使用和路由守卫的应用，让学习者能够掌握Vue应用的页面导航和权限控制。在状态管理方面，作者讲解了Vuex的设计思想和使用方法，使学习者能够在复杂的应用中更好地管理和共享状态。在网络请求方面，作者介绍了axios库的使用和封装方法，帮助学习者更好地理解Vue应用中的数据请求和展示。 总的来说，尚硅谷Vue2笔记对于学习Vue框架的人来说是一份非常优秀的教材。它详细介绍了Vue的各个方面，并提供了丰富的练习项目，帮助学习者更好地掌握Vue的核心技术和应用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

佳美不ERROR

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值