Ajax学习记录

最新推荐文章于 2024-07-25 12:41:07 发布
最新推荐文章于 2024-07-25 12:41:07 发布
阅读量71 收藏
点赞数
文章标签： ajax js java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45780686/article/details/108392383
版权

一、GET请求

先创建一个js文件

//引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/', (request, response)=>{
    //设置响应头
    //设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('Hello express');
});
//监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动，8000端口监听中。");
});

再创建一个html文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ajax</title>
    </head>
    <style>
        #view{
            width: 100px;
            height:100px;
            border:1px solid #60add5;
        }
    </style>

    <body>
        <div id="view">
        </div>
        <button>request</button>
        <script>
            const btn = document.getElementsByTagName('button')[0];
            btn.onclick = function(){
                //创建对象
                const xhr = new XMLHttpRequest();
                //初始化，设置请求方法和url
                xhr.open('GET', 'http://127.0.0.1:8000');
                //发送
                xhr.send();
                //实践绑定，处理服务端返回的结果
                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);  //响应体
                            view.innerHTML = xhr.response;
                        }
                    }
                }
            }
        </script>
    </body>
</html>

二、POST请求

先创建一个js文件

//引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/', (request, response)=>{
    //设置响应头
    //设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('Hello express get');
});
app.post('/', (request, response)=>{
    //设置响应头
    //设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('Hello express post');
});
//监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动，8000端口监听中。");
});

再创建一个HTML文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ajax</title>
    </head>
    <style>
        #result{
            width: 200px;
            height:200px;
            border:1px solid #60add5;
        }
    </style>

    <body>
        <div id="result"></div>
        <script>
            result = document.getElementById("result");
            result.addEventListener("mouseover", function(){
                //创建对象
                const xhr = new XMLHttpRequest();
                //设置请求方法和url
                xhr.open("POST", "http://127.0.0.1:8000");
                //发送
                xhr.send();
                //事件绑定
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        if(xhr.status >= 200 && xhr.status < 300){
                            //处理服务端返回的结果
                            result.innerHTML = xhr.response;
                        }
                    }
                }
            });
        </script>
    </body>
</html>

最后文件

js文件

//引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装

// app.all('/', (request, response)=>{
//     //设置响应头
//     //设置允许跨域
//     response.setHeader('Access-Control-Allow-Origin', '*');
//     //设置响应数据
//     const data = {
//         name : "LaoWang",
//         age : "100"
//     };
//     let str = JSON.stringify(data);
//     //设置响应体
//     response.send(str);
// });


app.get('/server', (request, response)=>{
    //设置响应头
    //设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    response.setHeader('Access-Control-Allow-Method', '*');
    //设置响应体
    setTimeout(()=>{
        response.send('延时响应');
    }, 3000);

});

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


//监听端口启动服务
app.listen(8000, ()=>{
    console.log("服务已经启动，8000端口监听中。");
});
  • 在终端中输入 nodemon Ajax.js可开启服务

html 文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ajax</title>
    </head>
    <style>
        #result{
            width: 200px;
            height:200px;
            border:1px solid #60add5;
        }
    </style>

    <body>
        <div id="result"></div>
        <button>点击发送</button>
        <button>点击取消</button>
        <script>
            result = document.getElementById("result");
            btn = document.getElementsByTagName('button');

            result.addEventListener("click", function(){
                //创建对象
                const xhr = new XMLHttpRequest();
                //设置响应体数据类型
                //xhr.responseType = 'json';
                //超时设置 2s
                xhr.timeout = 2000;
                //超时回调
                // xhr.ontimeout = function(){
                //     alert("请求超时，请稍后再试！");
                // };
                //网络异常回调
                xhr.onerror = function(){
                    alert("网络异常！");
                };
                //设置请求方法和url
                xhr.open("POST", "http://127.0.0.1:8000/server");
                //发送
                xhr.send();
                //事件绑定
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        if(xhr.status >= 200 && xhr.status < 300){
                            //处理服务端返回的结果
                            result.innerHTML = xhr.response;
                        }
                    }
                }
            });

            window.onkeydown = function(){
                const xhr = new XMLHttpRequest();
                //xhr.responseType = "json";
                xhr.timeout = 2000;
                // xhr.ontimeout = function(){
                //     alert("请求超时，请稍后再试！");
                // };
                xhr.onerror = function(){
                    alert("网络异常！");
                };
                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){
                            result.innerHTML = xhr.response;
                        }
                    }
                }
            }

            let x = null;
            let isSending = false;
            btn[0].onclick = function(){
                if(isSending)
                    x.abort();    //如果已经有一个请求，就把它取消，再创建一个新的请求
                x = new XMLHttpRequest;
                isSending = true;
                x.open("GET", "http://127.0.0.1:8000/server");
                x.send();
                x.onreadystatechange = function(){
                    if(x.readyState === 4){
                        isSending = false;
                        if(x.status >= 200 && x.status < 300){
                            result.innerHTML = x.response;
                        }
                    }
                }
            }

            btn[1].onclick = function(){
                x.abort();
            }
        </script>
    </body>
