发送POST请求
- 在***为一个元素绑定事件***（使用添加监听的方式来进行）的时候，有以下四个步骤：① 创建对象 ==> ② 初始化，设置类型与URL ==> ③ 发送，一般来说发送的形式随意，没有过多的一个要求 ==> ④ 事件绑定
代码示例:
<!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: solid 1px #903;
}
</style>
</head>
<body>
<!--
需求：当鼠标放在div上面的时候，发送post请求，
然后将结果返回到div中做一个呈现
-->
<div id="result"></div>
<script>
// 获取元素对象，要对哪里进行操作，先要获取元素对象
/*
const定义的变量不能修改，且必须初始化
*/
const result = document.getElementById('result')
// 绑定事件，使用增加监听的方式来进行,使用添加监听的方式来进行的时候， 不需要加on
result.addEventListener('mouseover', function(){
// console.log('test')
// 四个步骤
// 1、创建对象
const xhr = new XMLHttpRequest()
// 2、初始化，设置类型与URL,
// 第一个参数设置的是请求的类型，GET/POST
xhr.open('POST', 'http://127.0.0.1:8000/server')
// 3、发送, 一般来说发送的形式随意， 没有过多的一个要求
// xhr.send('a=100&b=200&c=300')
// xhr.send('a:100&b:200&c:300')
xhr.send('1234567')
// 4、事件绑定
xhr.onreadystatechange = function(){
// 判断
if(xhr.readyState === 4){
// 响应状态码是成功的
if(xhr.status >= 200 && xhr.status < 300){
// 处理服务端返回的结果
// response是响应体
result.innerHTML = xhr.response;
}
}
}
})
</script>
</body>
</html>
发送GET请求
- 代码实现和POST请求是类似的，都是需要经历四个步骤
<!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>
<style>
#result{
width:200px;
height:100px;
border:solid 1px;
}
</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(){
//
// console.log('test')
// 1、创建对象
const xhr = new XMLHttpRequest();
// 2、初始化，设置请求的方法和url
// 使用问号分割的形式来设置参数
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
// 3、发送
xhr.send();
// 4、事件绑定，处理服务器端返回的结果
// on when 当.....时候
// readystate是xhr对象中的属性，表示状态 0 1 2 3 4
// change 改变的时候。 总共四次
xhr.onreadystatechange = function(){
// 判断（服务器返回了所有的结果）
if(xhr.readyState === 4){
// 判断响应的状态码 200 404 403
// 其实 2xx都是表示成功
if(xhr.status >= 200 && xhr.status < 300){
// 处理结果 行，头， 空行， 体
// 1、响应行：需要状态码和状态字符串
// console.log(xhr.status); // 状态码
// console.log(xhr.statusText); // 状态字符串
// console.log(xhr.getAllResponseHeaders()); // 所有响应头
// console.log(xhr.response); // 响应体
// 设置result的文本
result.innerHTML = xhr.response;
}else{
}
}
}
}
</script>
</body>
</html>
创建服务js代码
创建一个服务器也是需要四个步骤：① 引入express ==> ② 创建应用对象 ==> ③ 创建路由规则 ==> ④ 监听端口启动服务
代码实现：
/*
每次在对一个server服务进行操作以后，需要重启这个服务
而且一般终端就是node我们要在终端关闭端口，就需要重启Ctrl + C
*/
// 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)=>{
// 设置响应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
// 设置响应体
response.send('hello AJAX')
});
app.post('/server', (request, response)=>{
// 设置响应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
// 设置响应体
response.send('hello AJAX POST')
});
// 4、监听端口启动服务
app.listen(8000, ()=>{
console.log("服务已经启动, 8000端口监听中")
})
14Ajax设置请求头相应信息
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// 也可以自定义请求头信息，
xhr.setRequestHeader('name', 'atgugui')
15Ajax服务端相应JSON数据
nodemon自动重启工具的安装
安装结束以后如果出现报错，命令行改为cmd形式即可
IE浏览器缓存问题的解决
IE浏览器会对AJAX的请求结果作一个缓存，导致下一次发送请求是，走的是本地的缓存而不是此时服务器发回来的
// 直接加上一个参数，工作中工具都会加上的， 需要知道有这么一个情况
xhr.open("GET", 'http://127.0.0.1:8000/ie?t='+Date.now())
请求超时和网络异常处理
btn.addEventListener('click', function () {
const xhr = new XMLHttpRequest()
// 18超时设置
xhr.timeout = 2000
// 超时回调
xhr.ontimeout = function(){
alert('网络异常，请稍后重试')
}
// 网络异常回调
xhr.onerror = function(){
alert('你的网络似乎出了一些问题')
}
// 直接加上一个参数，工作中工具都会加上的， 需要知道有这么一个情况
xhr.open("GET", 'http://127.0.0.1:8000/delay')
xhr.send()
// 事件绑定
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
result.innerHTML = xhr.response
}
}
}
})
取消请求
取笑请求使用的关键字是***abort***
- 无论是创建还是取消都是需要先创建对象
x = new XMLHttpRequest()
<body>
<button>点击发送</button>
<button>点击取消</button>
<script>
// 获取元素对象
const btns = document.querySelectorAll('button')
let x = null
btns[0].onclick = function(){
// 学习了es6，就知道了let和const的区别
// let关键字可以在外部定义，定义在外面的话，里面也可以用
x = new XMLHttpRequest()
x.open('GET', 'http://127.0.0.1:8000/delay')
// 在控制台是有状态码的，这一点很关键
x.send()
}
// 使用abort来进行解除绑定的操作
btns[1].onclick = function(){
x.abort()
}
</script>
</body>
重复请求问题
观察是否正在发送AJAX请求，一般这类操作都是需要一个变量来进行标识
let isSending = false // 是否正在发送AJAX请求
<body>
<button>点击发送</button>
<!-- <button>点击取消</button> -->
<script>
// 获取元素对象
const btns = document.querySelectorAll('button')
let x = null
// 标识变量
let isSending = false // 是否正在发送AJAX请求
btns[0].onclick = function(){
// 点击按钮的时候，判断标识变量
if(isSending) x.abort() // 如果正在发送，则取消该请求，创建一个新的请求
// 学习了es6，就知道了let和const的区别
// let关键字可以在外部定义，定义在外面的话，里面也可以用
x = new XMLHttpRequest()
// 修改标识变量的值
isSending = true
x.open('GET', 'http://127.0.0.1:8000/delay')
// 在控制台是有状态码的，这一点很关键
x.send()
x.onreadystatechange = function(){
if(x.readyState === 4){
isSending = false
}
}
}
// 使用abort来进行解除绑定的操作
btns[1].onclick = function(){
x.abort()
}
</script>
</body>
jQuery当中发送AJAX请求
- 服务端代码书写
// jQuery服务
app.all('/jquery-server', (request, response)=>{
// 设置响应头,设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
/* setTimeout(()=>{
// 设置响应体
response.send("延时响应")
}, 3000) */
// 设置响应体
// 创建一个json对象用于演示
const data = {name:'尚硅谷'}
// response.send('Hello jQuery AJAX')
response.send(JSON.stringify(data))
});
- 真正的函数书写
<script>
/*
使用了get或者是post在服务端是需要写上相应的请求服务的
*/
$('button').eq(0).click(function(){
// 第一个参数，给谁发，第二个参数：写上相应的参数，第三个参数：一个简单的回调函数
$.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
console.log(data)
},'json') // 第四个参数是设置响应体的数据类型
})
$('button').eq(1).click(function(){
// 第一个参数，给谁发，第二个参数：写上相应的参数，第三个参数：一个简单的回调函数
$.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
console.log(data) // 因为这里打印的是原始的数据类型，是json类型
})
})
</script>