余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

前端 JS 之 AJAX 简介及使用(js中ajax)

xiyangw 2022-11-25 11:38 22 浏览 0 评论

概述

AJAX 是一个缩写,它的全名是 Asynchronous JavaScript and XML,意思就是异步 JavaScript 和 XML,即用JavaScript执行异步网络请求

AJAX 不是一种新技术,而是一个在 2005 年被 Jesse James Garrett 提出的新术语,用来描述一种使用现有技术集合的‘新’方法,包括:

  • HTML 或 XHTML
  • CSS
  • JavaScript
  • DOM
  • XML
  • XSLT
  • XMLHttpRequest

尽管 X 在 AJAX 中代表 XML, 但由于 JSON 的许多优势,比如更加轻量以及作为 Javascript 的一部分,目前 JSON 的使用比 XML 更加普遍。JSON 和 XML 都被用于在 AJAX 模型中打包信息。

AJAX 的优势

传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页面。

AJAX 通过在后台与服务器进行少量数据交换,可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

XMLHttpRequest 对象

XMLHttpRequest(XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL,获取数据。这允许网页在不影响用户操作的情况下,更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。

AJAX 的工作原理

其工作原理基本经过以下几个步骤:

  1. 客户端发送请求,请求交给 xhr。
  2. xhr 把请求提交给服务。
  3. 服务器进行业务处理。
  4. 服务器响应数据交给 xhr 对象。
  5. xhr 对象接收数据,由 JavaScript 把数据写到页面上。

AJAX 的创建步骤

根据 AJAX 的工作原理,它的创建步骤主要包括:

  1. 创建 XMLHttpRequest 对象,即创建一个异步调用对象。
  2. 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息。
  3. 设置响应 HTTP 请求状态变化的函数。
  4. 发送 HTTP 请求。
  5. 获取异步调用返回的数据。
  6. 使用 JavaScript 和 DOM 实现局部刷新。

AJAX 的具体使用

以下是 使用 AJAX 的完整流程。

1. 创建 XMLHttpRequest 对象

const request = new XMLHttpRequest();

2. 创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息

创建 HTTP 请求可以使用 XMLHttpReques t对象的 open() 方法,其语法代码如下:

request.open(method, url, async, user, password);

参数解析:

  • method 要使用的HTTP方法,比如 "GET"、"POST"、"PUT"、"DELETE" 等。
  • url 表示要向其发送请求的 URL 地址。
  • async (可选) 一个可选的布尔参数,表示是否异步执行操作,默认为 true。如果值为 false,send() 方法直到收到答复前不会返回。如果 true,已完成事务的通知可供事件监听器使用。如果 multipart 属性为 true 则这个必须为 true,否则将引发异常。
  • user (可选 用于认证用途的用户名,默认值为 null。
  • password (可选) 用于认证用途的密码,默认值为 null。

3. 设置响应 HTTP 请求状态变化的函数和服务端返回信息函数

创建完 HTTP 请求之后,应该就可以将 HTTP 请求发送给 Web 服务器了。然而,发送 HTTP 请求的目的是为了接收从服务器中返回的数据。从创建 XMLHttpRequest 对象开始,到发送数据、接收数据、XMLHttpRequest 对象一共会经历以下 5 种状态:

  • 未初始化状态。在创建完 XMLHttpRequest 对象时,该对象处于未初始化状态,此时 XMLHttpRequest 对象的 readyState 属性值为 0。
  • 初始化状态。在创建完 XMLHttpRequest 对象后使用 open() 方法创建了 HTTP 请求时,该对象处于初始化状态。此时 XMLHttpRequest 对象的readyState属性值为 1。
  • 发送数据状态。在初始化 XMLHttpRequest 对象后,使用 send() 方法发送数据时,该对象处于发送数据状态,此时XMLHttpRequest 对象的 readyState 属性值为 2。
  • 接收数据状态。Web 服务器接收完数据并进行处理完毕之后,向客户端传送返回的结果。此时,XMLHttpRequest 对象处于接收数据状态,XMLHttpRequest 对象的 readyState 属性值为 3。
  • 完成状态。XMLHttpRequest 对象接收数据完毕后,进入完成状态,此时 XMLHttpRequest 对象的 readyState 属性值为 4。此时接收完毕后的数据存入在客户端计算机的内存中,可以使用 responseText 属性或 responseXml 属性来获取数据。

总的来说,readyState 属性的值有以下几种:

  • 0 (未初始化) or (请求还未初始化)
  • 1 (正在加载) or (已建立服务器链接)
  • 2 (加载成功) or (请求已接受)
  • 3 (交互) or (正在处理请求)
  • 4 (完成) or (请求已完成并且响应已准备好)

只读属性 XMLHttpRequest.status 返回了 XMLHttpRequest 响应中的数字状态码。status 的值是一个无符号短整型。在请求完成前,status 的值为 0。值得注意的是,如果 XMLHttpRequest 出错,浏览器返回的 status 也为0:

  • UNSENT(未发送) 0
  • OPENED(已打开) 0
  • LOADING(载入中) 200
  • DONE(完成) 200
var xhr = new XMLHttpRequest();
console.log('UNSENT', xhr.readyState); // readyState 为 0

xhr.open('GET', '/api', true);
console.log('OPENED', xhr.readyState); // readyState 为 1

xhr.onprogress = function () {
    console.log('LOADING', xhr.readyState); // readyState 为 3
};

xhr.onload = function () {
    console.log('DONE', xhr.readyState); // readyState 为 4
};

xhr.send(null);

只有在XMLHttpRequest对象完成了以上5个步骤之后,才可以获取从服务器端返回的数据。因此,如果要获得从服务器端返回的数据,就必须要先判断XMLHttpRequest对象的状态:

const xhr = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // do something here
    }
}

