IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 【前端面试必知】ajax原理及其手写 -> 正文阅读

[JavaScript知识库]【前端面试必知】ajax原理及其手写

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍ajax的原理和实现方法。


一、ajax是什么

AJAX全称是 Async Javascript and XML,即异步的JS和XML,是一种创建交互式网页应用开发技术,可以在不重新加载整个网页的情况下,与服务器交换数据,并且更新部分网页。
原理:通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面。

在这里插入图片描述

二、实现过程

  • 创建Ajax的核心对象XMLHttpRequest对象;
  • 通过XMLHttpRequest对象的open()方法与服务器建立连接;
  • 构建请求所需的结构数据内容,并通过XMLHttpRequest对象的send()方法发送给服务器端;
  • 通过XMLHttpRequest对象提供的onreadystatechange事件监听服务器端你的通信状态;
  • 接受并处理服务器端向客户端响应的数据结果;
  • 将处理结果更新到HTML页面中。

1.创建XMLHttpRequest对象;

const xhr = new XMLHttpRequest();

2.与服务器建立连接;

xhr.open('GET',url,true);
//xhr.open(method, url, [async][, user][, password])

参数说明:
method:表示当前的请求方式,常见的有GET、POST
url:服务端地址
async:布尔值,表示是否异步执行操作,默认为true
user: 可选的用户名用于认证用途;默认为’null’
password: 可选的密码用于认证用途,默认为’null’

3.send()发送给服务器端;

xhr.send(null)
//xhr.send([body])

body: 在 XHR 请求中要发送的数据体,如果不传递数据则为 null

4.onreadystatechange事件监听通信状态;

xhr.onreadystatechange = function(){
    console.log('xhr.readyState',xhr.readyState);
    if(xhr.readyState === 4){
        if(xhr.status === 200){
            reslove(JSON.parse(xhr.responseText));
        }else{
            reject(new Error('请求失败'))
        }
    }
}

关于XMLHttpRequest.readyState属性有五个状态:

状态描述
0UNSENT(未打开)open()方法还未被调用
1OPENED(未发送)send()方法还未被调用
2HEADERS_RECEIVED(以获取响应头)send()方法已经被调用,响应头和响应状态已经返回
3LOADING(正在下载响应体)响应体下载中;responseText已经获取部分数据
4DONE(请求完成)整个请求过程已完毕
  • 整体的例子
function myAjax(url){
    const promise = new Promise((reslove,reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET',url,true);
        xhr.onreadystatechange = function(){
            console.log('xhr.readyState',xhr.readyState);
            if(xhr.readyState === 4){
                if(xhr.status === 200){
                    reslove(JSON.parse(xhr.responseText));
                }else{
                    reject(new Error('请求失败'))
                }
            }
        }
        xhr.send(null)
    })

    return promise;
}

const url = '/mock/data.json'
myAjax(url).then(data=>{
    console.log('data',data);
}).catch(err=>{
    console.error(err);
})

三、封装

function myAjax(options){
    const xhr = new XMLHttpRequest()
    options = options||{}
    options.type = (options.type || 'GET').toUpperCase()
    options.dataType = options.dataType || 'json'
    const params = options.data

    if(options.type === 'GET'){
        xhr.open('GET',options.url+'?'+params,true)
        xhr.send(null)
    }else if(options.type === 'POST'){
        xhr.open('POST',options.url,true)
        xhr.send(params)
    }

    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            let status = xhr.status
            if(status >= 200 && status < 300){
                options.success && options.success(xhr.responseText,xhr.responseXML)
            }else{
                options.fail && options.fail(status)
            }
        }
    }
}

myAjax({
    type:'get',
    dataType:'json',
    data:{},
    url:'/mock/data.json',
    success:function(text,xml){
        console.log(text);
    },
    fail:function(status){
        console.log(status);
    }
})

在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-06-06 17:16:21  更:2022-06-06 17:17:13 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 17:00:59-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码