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>
 -->

初学Ajax 之 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',() => {

})