</html>
一支万宝路
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax学习
weixin_43391584的博客
06-30 92
Ajax Ajax = Asychronous JavaScript and XML（异步的JavaScript和XML） Ajax不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术 格式：$.ajax({}); 参数： type：请求方式GET/POST url：请求地址url async：是否异步，默认是true表示异步 data：发送到服务区的数据 dataType：预期服务器返回的数据类型 contentType：设置请求头 success：请求成功时调用此函数
Ajax学习笔记
2301_82244607的博客
04-28 945
XMLHttpRequest()：创建 XHR 对象的构造函数status：响应状态码值，如 200、404statusText：响应状态文本，如 ’ok‘、‘not found’readyState：标识请求状态的只读属性 0-1-2-3-4onreadystatechange：绑定 readyState 改变的监听responseType：指定响应数据类型，如果是 ‘json’，得到响应后自动解析响应response：响应体数据，类型取决于 responseType 的指定。
史上最详细Ajax学习笔记
楠黎倾风的博客
09-19 7952
史上最强Ajax学习笔记
ajax学习记录
weixin_45090728的博客
03-13 93
ajax学习
ajax学习笔记
11-30
ajax学习笔记。。。。。。。。。。。。。。。。。。。。。。
Ajax学习笔记整理
10-22
Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据
16ajax学习笔记1
08-08
在本篇16ajax学习笔记1中，我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求： Ajax的首要任务是创建XMLHttpRequest对象，这是浏览器提供的API。在JavaScript中，我们可以通过new ...
jQuery+AJAX学习笔记
10-10
jQuery+AJAX学习笔记
快速入门了解Ajax
最新发布
音符犹如代码的博客
07-25 559
上面是一个原生的Ajax的一个写法，但是原生的Ajax太繁琐甚至还有浏览器不兼容的问题，所以现在都是基于原生的Ajax的Axios。意义：AJAX（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML。介绍：Axios是简化的Ajax，对传统的Ajax操作的简化和改进，也是一个更强大和便捷的http请求处理的工具。下边是两个来自官网的post的请求和get请求的代码。
AjaX 数据爬取
qq_39217312的博客
07-25 492
Ajax 全称： Asynchronous JavaScript and XML , 即异步的 JavaScript 和 XML， 它不是一门编程语言，而是利用 JavaScript 在保证页面不被刷新，页面链接不改变的情况下与服务器交换数据，并更新部分网页内容的技术对于传统网页，如果想要更新内容，就必须刷新整个页面， 但有了 Ajax ，可以在页面不被全部刷新的情况下更新。这个过程实际是页面在后台与服务器进行了数据交互，获取数据后，在利用 JavaScript 改变网页，这样网页内容就会更新了。
Web开发：ASP.NET CORE中前端使用Ajax定时获取后端数据
m0_67412019的博客
07-22 290
给a标签每15s刷新一次，显示最新的时间（时间必须由后端获取） 应该如何操作呢。
大数据学习之sparkstreaming
m0_58050808的博客
07-22 770
指令：spark-submit --master yarn --deploy-mode client --class com.shujia.streaming.Demo6YarnSubmit spark-1.0.jar。Option: 当前批次输入键对应的value值，如果历史中没有该键，这个值就是None, 如果历史中出现了这个键，这个值就是Some(值)2、有状态算子使用的时候，需要提前设置checkpoint的路径，因为需要将历史批次的结果存储下来。
12. Hibernate 模板设计模式
这是一个web全栈开发的博客，取其精华去其糟粕，争取让大家一看就懂，一学就会，一用就成~
07-22 1186
如何运用模板设计模式重构 Hibernate 操作流程；持久化对象与序列化接口；OOP中有一个编码原则 ：写仅写一次。翻译过来就是，不要重复，要重用。答案是：使用模板设计模式进一步封装Hibernate的操作。在真实项目中，Hibernate仅仅只是完成项目中的一部分工作，需要和其它，如Spring等框架联合工作，一起承担整体项目的开发。Spring框架中就提供的有Hibernate模板对象。一个常规的、频繁的操作代码中，大部分代码不需要变动，只有小部分代码需要根据需求变动。
Java-Lambda
lizhiwei21的博客
07-21 479
lambda表达式可以理解为对匿名内部类的一种简化 , 但是本质是有区别的面向对象思想 :强调的是用对象去完成某些功能函数式编程思想 :强调的是结果 , 而不是怎么去做。
Java读取文件中多个JSON对象，并且16进制字符串和byte相互转换，将byte转为16进制字符串并写入json文件
weixin_43561432的博客
07-24 237
【代码】Java读取文件中多个JSON对象，并且16进制字符串和byte相互转换，将byte转为16进制字符串并写入json文件。
淘客返利系统中的服务发现与注册机制详解
技术研究中心
07-22 1942
通过服务注册中心，服务提供者可以将自己注册到注册中心，服务消费者可以从注册中心获取服务提供者的地址，以实现服务调用。本文详细介绍了淘客返利系统中服务发现与注册机制的实现，包括Eureka的配置与代码示例。通过Eureka，我们可以轻松实现服务的注册与发现，确保分布式系统中各个服务之间的通信。在本文中，我们将深入探讨淘客返利系统中的服务发现与注册机制，并结合Java代码进行详细讲解。在我们的淘客返利系统中，我们采用Eureka作为服务发现与注册的工具。在我们的淘客返利系统中，首先需要配置Eureka服务器。
Java实现拼图小游戏
Aishangyuwen的博客
07-22 1330
Java实现拼图小游戏
华为OD机试 - 分披萨 - 递归（Java 2024 D卷 200分）
学Java，找哪吒
07-21 997
递归算法通过函数调用自身解决问题，每次递归调用都处理问题的一个子部分，直到达到基准条件，从而构建最终解。
Ajax学习笔记pink老师
07-29
您好！对于学习Ajax，我可以为您提供一些学习笔记。以下是一份简要的Ajax学习笔记，希望对您有所帮助： 1. 什么是Ajax？ - Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web应用程序的技术。 - 它通过在后台与服务器进行数据交换，实现在不刷新整个页面的情况下更新部分页面内容。 2. Ajax的优点： - 异步处理：可以在后台发送和接收数据，而无需刷新整个页面。 - 提高用户体验：通过部分更新页面内容，可以提供更快的响应时间和更流畅的用户体验。 - 减轻服务器负担：只更新需要的部分内容，减少了不必要的数据传输和服务器负载。 3. Ajax的基本原理： - 使用XMLHttpRequest对象向服务器发送请求，并接收响应。 - 通过JavaScript在前端处理响应数据。 - 更新页面内容，以显示最新的数据。 4. Ajax的核心技术： - XMLHttpRequest对象：用于与服务器进行数据交换。 - JavaScript：用于处理响应数据和更新页面内容。 - XML或JSON：用于传输数据格式。 5. Ajax的使用步骤： - 创建XMLHttpRequest对象。 - 定义请求类型、URL和是否异步。 - 发送请求并接收响应。 - 处理响应数据并更新页面内容。 6. 常见的Ajax框架和库： - jQuery：一个流行的JavaScript库，提供了简化Ajax开发的方法和函数。 - Axios：一个基于Promise的HTTP客户端，用于浏览器和Node.js。 - Fetch API：一种用于发送和接收网络请求的新标准。 这只是Ajax学习的一些基本概念和步骤，您可以进一步深入学习Ajax的相关知识和实践。希望这些笔记对您有所帮助！如有更多问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值