使用原生ajax向后端发送get请求
<h2>原生ajax</h2>
<button>原生发送请求</button>
<script>
document.querySelector('button').onclick = function () {
// 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
const xhr = new XMLHttpRequest()
// 2.设置请求的 地址 和方法
xhr.open('get', 'http://ajax-api.itheima.net/api/city?pname=辽宁省')
//后边传上参数
// xhr.open('get', 'http://ajax-api.itheima.net/api/settings?spoken=我们的参数')
// 3.注册回调函数 服务器响应内容回来之后触发
xhr.addEventListener('load', function () {
// response 响应
console.log(xhr.response)
})
// 4.发送请求
xhr.send()
}
</script>
使用原生ajax向后端发送post请求
<script>
document.querySelector('button').onclick = function () {
// 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
const xhr = new XMLHttpRequest()
// 2.设置请求的 地址 和方法
xhr.open('post', 'http://ajax-api.itheima.net/api/data')
//后边传上参数
// xhr.open('get', 'http://ajax-api.itheima.net/api/settings?spoken=我们的参数')
// 3.设置请求头，我们也可以设置自己的请求头
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
// xhr.setRequestHeader('uname', 'huangning')
// 3.注册回调函数 服务器响应内容回来之后触发
xhr.addEventListener('load', function () {
// response 响应
console.log(xhr.response)
})
// 4.发送请求，拼接参数
xhr.send(`username=admin&password=123456`)
}
</script>
原生ajax请求
<h2>原生ajax</h2>
<button>post原生发送请求</button>
<script>
document.querySelector('button').onclick = function () {
// 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
const xhr = new XMLHttpRequest()
// 2.设置请求的 地址 和方法
xhr.open('post', 'http://ajax-api.itheima.net/api/login')
//后边传上参数
// xhr.open('get', 'http://ajax-api.itheima.net/api/settings?spoken=我们的参数')
// 3.设置请求头，我们也可以设置自己的请求头
xhr.setRequestHeader('content-type', 'application/json')
// xhr.setRequestHeader('uname', 'huangning')
// 3.注册回调函数 服务器响应内容回来之后触发
xhr.addEventListener('load', function () {
// response 响应
console.log(xhr.response)
})
// 4.发送请求，拼接参数 只能识别JSON文件
const data = JSON.stringify({username:`admin`,password:`123456`})
// 然后转换为JSON格式
// const a = JSON.stringify(data)
xhr.send(data)
}
</script>
原生ajax使用json解析
<h2>post提交JSON</h2>
<button>发送请求</button>
<script>
document.querySelector('button').onclick = function () {
// 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
const xhr = new XMLHttpRequest()
// 2.设置请求的 地址 和方法
xhr.open('post', 'http://ajax-api.itheima.net/api/login')
// 设置提交的内容格式为JSON
xhr.setRequestHeader('content-type', 'application/json')
// 3.注册回调函数 服务器响应内容回来之后触发
xhr.addEventListener('load', function () {
// response 响应
console.log(xhr.response)
const res = JSON.parse(xhr.response)
console.log(res)
console.log(res.message)
alert(res.message)
})
// 4.发送请求
// 请求体的数据 在send中提交
const data = { username: 'admin', password: '123456' }
// 数据转为JSON并提交给服务器
xhr.send(JSON.stringify(data))
}
</script>
Prominse的概念
首先Prominse是个构造函数，还是ES6中的语法，他的出生是为了解决函数中的回调地狱。
什么是回调地狱，内部函数基于外部函数运行完成以后调用，异步函数不会阻塞主线程函数的执行，ajax也不会，（回调函数，作为一个参数来传递，被传递的参数叫做回调函数）
axios就是基于promise封装的，作用可以使用链式编程，解决以前的回调地狱的问题。
链式调用
<h2>链式调用</h2>
<script src="./lib/axios.js"></script>
<script>
// resolve reject (形参) 名字可以改,但是建议别改
const p = new Promise((resolve, reject) => {
setTimeout(function () {
// console.log(1)
resolve(`成功了`)
},1000)
})
const res = p
.then(res=>{
console.log(`res1`,res)
return new Promise((resolve, reject) => {
setTimeout(function () {
// console.log(1)
resolve(`成功了`)
},2000)
})
})
.then(res => {
console.log(`res2`,res)
return new Promise((resolve, reject) => {
setTimeout(function () {
// console.log(1)
resolve(`成功了`)
},3000)
})
})
.then(res => {
console.log(`res3`,res)
return new Promise((resolve, reject) => {
setTimeout(function () {
// console.log(1)
resolve(`成功了`)
},4000)
})
})
.then((res => {
console.log(`res4`,res)
return new Promise((resolve, reject) => {
setTimeout(function () {
// console.log(1)
resolve(`成功了`)
},5000)
})
}))
.then(res => {
console.log(`res5`,res)
})
</script>
简化版axios-固定请求地址
<script>
function a() {
return new Promise((resolve, reject) => {
// 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
const xhr = new XMLHttpRequest()
// 2.设置请求的 地址 和方法
xhr.open('get', 'http://ajax-api.itheima.net/api/city?pname=辽宁省')
//后边传上参数
// xhr.open('get', 'http://ajax-api.itheima.net/api/settings?spoken=我们的参数')
// 3.注册回调函数 服务器响应内容回来之后触发
xhr.addEventListener('load', function () {
// response 响应
// console.log(xhr.response)
resolve(JSON.parse(xhr.response))
})
// 4.发送请求
xhr.send()
})
}
a().then(res => {
console.log(res)
})
</script>
简化版axios-参数请求
<script>
function a(b) {
return new Promise((resolve, reject) => {
const {method=`get`,url} = b
// 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
const xhr = new XMLHttpRequest()
// 2.设置请求的 地址 和方法
// xhr.open('get', 'http://ajax-api.itheima.net/api/city?pname=辽宁省')
xhr.open(method,url)
//后边传上参数
// xhr.open('get', 'http://ajax-api.itheima.net/api/settings?spoken=我们的参数')
// 3.注册回调函数 服务器响应内容回来之后触发
xhr.addEventListener('load', function () {
// response 响应
// console.log(xhr.response)
resolve(JSON.parse(xhr.response))
})
// 4.发送请求
xhr.send()
})
}
a({
// method : `get`,
url : `http://ajax-api.itheima.net/api/city?pname=辽宁省`
}).then(res => {
console.log(res)
})
</script>
简化版axios-JOSN传参
<script>
function a(b) {
return new Promise((resolve, reject) => {
const {method=`get`,url,data} = b
// 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
const xhr = new XMLHttpRequest()
// 2.设置请求的 地址 和方法
// xhr.open('get', 'http://ajax-api.itheima.net/api/city?pname=辽宁省')
xhr.open(method,url)
//后边传上参数
// xhr.open('get', 'http://ajax-api.itheima.net/api/settings?spoken=我们的参数')
// 3.注册回调函数 服务器响应内容回来之后触发
xhr.setRequestHeader('content-type', 'application/json')
xhr.addEventListener('load', function () {
// response 响应
// console.log(xhr.response)
resolve(JSON.parse(xhr.response))
})
// 4.发送请求
xhr.send(JSON.stringify(data))
})
}
a({
method : `post`,
url : `http://ajax-api.itheima.net/api/login`,
data : {
username : `admin`,
password : `123456`,
}
}).then(res => {
console.log(res)
})
</script>
简化版axios-获取图书列表案例
<script>
function a(b) {
return new Promise((resolve, reject) => {
const {method=`get`,url,data} = b
// 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
const xhr = new XMLHttpRequest()
// 2.设置请求的 地址 和方法
// xhr.open('get', 'http://ajax-api.itheima.net/api/city?pname=辽宁省')
xhr.open(method,url)
//后边传上参数
// xhr.open('get', 'http://ajax-api.itheima.net/api/settings?spoken=我们的参数')
// 3.注册回调函数 服务器响应内容回来之后触发
xhr.setRequestHeader('content-type', 'application/json')
xhr.addEventListener('load', function () {
// response 响应
// console.log(xhr.response)
resolve(JSON.parse(xhr.response))
})
// 4.发送请求
xhr.send(JSON.stringify(data))
})
}
a({
method : `get`,
url : `http://ajax-api.itheima.net/api/books`,
data : {
username : `admin`,
password : `123456`,
}
}).then(res => {
console.log(res)
})
</script>
简化版axios-图书列表增删改查的案例
<button class="get">获取图书</button>
<button class="add">新增图书</button>
<button class="edit">修改图书</button>
<button class="delete">删除图书</button>
<script>
/*
参数是一个对象
url 地址+get的参数(如果有的话)
method
data:{} 通过请求体传递的数据 写到这里.对象的格式
*/
function a(b) {
return new Promise((resolve, reject) => {
const {method=`get`,url,data} = b
// 1.实例化异步对象 内置的,通过它 不刷新页面发送请求
const xhr = new XMLHttpRequest()
// 2.设置请求的 地址 和方法
// xhr.open('get', 'http://ajax-api.itheima.net/api/city?pname=辽宁省')
xhr.open(method,url)
//后边传上参数
// xhr.open('get', 'http://ajax-api.itheima.net/api/settings?spoken=我们的参数')
// 3.注册回调函数 服务器响应内容回来之后触发
xhr.setRequestHeader('content-type', 'application/json')
xhr.addEventListener('load', function () {
// response 响应
// console.log(xhr.response)
resolve(JSON.parse(xhr.response))
})
// 4.发送请求
xhr.send(JSON.stringify(data))
})
}
document.querySelector(`.get`).onclick = function () {
a({
method : `get`,
url : `http://ajax-api.itheima.net/api/books`,
}).then(res => {
console.log(res)
})
}
document.querySelector(`.add`).onclick = function () {
a({
method : `post`,
url : `http://ajax-api.itheima.net/api/books`,
data : {
bookname : `蛤蟆先生去看心理医生`,
author : `11`,
publisher : `22`
}
}).then(res => {
console.log(res)
})
}
document.querySelector(`.edit`).onclick = function () {
a({
method : `put`,
url : `http://ajax-api.itheima.net/api/books/273`,
data : {
bookname : `蛤蟆先生去看心理医生`,
author : `22`,
publisher : `33`
}
}).then(res => {
console.log(res)
})
}
document.querySelector(`.delete`).onclick = function () {
a({
method : `delete`,
url : `http://ajax-api.itheima.net/api/books/1883`,
// data : {
// bookname : `蛤蟆先生去看心理医生`,
// author : `22`,
// publisher : `33`
// }
}).then(res => {
console.log(res)
})
}
</script>
标签：原生,console,log,res,xhr,ajax,api,prominse From： https://www.cnblogs.com/hgng/p/16952131.html