ajax笔记_01_原生ajax
ajax笔记_01_原生ajax
- 第一章 原生AJAX
-
- AJAX简介
- XML简介
- AJAX的特点
-
- AJAX的有点
- AJAX的缺点
- HTTP协议
-
- HTTP
- 请求报文
- 响应报文
- express的安装与基本使用
-
- 安装（需要node环境）
- 基本使用
- AJAX的使用
-
- GET请求
- POST请求
- JSON响应
- IE缓存问题
- 请求超时和网络异常处理
- 取消请求
- AJAX请求重复发送问题
第一章 原生AJAX
AJAX简介
-
AJAX全称为(Asynchronous JavaScript And XML)，就是异步请求的JS和XML。
-
通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：无刷新获取数据
-
AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式
XML简介
-
XML可扩展标记语言
-
XML被设计用来传输和存储数据
-
XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据
比如我有一个学生是数据：
name:"孙悟空"; age=18; gender="男"用XML表示
孙悟空 18 男 -
现在已经被JSON取代了
用JSON表示
{ "name":"孙悟空", "age":18, "gender":"男" }
AJAX的特点
AJAX的有点
- 可以无需刷新页面而与服务端进行通信
- 允许你根据用户事件来更新部分页面内容
AJAX的缺点
- 没有浏览历史，不能回退
- 存在跨域问题
- SEO（搜索引擎优化，也就是不能被爬虫到）不友好
HTTP协议
HTTP
(hypertext transport protocol)协议【超文本传输协议】，该协议详细规定了浏览器和万维网服务器之间相互通信的规则
约定，规则
请求报文
重点是格式和参数
请求报文有四部分：
- 行
- 头
- 空行
- 体
| 部分 | 详情 |
|---|---|
| 行 | 请求方式，路径，协议版本POST /s?ie=utf-8 HTTP/1.1 |
| 头 | HOST:value Cookie:value Content-type:value User-Agent:value |
| 空行 | 固定的，必须得有 |
| 体 | GET请求时请求体为空，POST请求时请求体可以不为空 |
响应报文
响应报文也有四部分：
- 行
- 头
- 空行
- 体
| 部分 | 详情 |
|---|---|
| 行 | 协议版本 响应状态码 响应状态字符串HTTP/1.1 200 OK |
| 头 | 和请求报文的请求头一样 |
| 空行 | 固定的，必须得有 |
| 体 | 从服务端返回的结果 |
express的安装与基本使用
安装（需要node环境）
初始化项目：npm init --yes
安装express框架：npm i express
基本使用
// 1.引用express
const express = require('express')
// 2.创建应用对象
const app = express()
// 3.创建路由规则
// request是对请求报文的封装
// response是对响应报文的封装
app.get('/', (request, response) => {
// 设置响应
response.send('HELLO EXPRESS')
})
// 4.监听端口启动服务
app.listen(8000, () => {
console.log("服务已经启动，8000端口监听中")
})
AJAX的使用
GET请求
服务器：
// 引入express
const express = require('express')
// 创建对象
const app = new express()
// 创建路由规则
app.get('/server', (request, response) => {
// 设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
// 设置响应体
response.send('HELLO AJAX')
})
// 启动监听
app.listen(8000, () => {
console.log('服务器已经启动，8000端口监听中。。。','GET请求')
})
页面以及AJAX的请求发送：
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>AJAX GET 请求title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #90b;
}
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() {
// 1.创建对象
const xhr = new XMLHttpRequest()
// 2.初始化，设置请求方法和url
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200')
// 3.发送
xhr.send()
// 4.事件绑定，处理服务端放回的结果
// on 当什么的时候
// readystate 是xhr对象中的属性，表示状态0 1 2 3 4
// change 改变的意思
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
// 判断响应状态码200 404 403 401 500
// 2开头的都是成功的
if (xhr.status >= 200 && xhr.status < 300) {
// 处理结果 行 头 空行 体
// 响应
console.log(xhr.status) // 状态码
console.log(xhr.statusText) // 状态字符串
console.log(xhr.getAllResponseHeaders()) // 所有响应头
console.log(xhr.response) // 响应体
// 设置result的文本
result.innerHTML = xhr.response
}
}
}
}
script>
body>
html>
POST请求
服务器：
// 引入express
const express = require('express')
// 创建对象
const app = new express()
// 创建路由规则
app.get('/server', (request, response) => {
// 设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
// 设置响应体
response.send('HELLO AJAX')
})
app.post('/server', (request, response) => {
// 设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
// 设置为所有的响应头我都能接受
response.setHeader('Sccess-Control-Allow-Headers', '*')
// 设置响应体
response.send('HELLO AJAX')
})
// 启动监听
app.listen(8000, () => {
console.log('服务器已经启动，8000端口监听中。。。','POST请求')
})
页面以及AJAX的请求发送：
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>AJAX POST 请求title>
<style>
#result {
width: 200px;
height: 100px;
border: 1px solid #903;
}
style>
head>
<body>
<div id="result">div>
<script>
// 获取元素对象
const result = document.getElementById('result')
// 绑定事件
result.addEventListener('mouseover', function() {
// 1.创建对象
const xhr = new XMLHttpRequest()
// 2.初始化，设置类型和URL
xhr.open('POST', 'http://127.0.0.1:8000/server')
// 设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// 3.发送（携带参数）
xhr.send('a=100&b=200')
// 4.事件绑定
xhr.onreadystatechange = function() {
// 判断
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
// 处理服务端返回的结果
result.innerHTML = xhr.response
}
}
}
})
script>
body>
html>
JSON响应
服务器：
const express = require('express')
const app = new express()
// 创建路由规则
app.get('/server', (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*')
// 响应一个数据
let data = {
name:'Soli',
age:17
}
// 对对象进行字符串转换
let strData = JSON.stringify(data)
// 设置响应体
response.send(strData)
})
app.listen(8000, () => {
console.log('服务器已经启动，8000端口监听中。。。','JSON响应')
})
页面以及AJAX的请求发送：
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>AJAX GET 请求title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #90b;
}
style>
head>
<body>
<div id="result">div>
<script>
const result = document.getElementById('result')
// 绑定键盘按下事件
window.onkeydown = function() {
const xhr = new XMLHttpRequest()
// 设置响应体数据的类型
// 如果设置为json，就不用把服务器的数据进行手动转换了
xhr.responseType = 'json'
xhr.open('GET', 'http://127.0.0.1:8000/server')
xhr.send()
// 事件绑定
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
// 1.手动对数据转化
// let data = JSON.parse(xhr.response)
// result.innerHTML = data.name + data.age
// 2.自动对数据转换
result.innerHTML = xhr.response
}
}
}
}
script>
body>
html>
IE缓存问题
服务器：
// 引入express
const express = require('express')
// 创建对象
const app = new express()
// 创建路由规则
app.get('/server', (request, response) => {
// 设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
// 设置响应体
response.send('HELLO AJAX')
})
// 启动监听
app.listen(8000, () => {
console.log('服务器已经启动，8000端口监听中。。。','IE缓存问题')
})
页面以及AJAX的请求发送：
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>IE缓存问题title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #90b;
}
style>
head>
<body>
<div id="result">div>
<script>
const result = document.getElementById('result')
result.addEventListener('click', function() {
const xhr = new XMLHttpRequest()
// 解决IE的缓存问题，只需要在请求的时候加上一个时间戳就可以了
xhr.open('GET', 'http://127.0.0.1:8000/server?t='+Date.now())
xhr.send()
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
result.innerHTML = xhr.response
}
}
}
})
script>
body>
html>
请求超时和网络异常处理
服务器：
// 引入express
const express = require('express')
// 创建对象
const app = new express()
// 创建路由规则
app.get('/server', (request, response) => {
// 设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
// 设置响应体
// response.send('HELLO AJAX')
// 延时2s发送响应体
setInterval(()=>{
response.send('HELLO AJAX')
}, 3000)
})
// 启动监听
app.listen(8000, () => {
console.log('服务器已经启动，8000端口监听中。。。', '请求超时和网络异常处理')
})
页面以及AJAX的请求发送：
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>请求超时和网络异常处理title>
<style>
#result {
width: 200px;
height: 100px;
border: solid 1px #90b;
}
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()
// 超时设置
// 请求超过2s中断请求
xhr.timeout = 2000
// 设置超时的回调
// 当超时的时候调用该方法
xhr.ontimeout = function() {
alert('请求超时，请稍后重试')
}
// 网络异常回调
xhr.onerror = function() {
alert('你的网络好像除了点问题')
}
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200')
xhr.send()
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
result.innerHTML = xhr.response
}
}
}
}
script>
body>
html>
取消请求
服务器：
// 引入express
const express = require('express')
// 创建对象
const app = new express()
// 创建路由规则
app.get('/server', (request, response) => {
// 设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
// 延迟响应
setTimeout(() => {
response.send('HELLO AJAX')
}, 3000);
})
// 启动监听
app.listen(8000, () => {
console.log('服务器已经启动，8000端口监听中。。。', '取消请求')
})
页面以及AJAX的请求发送：
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>取消请求title>
head>
<body>
<button>点击发送button>
<button>点击取消button>
<script>
// 获取button元素
const btns = document.querySelectorAll('button')
// 将对象定义在两个函数的外面
let xhr = null
// 点击发送请求
btns[0].onclick = function() {
xhr = new XMLHttpRequest()
xhr.open('GET', 'http://127.0.0.1:8000/server')
xhr.send()
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && status < 300) {
console.log(xhr.response)
console.log('请求成功')
}
}
}
}
// 点击取消发送请求
btns[1].onclick = function() {
xhr.abort()
console.log('取消请求的发送');
}
script>
body>
html>
AJAX请求重复发送问题
服务器：
const express = require('express')
const app = new express()
app.get('/server', (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*') // 允许跨域
setTimeout(()=>{
response.send('HELLO AJAX')
}, 3000)
})
app.listen(8000, () => {
console.log('服务器启动成功，端口号8000','')
})
页面以及AJAX的请求发送：
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>AJAX请求重复发送问题title>
<style>
#result {
width: 200px;
height: 100px;
border: 1px solid #903;
}
style>
head>
<body>
<div id="result">div>
<script>
// 获取元素
const result = document.querySelector("#result")
const xhr = null
// 标识变量
// 表示此时是否在发送请求
let isSending = false
result.addEventListener('click', function() {
// 判断表示变量
if (isSending) { // 如果正在发送。则取消该请求，创建一个新的请求
xhr.abort()
}
xhr = new XMLHttpRequest()
isSending = true // 修改标识变量
xhr.open('GET', 'http://127.0.0.1:8000/server')
xhr.send()
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
// 修改标识变量
// 状态码为4就可以修改了，因为此次请求有可能是一个失败的请求
isSending = false
if (xhr.status >= 200 && xhr.status < 300) {
result.innerHTML = xhr.response
}
}
}
})
script>
body>
html>