【Ajax】笔记-Ajax案例准备与请求基本操作

这篇具有很好参考价值的文章主要介绍了【Ajax】笔记-Ajax案例准备与请求基本操作。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

案例准备HTML

按钮+div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX GET 请求</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
</body>
</html>

Server.js

服务端简单修改:路由规则:/server 结尾的请求。

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

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

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应体
    response.send('HELLO AJAX - 2');
});

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

请求的基本操作

点击按钮请求服务器把响应体返回到div中。
修改HTML

    <script>
        //获取button元素
        const btn = document.getElementsByTagName('button')[0];
        const result = document.getElementById("result");
        //绑定事件
        btn.onclick = function(){
            //1. 创建对象
      
            const xhr =new XMLHttpRequest();
            //2. 初始化 设置请求方法和 url
            xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
         
            //3. 发送
            xhr.send();
            //4. 事件绑定 处理服务端返回的结果
            // on  when 当....时候
            // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
            // 0.未初始化 1.open 执行完毕 2.send 执行完毕 3.服务端返回部分结果 4.服务端返回全部结果
            // change  改变
            xhr.onreadystatechange = function(){
                //判断 (服务端返回了所有的结果)
                if(xhr.readyState === 4){
                    //判断响应状态码 200  404  403 401 500
                    // 2xx 成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        //处理结果  行 头 空行 体
                        //响应 
                        console.log(xhr.status);//状态码
                        console.log(xhr.statusText);//状态字符串
                        console.log(xhr.getAllResponseHeaders());//所有响应头
                        console.log(xhr.response);//响应体
                        //设置 result 的文本
                        result.innerHTML = xhr.response;
                    }else{

                    }
                }
            }


        }
    </script>

启动服务

node server.js
【Ajax】笔记-Ajax案例准备与请求基本操作,# Ajax,ajax,okhttp,前端

请求服务端

【Ajax】笔记-Ajax案例准备与请求基本操作,# Ajax,ajax,okhttp,前端【Ajax】笔记-Ajax案例准备与请求基本操作,# Ajax,ajax,okhttp,前端
请求参数
【Ajax】笔记-Ajax案例准备与请求基本操作,# Ajax,ajax,okhttp,前端文章来源地址https://www.toymoban.com/news/detail-556493.html

到了这里,关于【Ajax】笔记-Ajax案例准备与请求基本操作的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 正则表达式、grep过滤工具、sed基本用法、sed基本操作指令、sed应用案例

    1.1 问题 本案例要求熟悉正则表达式的编写,完成以下任务: 利用grep或egrep工具练习正则表达式的基本用法 1.2 方案 表-1 基本正则列表 表-2 扩展正则列表 1.3 步骤 实现此案例需要按照如下步骤进行。 步骤一:正则表达式匹配练习 1)基本正则表达式 测试 ^ $ [] [^] 测试 .

    2024年01月24日
    浏览(86)
  • Spark—通过Java、Scala API实现WordCount案例的基本操作

    实验原理 Spark的核心就是RDD,所有在RDD上的操作会被运行在Cluster上,Driver程序启动很多Workers,Workers在(分布式)文件系统中读取数据后转化为RDD(弹性分布式数据集),然后对RDD在内存中进行缓存和计算。 而RDD有两种类型的操作 ,分别是Action(返回values)和Transformations(

    2024年02月15日
    浏览(43)
  • Git基本操作笔记

            Git在我们日常工作中是必不可少的,刚入职的实习生可能只要会安装git、git clone,git pull 即可,git安装的教程有很多我就不一一讲述了。         Windows安装教程请访问此博主的链接 Git安装教程-window版本 · 语雀 在平常开发中,我们肯定需要用到git,这里我给大

    2024年02月02日
    浏览(48)
  • 【笔记】OpenCV图像基本操作

    目录 一、图像属性 1.1图像格式 1.2图像尺寸 1.3图像分辨率和通道 1.4图像直方图 1.5图像颜色空间 二、基本操作 2.1 图像读取 cv2.imread() 2.2 图像的显示 cv2.imshow() 2.3 图像的保存 cv2.imwrite() 2.4 用matplotlib显示图像 plt.imshow() 2.5 视频读取 cv2.VideoCapture() 2.6 图像截取、颜色通道提取

    2024年02月03日
    浏览(505)
  • Blender笔记之基本操作

    code review!                                                                                                                                   —— 2024-04-27 杭州                                                                                  B

    2024年04月28日
    浏览(29)
  • Linux学习笔记——基本操作命令

      Linux 操作系统的 Shell 作为操作系统的外壳,为用户提供使用操作系统的接口。它是命令语言、命令解释程序及程序设计语言系统。   Shell 是用户和 Linux 内核之间的接口程序,如果把 Linux 内核想象成一个球体的中心,Shell 就是围绕内核的外层。当从 Shell 或其他程序向

    2024年03月12日
    浏览(70)
  • 王道操作系统学习笔记(1)——操作系统基本概念

    本文介绍了操作系统的基本概念,文章中的内容来自B站王道考研操作系统课程,想要完整学习的可以到B站官方看完整版。 操作系统:系统资源的管理者(处理机管理、存储器管理、文件管理、设备管理) 交互式命令(在终端中输命令)和批处理命令(Shell脚本) 并发: 宏

    2024年02月10日
    浏览(52)
  • 黑马大数据学习笔记2-HDFS基本操作

    https://www.bilibili.com/video/BV1WY4y197g7?p=26 切换到hadoop用户 Hadoop HDFS组件内置了HDFS集群的一键启停脚本。 $HADOOP_HOME/sbin/start-dfs.sh,一键启动HDFS集群 执行原理: 在执行此脚本的机器上,启动SecondaryNameNode 读取core-site.xml内容(fs.defaultFS项),确认NameNode所在机器,启动NameNode 读取

    2024年02月16日
    浏览(41)
  • Unity | HDRP高清渲染管线学习笔记:基本操作

    目录 一、场景整体环境光强度 1.HDRI Sky 2.Shadows 二、屏幕后处理效果(Post Processing) 1.Exposure 2.Post-processing/Tonemapping 三、抗锯齿 四、添加光源 1.Light Explorer窗口 2.光照探针组 3.反射探针 4.烘焙光照贴图 本文主要是了解HDRP基本操作: 如何为一个已经摆放好模型的场景添加环境光等

    2024年02月16日
    浏览(65)
  • stata学习笔记(一)stata入门与基本操作

    这里开个新坑,主题有关stata使用以及定量分析入门,主要内容来自于之前与之后的课程学习、作业以及资料查询整理,主要目的是对个人学习过程的一个记录,方便日后回顾。 方法1:点击文件选项,选择导入,根据数据类型选择即可; 方法2::点击进入数据编辑器界面,点

    2024年02月21日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包