AJAX的所有内容 (有代码)

最新推荐文章于 2023-01-14 00:15:31 发布

快乐的光头佬

最新推荐文章于 2023-01-14 00:15:31 发布

阅读量281

点赞数

分类专栏： javascr 前端文章标签： javascript

本文链接：https://blog.csdn.net/D____ppx/article/details/124180968

版权

javascr 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

前端

14 篇文章 0 订阅

订阅专栏

ajax概述

ajax全称异步的JavaScript和xml 他是用于发送http请求（支持异步请求）

ajax的特点

1.支持异步请求

2.实现局部刷新

3.在局部刷新的时候可以保持浏览器不刷新（不会产生历史记录）

ajax的运用

XMLHttpRequest（有兼容问题）

他是ajax的核心对象（负责请求的对象）

1.封装方法

//兼容各大浏览器
function createXhr(){
if(window.XMLHttpRequest){
return new XMLHttpRequest()
}
return new ActiveXObject("Microsoft.XMLHTTP");//兼容ie6
}

open 方法（打开一个地址以对应设置请求方式去请求）

xhr.open('GET','http://www.baidu.com')

send 方法（发送请求他可以携带请求体）

xhr.send()

onreadystatechange 监听的事件

xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && /^20\d$/.test(xhr.status)){
//接收数据
}
}

readyState 一个请求状态码

0 没有请求

1 准备发送请求

2 请求已经发送

3 请求已经发送且部分响应已经得到

4 请求完成响应结束

status http状态码

1开头成功继续操作 2开头已经完成 3.开头重定向 4.开头客户端错误 5.开头服务器错误

responseText 返回结果内容

xhr.responseText //他获取到是string类型

responseXML 返回的xml类型的内容

xhr.responseXML

get请求

//1.创建请求对象
let xhr = new XMLHttpRequest()
// 2.设置请求地址（携带数据）
xhr.open('GET',"https://jsonplaceholder.typicode.com/todos?_page=10&_limit=10")
//参数1请求的方法 get(打开浏览器) 请求 post请求（表单提交） 参数2为请求的地址
// 4.监听请求状态
xhr.onreadystatechange = function(){
// 5.请求完成以后 读取响应的数据
if(xhr.readyState == 4 && /^20\d$/.test(xhr.status)) {
console.log(xhr.responseText);//获取响应的内容 responseText
// response 返回响应体 responseText返回响应文本 responseType响应数据类型
}
}
// 3.发送请求
xhr.send()

GET请求的特点

1.他请求携带内容会在地址栏显示

2.浏览器默认的请求方式为GET

3.携带参数以?参数名=参数值&参数名=参数值

POST请求

//1.创建请求对象
let xhr = createXhr()
//2.set请求方式以及地址
xhr.open('POST','http://useker.cn/login')
//6.设置请求头 key value 俩个都是string类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //模拟
表单提交
//3.发送请求 send里面 没有? 也是用&拼接
xhr.send('uname=1&upwd=2') //他里面的内容会放在请求体中
//4.监听
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && /^20\d$/.test(xhr.status)){
//5.接收响应
console.log(xhr.responseText);
}
}

post请求的特点

1.封装到请求体中

2.如果想使用post请求必须指定请求方式为post

3.post请求对应的安全性和携带的内容比get要强

4.post请求的效率低于get请求（表单提交使用post）

封装ajax

封装的特性抽取共同的内容作为公共代码块（不同的内容做为参数）

不同点

请求方式请求地址回调函数参数不一样是否异步参数类型不一样

ajax({
method: 请求方式
url: 请求地址
aync: 是否异步 ture 默认为以异步
data: 请求参数
dataType: 响应的参数类型 object 默认要做json.parse操作
callback: 回调
})

ajax封装

