- 🎄原生AJAX
- 1.1 🎭AJAX 简介
- 1.2 🎎XML简介
- 1.3 🎨AJAX的特点
- 1.3.1 1️⃣AJAX的优点
- 1.3.2 2️⃣AJAX的缺点
- 1.4 🎵使用AJAX发送GET请求
- 1.4.1 ✅案例
- 1.5 🎶使用AJAX发送POST请求
- 1.5.1 ✅案例
- 1.6 🤳服务端响应JSON数据
- 1.6.1 ✅案例
AJAX全称为Asynchronous JavaScript And XML,就是异步的JS和XML。
通过AJAX可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据
。(类似刷朋友圈,刷微博动态)
AJAX不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。
1.2 🎎XML简介XML(Extensible Markup Language)可扩展标记语言。
XML被设计用来传输和存储数据。
XML和HTML类似,不同的是HTML中都是预定义标签,而XML中没有预定义标签,全都是自定义标签
,用来表示一些数据。
以前都是采用XML进行数据交换,
比如说我有一个学生数据:
name="孙悟空"; age=18; gender="男";
用XML表示:
孙悟空
18
男
现在已经被JSON取代了。
用JSON表示:
{"name":"孙悟空","age":18,"gender":"男"}
什么是XMLHttpRequest?
-
XMLHttpRequest是基于XML的HTTP请求,是一个浏览器接口,使得Javascript可以进行HTTP(S)通信,这就是我们熟悉的AJAX。
-
XMLHttpRequest可以向不同域名的服务器发出HTTP请求,叫做CORS
-
浏览器要支持CORS
-
服务器允许跨域:响应头需要添加一下选项
self.set_header('Access-Control-Allow-Origin', '*') self.set_header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS') self.set_header('Access-Control-Max-Age', 1000) self.set_header('Access-Control-Allow-Headers', '*') self.set_header('Content-type', 'application/json')
-
- 可以无需刷新页面而与服务器端进行通信。
- 允许你根据用户事件来更新部分页面内容。
- 没有浏览历史,不能回退
- 存在跨域问题(同源)(a网页不能向b网页发送AJAX请求)
- SEO(搜索引擎优化)不友好
HTTP(hypertext transport protocol)协议【超文本传输协议】,协议详细规定了浏览器和万维网服务器之间互相通信的规则。
浏览器给服务器发送请求报文
:
http协议报文的格式与参数:
-
(请求行)请求类型:get,post,put… / URL / http协议的版本
-
(请求头):Host:值
Cookie:值
Conent-type(请求体的类型):值
User-Agent:值
-
空行
-
(请求体):get(请求体为空),post(请求体可以不为空)
服务器给浏览器返回的结果(响应报文
):
-
(响应行): http协议的版本 / 响应状态码(status) / 响应状态字符串(statusText)
-
(响应头)(getAllResponseHeaders):和请求体格式一样
-
空行
-
(响应体)(response):主要返回的结果
< <
< < < < 尚硅谷 < < < <
< <
需求:
- 点击按钮发送请求
- url中设置请求参数 a=100 b=200 c=300
- 将响应体内容放到预设的div中
效果如下:
设置一个服务器,用来发送请求,返回响应结果,node+express
。
server.js
// 1.引入express
const { 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')
})
// 4.监听端口启动服务
app.listen(8000, () => {
console.log("服务已经启动,8000 端口监听中....")
})
GET.html
DOCTYPE html>
AJAX GET 请求
#result {
width: 200px;
height: 100px;
border: solid 1px #90b;
}
点击发送请求
// 获取button元素
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById('result')
// 绑定事件
btn.onclick = function () {
// 1.创建对象,新建一个XMLHttpRequest实例
const xhr = new XMLHttpRequest()
// 2.初始化 设置请求方法和url,向远程主机发出一个HTTP请求
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
// 3.发送
xhr.send()
// 4.事件绑定 处理服务端返回的结果,等待远程主机做出回应。
// 这时需要监控XMLHttpRequest对象的状态变化,指定回调函数
// 对onreadystatechange进行拆解分析:
// on(when)当...时候
// readystate 是 xhr对象中的属性,表示状态
// readystate属性有五个值:0(未初始化) 1(open方法已经调用完毕) 2(send方法已经调用完毕)
// 3(表示服务端返回了部分的结果) 4(服务端返回了所有的结果)
// change 当改变的时候触发
xhr.onreadystatechange = function () {
// 判断(如果readyState=4,表示服务端返回了所有的结果)
if (xhr.readyState === 4) {
// 判断响应的状态码 200 404 403 401 500
// 2xx 表示成功
if (xhr.status >= 200 && xhr.status {
// 设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
// 设置响应体
response.send('Hello AJAX post')
})
// 4.监听端口启动服务
app.listen(8000, () => {
console.log("服务已经启动,8000 端口监听中....")
})
POST.html
DOCTYPE html>
AJAX POST 请求
#result {
width: 200px;
height: 100px;
border: solid 1px #903;
}
// 获取元素对象
const result = document.getElementById('result')
//绑定事件
result.addEventListener('mousemove', function () {
// 1.创建对象
const xhr = new XMLHttpRequest()
// 2.初始化 设置类型与URL
xhr.open('POST', 'http://127.0.0.1:8000/server')
// 3.发送
xhr.send()
// 4.事件绑定
xhr.onreadystatechange = function () {
// 判断
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status {
// 设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
// 响应头 允许自定义的响应头
response.setHeader('Access-Control-Allow-Headers', '*')
// 响应一个数据
const data = {
name: 'atguigu'
}
// 对对象进行字符串的转换
let str = JSON.stringify(data)
// 设置响应体
response.send(str)
})
// 4.监听端口启动服务
app.listen(8000, () => {
console.log("服务已经启动,8000 端口监听中....")
})
当响应的数据是一个对象时,由于send()方法只能接收字符串类型,所以要对这个对象进行转换,转换成字符串类型。
JSON.html
DOCTYPE html>
JSON响应
#result {
width: 200px;
height: 100px;
border: solid 1px #903;
}
const result = document.getElementById('result')
// 绑定键盘按下事件
window.onkeydown = function () {
// 发送请求
const xhr = new XMLHttpRequest()
// 设置响应体数据的类型
xhr.responseType = 'json'
// 初始化
xhr.open('GET', 'http://127.0.0.1:8000/json-server')
// 发送
xhr.send()
// 事件绑定
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status
关注
打赏
置顶博客
最近更新
- 深拷贝和浅拷贝的区别(重点)
- 【Vue】走进Vue框架世界
- 【云服务器】项目部署—搭建网站—vue电商后台管理系统
- 【React介绍】 一文带你深入React
- 【React】React组件实例的三大属性之state,props,refs(你学废了吗)
- 【脚手架VueCLI】从零开始,创建一个VUE项目
- 【React】深入理解React组件生命周期----图文详解(含代码)
- 【React】DOM的Diffing算法是什么?以及DOM中key的作用----经典面试题
- 【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)
- 【React】2_如何使用react脚手架写一个简单的页面?