JavaScript-Ajax基础讲解

最新推荐文章于 2026-04-22 02:12:53 发布

原创最新推荐文章于 2026-04-22 02:12:53 发布 · 2.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #html5

JavaScript 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了Ajax的基础知识，包括其异步特性、局部刷新功能和请求过程。讲解了XMLHttpRequest对象及其兼容性处理，强调了GET和POST请求的区别。同时，文章探讨了回调地狱问题，并引入Promise对象作为解决方案，描述了Promise的三种状态和如何使用.then()和.catch()处理异步操作的结果。

ajax概述：

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

ajax的特点：

1.支持异步请求

2.实现局部刷新

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

ajax运用：

前端内置请求对象 --> 设置请求地址（携带数据）-- > 发送请求 --> 监听请求状态 —>请求完成后后端返回响应的数据

1.创建一个请求对象 request 请求 response 响应

let xhr = new XMLHttpRequest()

注意：XMLHttpRequest(有兼容问题)

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

封装方法解决兼容问题：

//兼容各大浏览器
function createxhr(){
    if(window.XMLHttpRquest){
        return new XMLHttpRequest()
    }
        return new ActiveXobject("Microsoft.XMLHTTP");  //兼容ie6版本
}

2.设置请求地址

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

第一个参数为请求方法（get为打开浏览器请求，post为表单提交请求，一般要求大写）

第二个参数为请求地址

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

3.发送请求

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

xhr.send()

4.监听请求状态作出判断

onreadystatechange 监听的事件

readyState 一个请求的状态码

0 表示没有请求

1 表示准备发送请求

2 表示请求已经发送

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

4 表示请求完成响应结束

status http状态码

1开头表示成功继续操作

2开头表示已经完成

3开头表示重定向

4开头表示客户端错误

5开头表示服务器端错误

5.请求完成后，读取响应数据

xhr.onreadystatechange = function(){
    //判断是否请求成功
    if(xhr.readyState ==4 &&/^20\d$/.test(xhr.status){
       console.log(xhr.responseText);  //获取响应的内容
        //response 返回响应体
        //responseText 返回响应的文本
        //responseType 返回响应数据类型
       })
}

post 和get 请求的特点

POST:

1.封装到请求体中

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

3.post请求对应的安全性和携带的内容比get要强（经常用于表单提交）

4.post请求的效率低于get请求

//1.创建请求对象
let xhr = new XMLHttpRequest()
//2.设置请求方式和地址
xhr.open ('POST','http://www.baidu.com')
//6.设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//3.发送请求
xhr.send('unname=1&upwd=2') //携带参数
//4.监听请求状态
xhr.onreadystatechange(){
    //获取响应内容
    if(xhr.readyState == 4 && /^20\d$/.test(xhr.status)){
       console.log(xhr.responseText) 
    }
}

GET:

1.请求携带内容会在地址栏显示，安全性低

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

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

#####

回调地狱

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

//第一个请求
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);
                        //..... 继续写对应的请求或者别的事件
                    }
                })
            }
        })
    }
})

这个代码的可维护性极低，代码的可阅读性也低

#####

Promise对象: 为了解决回调地狱的问题，ES6新增了promise的对象来解决回调地狱的问题

promise 三种状态

1.初始状态（等待）

2.成功状态（成功的结果）

3.失败状态（失败的结果）

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)
                }
             })
        })