//兼容各大浏览器
function createXhr(){
if(window.XMLHttpRequest){
return new XMLHttpRequest()
}
return new ActiveXObject("Microsoft.XMLHTTP");//兼容ie6
}
function ajax(options){//options是一个对象
//先准备默认的对象 存储默认
let defaultObj = {
method:'GET', //默认为get请求
url:'', //必填
aync: true, //默认为异步请求
data: '',
dataType: 'json', //默认响应数据类型为json 默认需要JSON.parse
callback(){}
}
//url地址没有传递或者传递是空值 直接出去
if(!options.url || options.url==''){
throw new Error('url地址必须不为空') //抛出一个错误
}
//取出传递options里面的数据 给到defaultObj
for(let key in options){
defaultObj[key] = options[key] //将对应的key进行赋值
}
//后面使用的就是defaultObj
//判断method是否是get或者post 其他形式报错 全部大写
if(defaultObj.method.toUpperCase() != "GET" &&
defaultObj.method.toUpperCase() != "POST"){
throw new Error('请求方式错误') //抛出一个错误
}
//判断callback是否是函数类型
if(!typeof defaultObj.callback == "function"){
throw new Error('回调函数类型错误') //抛出一个错误
}
//判断aync是否为boolean类型
if(!typeof defaultObj.aync == "Boolean"){
throw new Error('aync必须是boolean类型') //抛出一个错误
}
//对于data的类型做一个判断 如果是string类型直接拼接 如果是对象类型 需要转为对应的string
if(defaultObj.data.toString() == "[object Object]"){ //如果你是string类型调用
toString方法会直接返回对应内容
let dataStr = ""
for(let key in defaultObj.data){
dataStr+=key+'='+defaultObj.data[key]+"&"
}
//截图到最后一个&符号（把最后一个字符剔除）
dataStr = dataStr.slice(0,-1)
defaultObj.data = dataStr
}
//如果你是get请求 那么对应的请求数据和请求地址应该拼接
if(defaultObj.method.toUpperCase() == "GET"){
defaultObj.url+="?"+defaultObj.data
}
//创建一个请求对象
let xhr = createXhr()
//open请求地址
xhr.open(defaultObj.method.toUpperCase(),defaultObj.url)
//send发送请求
if(defaultObj.method.toUpperCase() == "POST"){
xhr.setRequestHeader('Content-Type', 'application/x-www-formurlencoded')
xhr.send(defaultObj.data)
}else{
xhr.send()
}
//监听请求
xhr.onreadystatechange = function(){
//接收响应
if(xhr.readyState == 4 && /^20\d$/.test(xhr.status)){
if(defaultObj.dataType == "json"){
let res = JSON.parse(xhr.responseText)//转换为json对象
defaultObj.callback(res) //调用回调方法 将对应响应结果带出
}else{
defaultObj.callback(xhr.responseText) //调用回调方法 将对应响应结果带
出
}
}
}
}

回调地狱

无限的在回调函数里面进行回调函数的调用

//第一个请求
ajax({
url:'https://jsonplaceholder.typicode.com/todos/1',
callback(res){
//第二个请求
ajax({
url:'https://jsonplaceholder.typicode.com/todos/1',
callback(res){
//第三个请求
ajax({
url:'https://jsonplaceholder.typicode.com/todos/1',
callback(res){
console.log(res);
//..... 继续写对应的请求或者别的事件
}
})
}
})
}
})

这个代码的可维护性极低，代码的可阅读性也低（为了使异步的请求有同步执行的机制）为了解决回调地狱的问题这个时候js的es6 帮我们增加了一个promise的对象来帮我们解决这个问题

Promise对象

promise翻译成中文的意思叫承诺

promise 三种状态 1.初始状态（等待） 2.成功状态（成功的结果） 3.失败状态（失败的结果）

Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。

promise可以监听异步请求的成功（返回数据）还是失败（返回报错）

then 成功的方法 里面包含了调用resolve这个函数里面的传递过来的参数（调用这个函数resolve 才能调用then）

.catch 失败的方法 里面包含了调用reject这个函数里面传递过来的错误（调用reject函数才能调用 catch）

使用步骤

1.先创建一个promise对象(里面可以传递一个函数这个函数里面可以包含异步的操作)

let promise = new Promise()

2.这个这个传递的函数里面声明俩个参数每一个参数都是一个函数（第一个是成功调用的函数，第二个是失败调用的函数）

let promise = new Promise((success,error)=>{
//异步的操作
})

3.将异步操作的代码块放入对应的promise的函数中

let promise = new Promise((success,error)=>{
//异步的操作
ajax({
url:'https://jsonplaceholder.typicode.com/todos/1',
callback:function(res){
console.log(res);
//调用成功的方法
success(res) //传递给对应的.then的参数
//如果有错误他会自动调用error方法
}
})
});

4.这个得到的promise对象有俩个方法这俩个方法可以接收对应的成功和失败方法调用传递的值

promise.then((res)=>{ //这个res参数值就是调用上面的resolve传过来的
//调用的内容
console.log(res); //成功方法调用接收的值
}) //返回这个也promise对象
promise.catch((error)=>{ //reject里面传过来的 失败的方法调用接收的值
console.log(error);
})