4. 发送HTTP请求

XMLHttpRequest.send(data);

结束

最后,附上一个简单的完整 AJAX 实例:

<button id="ajaxButton" type="button">Make a request</button>

<script>
    var httpRequest;
    document.getElementById("ajaxButton").addEventListener('click', makeRequest);

    function makeRequest() {
        httpRequest = new XMLHttpRequest();

        httpRequest.onreadystatechange = alertContents;
        httpRequest.open('GET', 'test.html');
        httpRequest.send();
    }

    function alertContents() {
        if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200) {
                alert(httpRequest.responseText);
            } else {
                alert('There was a problem with the request.');
            }
        }
    }
</script>

~

~

~ 本文完

~

学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

大家好!我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!

知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!

相关推荐

学Web前端好找工作吗 一般需要用多少时间(学web前端可以做什么工作)
学Web前端好找工作吗 一般需要用多少时间(学web前端可以做什么工作)

  学Web前端好找工作吗?一般需要用多少时间?在编程领域,与用户接触最多的是前端,华丽的效果、引人注目的动效都是前端工作人员工作的重要内容。目前各大企业对于W...

2023-03-21 18:49 xiyangw

在尚学堂学习前端的三个月,我学会了….(尚学堂前端培训视频百度网盘)

在尚学堂的培训就要结束了,在这简短而充实的3个月中,有迷茫,有失落,有努力,有纠结,可是最多的,还是收获。这三个月的学习从前端开发的基础开始,学习使用HTML,CSS,JavaScript等一系列前...

怎样学前端?前端的培训机构(怎么学好前端)

首先告诉你的是,零基础学习开始学习web前端肯定难,web前端的专业程度本身就不简单,学习这事本来就是一件非常煎熬的事情,人都不愿意学习,可是没办法,为了生存掌握一个技能,如果你认真的对待,你就找不到...

学习web前端培训大概要花多少费用?(web前端培训哪里)
学习web前端培训大概要花多少费用?(web前端培训哪里)

学习web前端开发是目前非常热门的一个领域,它涉及到各种不同的技术和工具,包括HTML、CSS、JavaScript、前端框架和库、版本控制等等。如果你对...

2023-03-21 18:49 xiyangw

科班和培训出来的前端程序员有什么区别(培训出来前端上班差距好大)
科班和培训出来的前端程序员有什么区别(培训出来前端上班差距好大)

