ajax入门——简单的封装ajax
ajax全称为 Asynchronous JavaScript and XML 是一种用于创建快速动态页面的技术,可使页面以无刷新的效果来更改页面的局部内容。
封装ajax主要是依赖与js中的new XMLHttpRequest()的构造函数来实现
本次封装中使用的XMLHttpRequest方法中有
1. status:代表请求的响应状态
2. open():初始化一个请求，内有5个参数(method, url, async, user, password) method表示发送的请求方法（get,post,put,delete）。url表示要向其发送请求的地址。async里面接收一个布尔值，是否使用异步执行操作，如果为true的话则代表异步，false代表同步 默认为true.user用于认证用途，默认为null。password密码，默认为null
3. send():发送http请求，如果是异步请求，此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回默认为异步，参数为请求中要发送的数据体。
4. readyState：返回一个状态值，0为代理被创建未执行open方法，1为open方法被调用，2为send方法被调用并且头部和状态已经可获得，3为返回部分数据，4为返回全部数据
5. onreadystatechange：readyState属性发生变化时调用。
6. response:返回响应的内容
7. setRequestHeader:设置 HTTP请求头的值在open后send前调用
8. getResponseHeader：返回包含指定响应头的字符串
首先ajax最基本的使用
````js
// 服务端
router.get('/Success',(req,res)=>{
res.send('访问成功')
})
router.get('/Error',(req,res)=>{
res.status(400)
res.send('访问失败')
})
router.post('/GetJson',(req,res)=>{
res.send({name:'张三',age:18})
})
// 客户端代码
function ajax(method,url,async=true){
const xhr = new XMLHttpRequest()
// 初始化请求 声明方法和地址
xhr.open(method,url,async)
// 发送请求
xhr.send()
xhr.onreadystatechange = function(){
// 4为请求完毕获取所有数据
if(xhr.readyState==4){
if(xhr.status>=200 && xhr.status<300){
console.log('请求成功了',xhr.response);
}else{
console.log('请求失败了',xhr.response);
}
}
}
}
ajax('get','http://127.0.0.1:8087/Success') //请求成功了 访问成功
ajax('get','http://127.0.0.1:8087/Error')
// GET http://127.0.0.1:8087/Error 400 (Bad Request)
//请求失败了 访问失败
````
因为post方法传递的数据需要放在send方法里面而get的参数则放在url里面所以对ajax进行改进,创建一个data对象来存放参数，并且增加回调方法
````js
function ajax(obj){
const xhr = new XMLHttpRequest()
// 声明一个方法将接收参数从{key:value}转为&key=value格式
let params = ''
for(let key in obj.data){
params += `${key}=${obj.data[key]}&`
}
// 这样拼出来的字符串最后面会是&而我们不需要最后面的&所以将他截取掉
params = params.substr(0,params.length-1)
obj.method.toUpperCase() == 'GET' && (obj.url +=`?${params}`)
// 初始化请求 声明方法和地址
xhr.open(obj.method,obj.url,obj.async)
// 发送请求
xhr.send()
xhr.onreadystatechange = function(){
// 4为请求完毕获取所有数据
if(xhr.readyState==4){
if(xhr.status>=200 && xhr.status<300){
obj.success(xhr.response)
}else{
obj.error(xhr.response)
}
}
}
}
ajax({
method:'get',
url:'http://127.0.0.1:8087/Success',
async:true,
data:{name:'小明',age:18},
success(res){
console.log('请求成功',res);
},
error(err){
console.log('请求失败',err);
}
})//请求成功 访问成功
//Request URL: http://127.0.0.1:8087/Success?name=%E5%B0%8F%E6%98%8E&age=18
ajax({
method:'post',
url:'http://127.0.0.1:8087/GetJson',
async:true,
data:{name:'小明',age:18},
success(res){
console.log('请求成功',res);
},
error(err){
console.log('请求失败',err);
}
})/*
请求成功 {"name":"张三","age":18}
传递的参数：Request Payload
{name: "小明", age: 18}
*/
````
因为发送ajax请求的时候会带有请求头信息，根据请求头信息的不同参数格式也会发生变化所以在添加请求头部信息，根据请求头部信息传递参数格式,所以修改一下代码
````js
function ajax(obj){
const xhr = new XMLHttpRequest()
// 声明一个方法将接收参数从{key:value}转为&key=value格式
let params = ''
for(let key in obj.data){
params += `${key}=${obj.data[key]}&`
}
// 这样拼出来的字符串最后面会是&而我们不需要最后面的&所以将他截取掉
params = params.substr(0,params.length-1)
obj.method.toUpperCase() == 'GET' && (obj.url +=`?${params}`)
// 初始化请求 声明方法和地址
xhr.open(obj.method,obj.url,obj.async)
// 发送请求
if(obj.method.toUpperCase() == 'POST'){
// 接收一个头部信息
let ContentType = obj.headers['Content-Type']
xhr.setRequestHeader('Content-Type',ContentType)
//xhr.send(obj.data)如果这样的话传递的参数则会是一个[object Object]所以需要转成json字符串
ContentType=='application/json' ? xhr.send(JSON.stringify(obj.data)) : xhr.send(params)
}else{
xhr.send()
}
xhr.onreadystatechange = function(){
// 4为请求完毕获取所有数据
if(xhr.readyState==4){
if(xhr.status>=200 && xhr.status<300){
obj.success(xhr.response)
}else{
obj.error(xhr.response)
}
}
}
}
ajax({
method:'post',
url:'http://127.0.0.1:8087/GetJson',
async:true,
data:{name:'小明',age:18},
headers:{
'Content-Type':'application/json'
},
success(res){
console.log('请求成功',res);
},
error(err){
console.log('请求失败',err);
}
})//请求参数依然是json格式的{name: "小明", age: 18}
ajax({
method:'post',
url:'http://127.0.0.1:8087/GetJson',
async:true,
data:{name:'小明',age:18},
headers:{
'Content-Type':'application/x-www-form-urlencoded'
},
success(res){
console.log('请求成功',res);
},
error(err){
console.log('请求失败',err);
}
})//请求格式为Form Data 的 name=小明&age=18
````
这样封装的话写的太多需要的参数，并且返回的都是字符串类型的值如果是要json格式的则需要再转一下，每次都很麻烦所以设置一下默认参数和返回参数
````js
function ajax(obj){
// 设置默认参数
let option = {
method:'get',
url:'',
async:true,
data:{},
headers:{
'Content-Type':'application/x-www-form-urlencoded'
},
success(){
},
error(){
}
}
option = {...option,...obj}
const xhr = new XMLHttpRequest()
// 声明一个方法将接收参数从{key:value}转为&key=value格式
let params = ''
for(let key in option.data){
params += `${key}=${option.data[key]}&`
}
// 这样拼出来的字符串最后面会是&而我们不需要最后面的&所以将他截取掉
params = params.substr(0,params.length-1)
option.method.toUpperCase() == 'GET' && (option.url +=`?${params}`)
// 初始化请求 声明方法和地址
xhr.open(option.method,option.url,option.async)
// 发送请求
if(option.method.toUpperCase() == 'POST'){
// 接收一个头部信息
let ContentType = option.headers['Content-Type']
xhr.setRequestHeader('Content-Type',ContentType)
//xhr.send(option.data)如果这样的话传递的参数则会是一个[object Object]所以需要转成json字符串
ContentType=='application/json' ? xhr.send(JSON.stringify(option.data)) : xhr.send(params)
}else{
xhr.send()
}
xhr.onreadystatechange = function(){
// 4为请求完毕获取所有数据
if(xhr.readyState==4){
// 获取相应头的信息
let head = xhr.getResponseHeader('Content-Type')
// json格式的话会返回application/json; charset=utf-8 而字符串格式的话会返回 text/html; charset=utf-8
let data = head.includes('application/json')?JSON.parse(xhr.response):xhr.response
if(xhr.status>=200 && xhr.status<300){
option.success(data)
}else{
option.error(data)
}
}
}
}
ajax({
url:'http://127.0.0.1:8087/Success',
data:{name:'小明',age:18},
success(res){
console.log('请求成功',res);
},
error(err){
console.log('请求失败',err);
}
})//请求成功 访问成功 Request URL: http://127.0.0.1:8087/Success?name=%E5%B0%8F%E6%98%8E&age=18
ajax({
method:'post',
url:'http://127.0.0.1:8087/GetJson',
data:{name:'小明',age:18},
success(res){
console.log('请求成功',res);
},
error(err){
console.log('请求失败',err);
}
})/*请求成功 请求成功
{name: "张三", age: 18}
age: 18
name: "张三"
__proto__: Object
*/
````
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！