AJAX请求的基本操作
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>
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请求的基本操作的更多相关文章
- js对WebApi请求的基本操作
在WebAPI对外提供的,大概有4种接口,get,post,delete,put,现在,我就简单的来说一下js请求webApi的方式和大概的作用: get:在webApi中,get方法通常是用来获取数 ...
- <day001>存储到Mysql、mongoDB数据库+简单的Ajax请求+os模块+进程池+MD5
任务1:记住如何存储到Mysql.mongoDB数据库 ''' 存储到Mysql ''' import pymysql.cursors class QuotePipeline(object): def ...
- 一步步学习javascript基础篇（9）：ajax请求的回退
需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...
- 配置Chrome支持本地（file协议）的AJAX请求
什么问题 WEB开发过程中,很多时候我们都是写一些简单的Demo,并不是开发一个完整项目,此时我们常见的操作是: 新建文件夹 新建需要的文件 在Sublime(或其他编辑器)中完成DEMO的编码 双击 ...
- JQuery使用deferreds串行多个ajax请求
使用JQuery对多个ajax请求串行执行. HTML代码: <a href="#">Click me!</a> <div></div&g ...
- ajax请求成功后打开新开窗口(window.open())被拦截的解决方法
问题:今天在做项目时需要在ajax请求成功后打开一个新的窗口,此时遇到浏览拦截了新窗口的问题,尝试在ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('clic ...
- 关于ajax请求，在参数中添加时间戳的必要性
之前做项目的时候,看到别人的前端ajax请求代码中,都会带有一个时间戳类型的参数,当时随便查了一下,是为了防止浏览器缓存的原因,所以也没有进行深究,每次写的时候也习惯性的带一个,最近新项目中,我发现好 ...
- SpringMVC下Ajax请求的方法，@Responsebody如果返回的是布尔值，ajax不会接到任何回传数据
SpringMVC框架下,如果用ajax向后台请求得方法如果使用@Responsebody返回布尔值的话,ajax得不到任何的回传数据. 但是如果返回String类型,就是正常的. 测试了下代码写得没 ...
- 【学习篇：他山之石，把玉攻】Ajax请求安全性讨论
在开发过程中怎样考虑ajax安全及防止ajax请求攻击的问题. 先上两段网摘: Ajax安全防范的方法: 判断request的来源地址.这样的方式不推荐,因为黑客可以更改http包头,从而绕过检测. ...
- 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 ...
随机推荐
- Markdown 基础语法 备忘录
在vscode中使用Markdown先要安装一些插件: Markdown Preview Enhanced Paste Image LimfxCodeEX Code Spell Checker 一级标 ...
- flink udaf函数
1.Flink-sql自定义UDAF函数 - 简书 (jianshu.com) 2.Flink SQL 自定义UDAF_k_wzzc的博客-CSDN博客_flink udaf 3.Flink 实践教程 ...
- HTML+CSS+JS制作一个灰白色简约时钟
HTML+CSS+JS制作一个灰白色简约时钟 1. 效果图: 2. 特点:这次借鉴了网络上的代码,利用JS动态创建元素,减少html语句的数量,也便于与vue.react等语言进行结合. 3. 代码实 ...
- Tomcat 的连接数与线程池
一.背景 在使用tomcat时,经常会遇到连接数.线程数之类的配置问题,要真正理解这些概念,必须先了解Tomcat的连接器(Connector). 在前面的文章 Tomcat配置文件server.xm ...
- Day 22 22.1.1：增量式爬虫 - 场景1的实现
场景1的实现: 数据指纹: 数据的唯一标识.记录表中可以不直接存储数据本身,直接存储数据指纹更好一些. 创建爬虫爬虫文件: cd project_name(进入项目目录) scrapy genspid ...
- Comparator与Comparable实现List中某一对象属性排序
//实体类实现 Comparable接口 进行降序排序 public class TestCompare implements Comparable<TestCompare>{ priva ...
- 假设页面左侧有一个列表，点击列表某一项时，将根据当前id发起一个请求，并将响应结果展示在右侧。如果快速多次点击不同列表项，当网络不稳定时，请求返回的顺序与我点击顺序不符，导致展示的结果不是我最后一次点击的对应结果，怎么办？
1.防抖/节流方案 ,不可完全避免,请求数据时间不一致2.如果使用ajax/axios,发起请求时可直接取消上一次未完成的请求可实现3.临时记录最后一次的id,要求服务器返回时携带id,对比选择后渲染 ...
- python sorted() 多重排序
前言: 最开始是因为看到一道题目, 用一行代码解决[1, 2, 3, 11, 2, 5, 3, 2, 5, 3] 输出[11, 1, 2, 3, 5] 本来想法很简单,先去重后排序 但是遇到一个难点 ...
- Oracle修改用户密码错误次数及解锁用户
ORACLE11g错误密码登录默认是10次,10次错误后用户将被锁定,如下: SQL> conn test/123456 ERROR: ORA-28000: the account is loc ...
- 站长神器Beyond Compare与UltraCompare文件比较工具
Beyond Compare是一套非常实用的文件及文件夹比较软件,不仅可以快速比较出两个文件夹的不同之处,还可以详细的比较文件之间的内容差异.程序内建了文件浏览器,方便您对文件.文件夹.压缩包.FTP ...