ajax学习（1）

1-安装node.js

官网链接：nodejs

2-express Ajaxa 配置

如何配置express环境参考详见博客

安装express环境

Cannot find module ‘express’的解决方案

注：创建一个空目录在该文件夹下打开cmd执行命令行
创建一个新的文件夹。

如果完成 GET.html 和 server.js 之后运行发现 Cannot find module ‘express 参考上面的链接，执行解决方案之后的目录如下

2.1 express 测试代码

express 测试代码

参考安装 express 运行express-demo

2.2 ajax

GET.html（前端准备）

<!DOCTYPE html>
<html lang="en">
<!-- <script src="../../jq/jquery-3.6.0.min.js"></script> --><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>Ajax get 请求</title><style>#result {width: 200px;height: 100px;border: solid 1px #bbb;}</style>
</head><body><button>点击发送请求</button><div id="result"></div><script>// 获取button对象const btn = document.getElementsByTagName('button')[0];const result = document.getElementById('result');//绑定事件btn.onclick = function() {//创建对象const xhr = new XMLHttpRequest();// 初始化 设置请求方法和urlxhr.open('GET', 'http://localhost:8000/server?a=100&b=200&c=300');// 发送xhr.send();// 绑定事件 处理服务端的返回问题// 1- on when 当……时候// 2-readyState 是当 xhr 对象中的属性，表示状态 0(未初始化) 1（open调用完毕） 2（send调用完毕） 3（服务端返回部分结果） 4 （服务端返回所有结果）// 3- change 改变xhr.onreadystatechange = function() {// 判断-服务器的所有返回结果if (xhr.readyState === 4) {// 判断响应状态码// 200 403 404 401 500if (xhr.status >= 200 && xhr.status < 300) {//处理结果 行 头 空行 体// 1-响应体console.log(xhr.status); //状态码console.log(xhr.statusText); //状态字符串console.log(xhr.getAllResponseHeaders()); //所有响应头console.log(xhr.response); //响应体result.innerHTML = xhr.response;} else {}}}}</script>
</body></html>

server.js（服务端准备）

//1-引入express
const { response } = require('express');
const express = require('express');
const { request } = require('http');
//2-创建应用对象
const app = express();
//3-创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server', (request, response) => {//设置响应头 允许跨域//header的 Access-Control-Allow-Orign 名字 设置 *response.setHeader('Access-Control-Allow-Orign', '*');//设置响应体response.send('hello Ajax');
});
//监听端口启动服务
app.listen(8000, () => {console.log("服务器已经启动，8000 端口监听中……");
})

右键文件夹–>打开终端–>node server.js

注：如果上一个使用同一端口的程序没有关闭，则 运行该程序时会报错 。

测试

打开 http://localhost:8000/server

运行 GET.html

遇到的问题小结：

（1）consle.log 空白

回去检查代码，响应头的拼写，写错会影响跨域

Ajax学习笔记（1）相关推荐

Ajax学习笔记-动力节点-王鹤老师
Ajax学习笔记-动力节点-王鹤老师视频教程来自:https://www.bilibili.com/video/BV15k4y167XM?spm_id_from=333.999.0.0 第一节全局 ...
AJAX学习笔记——发送AJAX的POST请求，模拟from表单提交
关于AJAX发送POST请求,首先演示一个小案例. 当输入用户名:张三,密码:123.点击发送请求按钮这是用post请求模拟的表单提交.接下来看一下如何用AJAX发送POST请求后端代码: @We ...
Ajax学习笔记--- 【xmind 详细展示浏览器与服务器端通信，请求与响应报文】
php和express用来做后端,还是express强大和方便!!! 翻看笔记才知道自己当时下载Fiddler,Wampserver,phpstudy_pro是为了什么,实在不敢说自己学过php 文章 ...
黑马ajax学习笔记02--art-template模板，自动提示，防抖，三级联动，fromData传参及传文件，同源，jsonp，天气预报，CROS，服务器桥接，withCredential跨域登录
1.模板引擎概述作用:使用模板引擎提供的模板语法,可以将数据和HTML拼接起来实际上是实现在客户端做数据拼接 art-template模板引擎官网:http://aui.github.io/ar ...
Jquery ajax 学习笔记
本人的js & jq 一直是菜鸟级别,最近不忙就看了看ajax方面的知识,文中部分内容参考自这里&这里之前一直用js写ajax现在基于jq实现方便多了~ $.get & $. ...
一、AJAX学习笔记——原生AJAX （ajax简介、XML简介、ajax优缺点、ajax的使用）
第 1 章:原生 AJAX 1.1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML. 通过 AJAX 可以在浏览器中向服 ...
AJAX学习笔记（基本使用，请求参数传递，获取服务端响应，错误处理，低版本IE浏览器缓存问题及解决）
1. Ajax实现步骤创建ajax对象 let xhr = new XMLHttpRequest(); 告诉ajax请求地址及请求方式 xhr.open('get','http://www.exam ...
ajax学习笔记之一
2019独角兽企业重金招聘Python工程师标准>>> ajax与传统web的区别传统web应用:客户端浏览器提交请求-------服务端---------响应 ajax:客户端- ...
ASP.NET AJAX 学习笔记
第一课是asp.net ajax的概述,主要是大体上介绍asp.net ajax的印象. 这一讲的主要内容: 1.Ajax是异步传输.传统页面是同步传输.点击按钮或链接的时候,页面同步刷新.ajax不 ...
AJAX 学习笔记[四] AJAX 对服务器返回的XML 的处理
在AJAX 中,服务器端如果返回的XML 文档,则可以通过异步对象的responseXML 属性来获取器XML 数据.而开发者可以利用DOM 的相关方法对其进行处理. 假设服务器返回的XML 文档,如 ...

Ajax学习笔记（1）