解决回调地狱

//第一个请求
new Promise((success,error)=>{
ajax({
url:'https://jsonplaceholder.typicode.com/todos/1',
callback(res){
console.log(res);
success('你吃了吗')
}
})
}).then((res)=>{
console.log("第二个请求"+res);
return new Promise((success,error)=>{
ajax({
url:'https://jsonplaceholder.typicode.com/todos/1',
callback(res){
console.log(res);
success('你吃饭了吗')
}
})
})
}).then((res)=>{
console.log("第三个请求"+res);
//第三个请求
ajax({
url:'https://jsonplaceholder.typicode.com/todos/1',
callback(res){
console.log(res);
}
})
})

promise封装ajax

//兼容各大浏览器
function createXhr(){
if(window.XMLHttpRequest){
return new XMLHttpRequest()
}
return new ActiveXObject("Microsoft.XMLHTTP");//兼容ie6
}
function ajax(options){//options是一个对象
//先准备默认的对象 存储默认
let defaultObj = {
method:'GET', //默认为get请求
url:'', //必填
aync: true, //默认为异步请求
data: '',
dataType: 'json' //默认响应数据类型为json 默认需要JSON.parse
}
//url地址没有传递或者传递是空值 直接出去
if(!options.url || options.url==''){
throw new Error('url地址必须不为空') //抛出一个错误
}
//取出传递options里面的数据 给到defaultObj
for(let key in options){
defaultObj[key] = options[key] //将对应的key进行赋值
}
//后面使用的就是defaultObj
//判断method是否是get或者post 其他形式报错 全部大写
if(defaultObj.method.toUpperCase() != "GET" &&
defaultObj.method.toUpperCase() != "POST"){
throw new Error('请求方式错误') //抛出一个错误
}
//判断aync是否为boolean类型
if(!typeof defaultObj.aync == "Boolean"){
throw new Error('aync必须是boolean类型') //抛出一个错误
}
//对于data的类型做一个判断 如果是string类型直接拼接 如果是对象类型 需要转为对应的string
if(defaultObj.data.toString() == "[object Object]"){ //如果你是string类型调用
toString方法会直接返回对应内容
let dataStr = ""
for(let key in defaultObj.data){
dataStr+=key+'='+defaultObj.data[key]+"&"
}
//截图到最后一个&符号（把最后一个字符剔除）
dataStr = dataStr.slice(0,-1)
defaultObj.data = dataStr
}
//如果你是get请求 那么对应的请求数据和请求地址应该拼接
if(defaultObj.method.toUpperCase() == "GET"){
defaultObj.url+="?"+defaultObj.data
}
//创建一个请求对象
let xhr = createXhr()
//open请求地址
xhr.open(defaultObj.method.toUpperCase(),defaultObj.url)
//send发送请求
if(defaultObj.method.toUpperCase() == "POST"){
xhr.setRequestHeader('Content-Type', 'application/x-www-formurlencoded')
xhr.send(defaultObj.data)
}else{
xhr.send()
}
//监听请求
return new Promise((success,error)=>{
xhr.onreadystatechange = function(){
//接收响应
if(xhr.readyState == 4 && /^20\d$/.test(xhr.status)){
let res
if(defaultObj.dataType == "json"){
res = JSON.parse(xhr.responseText)//转换为json对象
}else{
res = xhr.responseText
}
success(res)
}
//服务器的响应 状态码
if(!/^20\d$/.test(xhr.status)){
error(xhr.status)
}
}
})
}

测试

<script src="./promiseAjax.js"></script>
<script>
let promise = ajax({url:'https://jsonp/todos',data:{_page:10,_limit:10}})
promise.then((res)=>{
console.log(res);
})
promise.catch((err)=>{
console.log(err);
})
</script>

快乐的光头佬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX的所有内容 (有代码)

ajax概述ajax全称异步的JavaScript和xml 他是用于发送http请求（支持异步请求）ajax的特点1.支持异步请求2.实现局部刷新3.在局部刷新的时候可以保持浏览器不刷新（不会产生历史记录）ajax的运用XMLHttpRequest（有兼容问题）他是ajax的核心对象（负责请求的对象）1.封装方法//兼容各大浏览器function createXhr(){if(window.XMLHttpRequest){return new XMLHt
复制链接

扫一扫