Ajax基础学习

少年歌行s

已于 2022-02-07 14:26:07 修改

阅读量299

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： ajax javascript

于 2021-08-08 21:49:28 首次发布

本文链接：https://blog.youkuaiyun.com/MinfCONS/article/details/119519887

前端专栏收录该内容

23 篇文章

订阅专栏

文章目录

1. 简介
2. GET请求
3. POST请求
- 初始化 open 延展 - 传参
- post路由
4. 服务端响应 JSON 数据
- 手动数据转化
- 自动数据转化

1. 简介

1.1 Ajax简介

Ajax 全称为 Asynchronous Javascript and XML，即异步的 JS 和 XML

通过在浏览器中，向后台/服务器发送请求获取数据，以达到目的：无刷新获取数据。这也是 Ajax 的优点

1.2 XML简介

XML 与 HTML 类似
不同的是，HTML 使用预定义标签，XML 没有预定义标签
如：我有一个学生数据，在 XML 中会这样写

// name：孙悟空  age：18  sex：男
<student>
	<name>孙悟空</name>
	<age>18</age>
	<sex>男</sex>
</student>

1.3 HTTP 简介

HTTP 是一种协议，称超文本传输协议。经常使用，且下面会用到，需要简单了解。

当我们在百度中敲了个回车，搜索东西时，会包括以下四个东西

# 请求
行      GET<请求方法>   /s?ie=utf-8<传递参数>    HTTP/1.1版本<HTTP版本> 
头      Host: atguigu.com
        Cookie: name=guigu
        Content-type: application/x-www-form-urlencoded
        Uesr-Agent: Chrome 83
空行    
体      (如果是GET请求，这里请求体 是空的； 如果是POST请求， 这里请求体  可有可无)


# 响应报文
行      HTTP/1.1  200  OK
头      Content-type: text/html;chaeset=utf-8
        Content-length: 2048
        Content-encoding: gzip
空行
体		<HTML>
 -->

2. GET请求

实验结果：

在这里插入图片描述
点击按钮后

进行下面操作时，首先要下载 node.js 并部署 express . 这里不多描述

GET请求案例
需求：点击按钮，向服务端发送请求，然后将服务端的响应体结果，返回到 div 中

前端环境：

打开 VSCode，建立一个 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>Document</title>
</head>
<style>
.div {
	width: 200px;
	height: 100px;
	border: solid 1px #90b;
</style>

<body>
	<button>点击发送请求</button>
	<div></div>
	
	<script>
	// 获取元素
    var btn = document.querySelector('button')
    var result = document.querySelector('div')
    // 绑定事件
    btn.addEventListener('click', function () {
    	// 1. 创建对象
    	var xhr = new XMLHttpRequest();
    	// 2. 初始化 设置请求方法 和 url
    	xhr.open('GET', 'http://127.0.0.1.8000/server')
    	// 3. 发送
    	xhr.send();
    	// 4. 事件绑定，处理服务端返回结果
    	xhr.onreadystatechange = function(){
			//判断
			if(xhr.readyState === 4){
				// 判断响应的状态 200  404 403
				// 2xx 成功
				if(xhr.status >= 200 && xhr.status <300){
					//处理结果
					// console.log(xhr.status);  //状态码
                    // console.log(xhr.statusText); //状态字符串
                    // console.log(xhr.getAllResponseHeaders()); // 所有响应头
                    // console.log(xhr.response);  //响应体
                    xhr.innerHTML = xhr.response;
				}
			}
		}
    }
	</script>
</body>
</html>

服务端环境：

在同级目录下创建一个 server.js 文件

// 服务端
// 1. 引入express
const express = require('express');

// 2. 创建应用对象
const app = express();

// 3. 创建路由规则
app.get('/server', (request, response) => {
	// 设置响应头 设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('Hello Ajax!');
})

// 4. 监听端口启动服务
app.listen('8000',() => {

})

3. POST请求

post 请求与 GET 请求大同小异

初始化 open 延展 - 传参

前端代码只需变动一个地方：

// 2. 初始化 设置请求方法 和 url
    xhr.open('POST', 'http://127.0.0.1.8000/server')

当我们想传递参数时

open( ‘请求方法’ ，’ 域名 ?a=100&b=200&c=300 ')

参数和域名用 ? 隔开；不同参数间用 & 隔开

post路由

服务端需要新增 post 路由：

// 3. 创建路由规则
app.post('/server', (request, response) => {
	// 设置响应头 设置允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	response.send('Hello Ajax!');
})

POST 请求会伴随 option 请求发出，所以需要创建路由规则 app.all 内容相同

4. 服务端响应 JSON 数据

下面操作需要学习两行新代码：

// 对对象进行字符串转换
let str = JSON.stringify(data);

// 手动对数据转化
let data = JSON.parse(xhr.response)

手动数据转化

首先配置路由

app.all('/json-server',( request, response) => {
	// 设置响应头 允许跨域
	response.setHeader('Access-Control-Allow-Origin', '*')
	// 响应头
	response.setHeader('Access-Control-Allow-Header', '*')
	// 响应一个数据`在这里插入代码片`
	const data = {
		name:'atguigu'
	}
	// 对对象进行字符串转换  (此时不能直接将 data 放入 response.send() )
	let str = JSON.stringify(data);
	// 设置响应体
	// response.send('hello Ajax')
	response.send(str)
})

前端代码修改

xhr.onreadystatechange = function(){
	if(xhr.readyState === 4){
		if(xhr.status >= 200 && xhr.status <300){
			// 手动对数据进行转换
			let data = JSON.parse(xhr.response);
			result.innerHTML = data.name
		}
	}
}

自动数据转化

服务端路由配置，与上文相同

直接修改前端代码：

// 1. 创建对象
var xhr = new XMLHttpRequest();
// 设置数据体响应的类型：：
xhr.responseType = 'json';
// 2. 初始化 设置请求方法 和 url
xhr.open('GET', 'http://127.0.0.1.8000/server')
// 3. 发送
xhr.send();
// 4. 事件绑定，处理服务端返回结果

最后打印时：

xhr.onreadystatechange = function(){
	if(xhr.readyState === 4){
		if(xhr.status >= 200 && xhr.status <300){
			// 手动对数据进行转换
			// let data = JSON.parse(xhr.response);
			// result.innerHTML = data.name;
			result.innerHTML = xhr.response.name;
		}
	}
}