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. php redis使用 常用方法 | Windows环境下安装Redis | Windows下php安装redis扩展（详解版）

    redis可视化工具:http://www.treesoft.cn/dms.html #php redis使用 常用方法 https://www.cnblogs.com/mg007/p/1043107 ...

  2. 转载安卓或苹果手机获取URL scheme方法

    首先,打开支付宝,来到需要抓取的小程序页面.此处以上海的随申码为例演示,打开随申办小程序,点击顶部的「随申码」按钮进入页面. 可以看出这个一个二级页面,如果想要使用 URL Scheme 一键访问,同 ...

  3. 多线程学习（第一天）java语言的线程

    一.并发与并行 并发:处理器不停的切换有操作的线程. 并行:多个处理器同时执行有操作线程. 二.启动线程 无论是A,B哪种方式实现多线程,都需要通过Thread.start方法启动线程. A.Thre ...

  4. maven 通用pom.xml

    1 <?xml version="1.0" encoding="UTF-8"?> 2 <project xmlns="http:// ...

  5. .net基础—委托和事件

    委托 委托是一种引用类型,表示对具有特定参数列表和返回类型的方法的引用. 在实例化委托时,可以将其实例与任何具有兼容签名和返回类型的方法相关联. 可以通过委托实例调用方法.可以将任何可访问类或结构中与 ...

  6. Java语言程序设计课后小结

    运行结果:Size s = Size.SMALL;此时,s = SMALL.Size t = Size.LARGE:此时t = LARGE. System.out.println(s==t).由于s和 ...

  7. Linux 网卡（遇见问题的解决）

    主配置文件 /etc/sysconfig/network-scripts/ifcfg-eth1 里面的详细内容 DEVICE=eth1 网卡名称 TYPE=Ethernet 类型,Ethernet|B ...

  8. PAT-basic-1025 反转链表 java c++

    一.题目 给定一个常数 K 以及一个单链表 L,请编写程序将 L 中每 K 个结点反转.例如:给定 L 为 1→2→3→4→5→6,K 为 3,则输出应该为 3→2→1→6→5→4:如果 K 为 4, ...

  9. lua中定义变量用and和or连接

    原文链接 最近在写代码中看到lua定义变量有local a = value1 and value2的操作,有些疑问,在此记录一下:当连接两个操作数时,1.对于运算符and,假设它的第一个操作数为假,就 ...

  10. 040_Field Set

    Field Set是一组字段.例如,您可以有一个Field Set,其中包含描述用户的名字,中间名,姓氏和业务标题的字段.将Field Set添加到Visualforce页面时,开发人员可以遍历字段并 ...