1 const { request, response } = require('express');

 2 //引入express

 3 const express = require('express');

 4 //创建对象

 5 const app=express();

 6 //创建路由规则

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

 8     //设置响应头   设置允许跨域

 9     response.setHeader('Access-Control-Allow-Origin','*');

10     //设置响应体

11     response.send('send rexpress');

12 });

13 //监听端口启动服务

14 app.listen(8000,()=>{

15     console.log("服务已经启动,8000端口监听中....");

16 })
 1 <html>

 2     <head>

 3         <meta charset="utf-8"/>

 4         <title>ajax初学基础案例</title>

 5         <style type="text/css">

 6             #result{

 7                 width: 200px;

 8                 height: 200px;

 9                 border: 1px solid red;

10             }

11         </style>

12     </head>

13     <body>

14         <button>点击发送请求</button>

15         <div id="result"></div>

16

17         <script>

18             //dom获取元素

19             const btn=document.getElementsByTagName("button")[0];

20             const result=document.getElementById("result");

21

22             //绑定单击事件

23             btn.onclick=function(){

24                 //创建对象

25                 const xhr=new XMLHttpRequest();

26                 //初始化请求方法和url  http://不要省略

27                 xhr.open('GET','http://127.0.0.1:8000/server');

28                 //发送

29                 xhr.send();

30                 //事件绑定 处理返回的结果

31                 xhr.onreadystatechange=function(){

32

33                     if(xhr.readyState===4){

34                         //判断响应状态码

35                         if(xhr.status>=200 && xhr.status<300){

36

37                             //设置result的文本

38                             result.innerHTML=xhr.response;

39                         }else{

40

41                         }

42                     }

43                 }

44             }

45         </script>

46     </body>

47

48 </html>
 
成功运行，过程中有几处疏漏拼错.但奇怪的是js部分第一次并没有写入 const result=document.getElementById("result");
但还是成功将result.innerHTML=xhr.response执行了。不知道是什么原因。
 
post请求: 需要在js中加上

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

2     //设置响应头   设置允许跨域

3     response.setHeader('Access-Control-Allow-Origin','*');

4     //设置响应体

5     response.send('send post rexpress');

6 });

然后：

<script>

            //dom获取元素

            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();

                //事件绑定

                xhr.onreadystatechange=function(){

                    //判断

                    if(xhr.readyState===4){

                        if(xhr.status>=200&&xhr.status<300){

                            result.innerHTML=xhr.response;

                        }else{

                        }

                    }

                }

            });

        </script>
大致了解，需要多使用
 

AJAX请求的基本操作的更多相关文章

  1. js对WebApi请求的基本操作

    在WebAPI对外提供的,大概有4种接口,get,post,delete,put,现在,我就简单的来说一下js请求webApi的方式和大概的作用: get:在webApi中,get方法通常是用来获取数 ...

  2. <day001>存储到Mysql、mongoDB数据库+简单的Ajax请求+os模块+进程池+MD5

    任务1:记住如何存储到Mysql.mongoDB数据库 ''' 存储到Mysql ''' import pymysql.cursors class QuotePipeline(object): def ...

  3. 一步步学习javascript基础篇（9）：ajax请求的回退

    需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...

  4. 配置Chrome支持本地（file协议）的AJAX请求

    什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击 ...

  5. JQuery使用deferreds串行多个ajax请求

    使用JQuery对多个ajax请求串行执行. HTML代码: <a href="#">Click me!</a> <div></div&g ...

  6. ajax请求成功后打开新开窗口(window.open())被拦截的解决方法

    问题:今天在做项目时需要在ajax请求成功后打开一个新的窗口,此时遇到浏览拦截了新窗口的问题,尝试在ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('clic ...

  7. 关于ajax请求，在参数中添加时间戳的必要性

    之前做项目的时候,看到别人的前端ajax请求代码中,都会带有一个时间戳类型的参数,当时随便查了一下,是为了防止浏览器缓存的原因,所以也没有进行深究,每次写的时候也习惯性的带一个,最近新项目中,我发现好 ...

  8. SpringMVC下Ajax请求的方法，@Responsebody如果返回的是布尔值，ajax不会接到任何回传数据

    SpringMVC框架下,如果用ajax向后台请求得方法如果使用@Responsebody返回布尔值的话,ajax得不到任何的回传数据. 但是如果返回String类型,就是正常的. 测试了下代码写得没 ...

  9. 【学习篇：他山之石，把玉攻】Ajax请求安全性讨论

    在开发过程中怎样考虑ajax安全及防止ajax请求攻击的问题. 先上两段网摘: Ajax安全防范的方法: 判断request的来源地址.这样的方式不推荐,因为黑客可以更改http包头,从而绕过检测. ...

  10. jQuery Ajax请求（关于火狐下SyntaxError: missing ] after element list ajax返回json，var json = eval("("+data+")"); 报错）

    $.ajax({    contentType: "application/x-www-form-urlencoded;charset=UTF-8" ,    type: &quo ...

随机推荐

  1. js原型,继承

    javascript是为了成为轻量级的语言而开发的.开发者并没有选择像其他面向对象的语言一样,定义类(class),而是使用了protopype实现继承. 每一个函数在创建时,都会创建它的Protot ...

  2. （K8s学习笔记三）创建Namespace

    Namespace(命名空间)很多情况下用于实现多租户的资源隔离.Namespace通过将集群内部的资源对象"分配"到不同的Namespace中,形成逻辑上分为不同项目.小组或用户 ...

  3. 平台总线模型（注册设备、注册驱动、编写probe函数）

    平台总线模型概念 注册platform设备 struct platform_device结构体 platform_device_register() platform_device_unregiste ...

  4. 更改svn地址

    svn修改了服务器地址之后,本地要更新一下地址: 1. 在svn目录上右键,选TortoiseSVN->Relocate 2. 在To URL中填写新的地址,点击OK

  5. MySQL_demo_50道习题

    title: MySQL_demo_50道习题 author: 杨晓东 permalink: MySQL_demo date: 2021-10-02 11:27:04 categories: - 投篮 ...

  6. 实践：基于腾讯云播放器SDK，带您体验播放多场景下的 COS 视频文件

    一. 实践步骤 1. 准备您的 腾讯云COS 视频文件链接,您需要: 1.1 创建一个存储桶: 1.2 上传对象: 1.3 在对象信息详情里复制对象地址: 注意: 目前腾讯云有COS特惠活动,新人1元 ...

  7. Android studio学习笔记1

    Android studio学习笔记1 20201303张奕博 2023.1.13 studio布局 1.线性布局 Android的线性布局不会换行,当组件一个挨着一个地排列到头之后,剩下的组件将不会 ...

  8. Java流程控制之break、continue、goto

    break.continue break在任何循环语句的主体部分,均可用break控制循环的流程.break用于强行退出循环,不执行循环中剩余的语句.(break语句也在switch语句中使用) co ...

  9. less的基本用法

    学习less详细文章链接 https://juejin.cn/post/6844903520441729037#heading-9

  10. Qt ui 文件转换为python代码文件

    python -m PyQt5.uic.pyuic -o ui_xxx.py xxx.ui