科班出身的前端程序员也就是指在大学里学习的本专业,而参加前端培训机构来学习开发技术的不只是有非科班出身的还有科班出身的,其实两者在本质上是没有什么区别的,要说有...

2023-03-21 18:49 xiyangw

零基础怎么学Web前端 大概需要用多长时间(web前端零基础要学多久)
零基础怎么学Web前端 大概需要用多长时间(web前端零基础要学多久)

  零基础怎么学Web前端?大概需要用多长时间?互联网发展越来越快,市场行业竞争力越来越大,IT行业成了很多大学生毕业后的理想选择。而相对于其他编程语言行业而言...

2023-03-21 18:48 xiyangw

IT培训一般要学多久?IT培训费用多少?(it培训吗)

IT培训是近年来比较热门的职业培训之一,不仅因为行业薪资高,而且付出和回报也是成正比的。大部分参加职业培训的人都会希望投资的钱和时间都能够有所回报。那么我们今天就来讲解下IT培训一般要学多久,以及IT...

学web前端难吗?需要学什么?(学web前端难吗?需要学什么软件)

很多朋友想学习web前端技术,心中也有知道了一些机构,但是迟迟没有报名的原因恐怕就是:零基础去web前端培训真的4个月真的能学会吗?因为害怕自己4个月后还是一无所知,那样既耽误时间又浪费钱。所以一直在...

杭州Web培训要多长时间?需要学习什么内容?(web培训学校)

Web前端开发作为互联网行业热门岗位之一,在近几年越来越受到了大家的喜爱,很多人纷纷想要从事Web前端开发工作。对于现阶段来看的话,参加专业的Web前端培训是学习前端开发技能的主要方式,那杭州Web前...

你还在担心前端培训班费用吗?看看这篇!(前端培训学费大概多少)

在互联网飞速发展的时代,前端开发越来越受行业的喜爱,前端开发学习乐趣要比后端多一些,小编相信大多数人是觉得这个职业是属于互联网IT的,认为薪资高而且工作体面,发展前景好。但许多人又对前端方面没有一个系...

成都web前端培训零基础应该怎么学习?(成都web前端工资一般多少)
成都web前端培训零基础应该怎么学习?(成都web前端工资一般多少)

众所周知前端需要学习的知识很多并且比较繁杂,前端技术的更新迭代又比较快,可能你在上一家公司用的是VUE框架,下一家公司就使用react框架,所以,学习前端需要大...

2023-03-21 18:47 xiyangw

4个月学web前端找不到工作正常吗?什么原因?(4个月学web前端找不到工作正常吗?什么原因呢)
4个月学web前端找不到工作正常吗?什么原因?(4个月学web前端找不到工作正常吗?什么原因呢)

4个月学前端找不到工作正常吗?如果是零基础学习4个月找不到工作很正常,因为短时间学习掌握基础知识没问题,但是缺乏真实的项目经验是影响找工作的最大因素,现在市面上...

2023-03-21 18:47 xiyangw

web前端培训费用大概多少(视频剪辑培训班学费一般多少)
web前端培训费用大概多少(视频剪辑培训班学费一般多少)

web前端开发的薪资水平在整个IT技术岗位中都是算比较高的,而且随着互联网的快速发展,对前端开发人才的需求量还在不断增加,因此吸引了越来越多的人通过培训方式进入...

2023-03-21 18:46 xiyangw

武汉Web前端培训哪里好?培训多久才能学会?(武汉 前端)
武汉Web前端培训哪里好?培训多久才能学会?(武汉 前端)

Web前端如今在互联网行业非常盛行,几乎每一个企业都少不了对Web前端人员的需求。正是因为如此,很多人想要学习Web前端从而实现高薪梦想。那么,武汉Web前端培...

2023-03-21 18:46 xiyangw

海宁IT培训,Web前端开发学起来难不难(web前端开发是什么)

Web前端工程师是谐和前端设计师、后端程序员完成网站页面或步伐的界面丑化、交互体验的一个地位。在互联网高速进展的本日,在一系列的招聘网站上天天都有不少web前端全栈工程师雇用需要,web前端失业远景辽...

取消回复欢迎 发表评论: