AJAX

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML)

环境搭建

安装node.js
```
C:\Users\xlgui>node -v
v14.16.1
```

新建一个文件夹例如ajaxDemo, 进入

npm init --yes
# 安装express
npm i express

第一个案例

使用Ajax发送GET

前端get.html

<body><button>点击发送请求</button> <div id="result"></div>
</body>
<script>// 获取按钮const btn = document.getElementsByTagName("button")[0];const div = document.getElementById("result");// 绑定点击事件btn.onclick = function() {// 发送ajax请求的四个步骤// 1. 创建对象const xhr = new XMLHttpRequest();// 2. 初始化: 打开链接, 包括请求的方法和urlxhr.open("GET", "http://127.0.0.1:8000/server");  // 前面的IP也要写// 3. 发送xhr.send();// 4. 事件绑定 处理服务端返回的结果 on realystate change  当就绪状态发生改变//      有5中状态: 0, 1, 2, 3, 4//          0 表示XMLHttpRequest对象刚初始化, 1表示open()完成, 2表示发生send()完成, //                  3表示返回部分数据, 4表示返回全部数据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);div.innerHTML = xhr.response;}}}}
</script>

服务器端sever.js

// 1. 引入express
const { request, response } = require('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");
});app.listen(8000, ()=>{console.log("服务器已启动,端口8000")
})

启动服务端

node "e:\download\bilibi\ajax尚硅谷\ajaxDemo\课堂\代码\原生ajax\server.js"
服务器已启动,端口8000

双击打开get.html

Ajax发送Post

前端post.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>post请求</title><style>#result {width: 100px;height: 100px;border: springgreen solid 2px;}</style>
</head>
<body><div id="result"> </div><script>const ret = document.getElementById("result");// 绑定事件ret.addEventListener("mouseover", function() {// console.log("result");const xhr = new XMLHttpRequest();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) {ret.innerHTML = xhr.response;}}}});</script>
</body>
</html>

后端 server.js

// 1. 引入express
const { request, response } = require('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");
});// 添加一个post相应
app.post("/server", (request, response)=>{// 设置相应头-->允许跨域response.setHeader("Access-Control-Allow-Origin", "*")// 设置相应response.send("ajax, post");
});app.listen(8000, ()=>{console.log("服务器已启动,端口8000")
})

使用post请求传递参数

在xhr.send()方法中进行设置

            xhr.send("a=1&b=2");

在send()中可以传任意的字符串, 常见是上面这种用&连接的键值对和json, 只要你能在服务端正确地解析即可

设置请求头

尚硅谷ajax学习记录相关推荐

b站尚硅谷springmvc学习视频：springmvc文档
文章目录一.SpringMVC简介 (b站尚硅谷springmvc学习视频:springmvc文档) 1.什么是MVC 2.什么是SpringMVC 3.SpringMVC的特点二.HelloWo ...
ajax学习记录总结
Ajax学习记录 URL 地址组成:客户端与服务器之间的通信协议存有该资源的服务器名称资源在服务器上具体的存放位置客户端与服务器通信过程请求-处理-相应资源的请求方式 get请求用于获取服务 ...
尚硅谷Vue2学习笔记分享
前言这里是尚硅谷Vue2的学习笔记分享. 原视频是尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 Vue3的笔记链接文章目录前言初识Vue 模板语法数据绑定 el和data ...
尚硅谷springboot学习课程笔记
**一.**Spring Boot 入门 !!!此文并非原创,只是转载分享尚硅谷的springboot原学习笔记 1.Spring Boot 简介简化Spring应用开发的一个框架: 整个Sprin ...
尚硅谷Netty学习笔记
Netty 一些问题 1.阻塞与非阻塞阻塞和非阻塞指的是执行一个操作是等操作结束再返回,还是马上返回举例:在 BIO 案例的 handler 方法中,如果读取不到数据就会阻塞在 read() 方法 ...
Dubbo之《尚硅谷》学习笔记
一.基础知识 1.分布式基础理论 1.1 什么是分布式系统? <分布式系统原理与范型>定义: "分布式系统是若干独立计算机的集合,这些计算机对于用户来说就像单个相关系统" ...
Docker_尚硅谷视频学习笔记
文章目录 1 Docker 简介前提知识+课程定位 Docker 是什么? 问题:为什么会有docker出现 docker理念总结能干嘛之前的虚拟机技术容器虚拟化技术开发/运维(DevOp ...
尚硅谷SpringBoot学习笔记
目录简介编辑快速搭建一个SpringBoot的网页自动配置原理容器功能组件添加原生配置文件引入配置绑定自动配置原理 1.引导加载自动配置类 2.按需配置开启自动配置项开发小技巧 1 ...
JavaWeb尚硅谷【学习笔记】（整合）未完成
文章目录一.HTML 1.网页的组成部分 2.HTML简介 3.HTML文件的书写规范 4.HTML标签的介绍 5.标签的语法 6.常用标签介绍二.CSS技术 1.CSS技术介绍 2.CSS语法规 ...

尚硅谷ajax学习记录

AJAX

环境搭建

第一个案例

使用Ajax发送GET

Ajax发送Post

设置请求头

尚硅谷ajax学习记录相关推荐

最新文章

热门文章