js中ajax-js中Ajax的工作原理 收藏 0

前端 JS 之 AJAX 简介及使用

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

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

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

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

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

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

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

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

参数解析：

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

创建完 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

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

最后，附上一个简单的完整 AJAX 实例：

~

~

~ 本文完

~

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

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

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

JavaScript全解析—Ajax是什么

Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式Web应用程序的技术，通过异步通信与服务器进行数据交互，可以在不重新加载整个页面的情况下更新页面内容。它使得Web应用程序更加动态和用户友好。本文将详细解析Ajax的特点、原理及其在前后端交互中的应用。

云服务器，高防服务器就选蓝易云，头条搜索：蓝易云

云服务器，高防服务器就选蓝易云，头条搜索：蓝易云

云服务器，高防服务器就选蓝易云，头条搜索：蓝易云

Ajax本质上是前端与服务器之间的一种异步通信方式，通过JavaScript技术来动态更新网页内容。它的核心是使用 XMLHttpRequest对象或现代浏览器提供的 fetch函数实现对服务器的HTTP请求。

Ajax中的“异步”意味着在请求数据时，不会阻塞页面上的其他操作。用户可以继续浏览和与页面进行交互，而后台的数据请求和响应处理在完成后再进行页面的局部更新。

用户事件触发

Ajax发送HTTP请求

服务器处理请求

服务器返回响应数据

页面局部更新，无需刷新

从上图可以看到，用户的操作（如点击按钮）会触发Ajax请求，Ajax与服务器进行数据交换后，将结果动态应用于页面。

Ajax技术主要由以下部分组成：

• JavaScript：负责控制异步请求和响应处理。
• HTML和CSS：用于定义页面的内容和样式。
• XMLHttpRequest或fetch：用于发送和接收HTTP请求和响应。

尽管Ajax的名字中包含“XML”，但它不仅限于使用XML作为数据格式。它还支持其他格式，如JSON（最常用）、HTML、文本，甚至是自定义格式。

Ajax最大的特点在于它的异步性，使得页面无需刷新即可从服务器获取数据。通过异步处理，Ajax可以：

• 避免页面的整体刷新，从而提供更好的用户体验。
• 允许用户在请求过程中进行其他操作，提升页面的响应速度和交互性。

使用JavaScript中的 XMLHttpRequest对象或现代 fetch函数，开发者可以向服务器发送请求并异步获取响应：

• xhr.open(\’GET\’, \’https://api.example.com/data\’, true)：设置请求类型为 GET，目标URL为API端点，true表示请求是异步的。
• xhr.onreadystatechange：用于监听请求的状态变化，readyState为 4且 status为 200时表示请求成功，接着处理响应数据。

相对于 XMLHttpRequest，fetch提供了更简单和现代化的方式来处理Ajax请求，并支持 Promise。

• fetch()：发送HTTP请求，并返回一个 Promise。
• response.json()：将响应转换为JSON对象，便于数据处理。
• .catch()：用于捕获请求过程中的错误。

Ajax的核心优势在于可以实现页面的局部更新，避免整个页面的刷新。这一特性在以下场景尤为有用：

• 动态表单提交：表单提交后，页面无需刷新，只更新提交结果。
• 实时数据更新：例如，股票价格、评论列表等，通过Ajax获取最新数据并更新页面。
• 搜索框建议：在用户输入时，通过Ajax请求建议内容，实时显示下拉建议列表。

• 获取HTML内容：通过 fetch获取需要动态插入的HTML片段。
• 更新页面：通过 innerHTML将响应内容插入到特定页面元素中。

Ajax还可以用来实现异步表单提交，避免页面重载，使得用户体验更为流畅。

• event.preventDefault()：阻止表单的默认提交行为。
• new FormData()：收集表单中的数据，便于Ajax传输。
• fetch()：使用 POST方法提交表单数据，并通过异步方式处理响应。

• 提升用户体验：通过异步通信和局部更新，减少页面刷新次数，提升整体用户体验。
• 减少服务器压力：只更新页面中需要的部分，减少服务器负担，提升传输效率。
• 实现动态交互：可以动态加载数据或更新页面部分内容，提供更灵活和流畅的用户交互体验。

• SEO问题：由于Ajax的动态加载机制，爬虫可能无法正确索引页面内容，从而影响搜索引擎的抓取。
• 浏览器兼容性：早期的浏览器对Ajax的支持存在兼容性问题，虽然现代浏览器对此支持已经非常好，但仍需关注旧版本浏览器。
• 调试难度：Ajax请求是异步的，调试时可能需要借助浏览器的开发者工具进行请求跟踪，排查问题较为复杂。

Ajax技术在现代Web开发中扮演了重要角色，通过异步通信机制、局部页面更新等功能，极大地提升了用户的交互体验和页面的响应速度。无论是表单提交、实时数据更新还是局部内容加载，Ajax都为开发者提供了一种更加灵活的前后端交互方式。

通过以上的解析，希望您能对Ajax有一个全方位的理解，能够灵活应用于Web开发中，打造更流畅、动态的交互式应用。

Ajax是什么？JavaScript中如何使用Ajax技术进行网络请求？

“这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

这个世界泥泞破碎

却也能开出温柔的花来

– 2023.06.28 –

在web初期阶段，前端想要获取后端服务信息需要刷新整个页面，这种方式既耗时又让用户体验十分糟糕，那么怎么解决这个问题呢？

想要搭建起前端和后端的快速通道，这个时候就需要使用Ajax。今天小编所要讲的内容就是在JS中如何通过Ajax技术进行网络请求。

Ajax是什么？

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括：HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。

使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

Ajax的优点：

• 可以无需刷新页面而与服务器端进行通信；
• 允许你根据用户事件来更新部分页面内容。

Ajax的缺点：

• 没有浏览历史，不能回退；
• 存在跨域问题（同源）；
• SEO不友好。

Ajax 原理（发送Ajax请求的五个步骤）

接下来我们来了解一下Ajax 原理是什么，以及发送Ajax请求的五个步骤，其实也就是使用 XMLHttpRequest 对象的五个步骤。

一个完整的 HTTP 请求需要的是：

• 请求的网址、请求方法 get/post。
• 提交请求的内容数据、请求主体等。
• 接收响应回来的内容。

发送 Ajax 请求的五个步骤：

1）创建异步对象，即 XMLHttpRequest 对象。

2）使用 open 方法设置请求参数。open(method, url, async)。参数解释：请求的方法、请求的 url、是否异步。第三个参数如果不写，则默认为 true。

3）发送请求：send()。

4）注册事件：注册 onreadystatechange 事件，状态改变时就会调用。如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。

5）服务端响应，获取返回的数据。

在 JavaScript 中，XMLHttpRequest 是客户端的一个 API，它为浏览器与服务器通信提供了一个便捷通道。现代浏览器都支持 XMLHttpRequest API，如 IE 7+、Firefox、Chrome、Safari 和 Opera。

发送请求

发送请求的方法：

open(method, url, async);

参数解释：

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）

另外还有个方法：（仅用于 POST 请求）

send(string);

POST 请求时注意：

如果想让像form表单提交数据那样使用POST请求，就需要使用 XMLHttpRequest 对象的 setRequestHeader()方法来添加 HTTP 头。然后在 send() 方法中添加想要发送的数据：

xmlhttp.open(\’POST\’, \’ajax_test.php\’, true);

xmlhttp.setRequestHeader(\’Content-type\’, \’application/x-www-form-urlencoded\’);

xmlhttp.send(\’name=smyhvae&age=27\’);

onreadystatechange 事件

注册 onreadystatechange 事件后，每当 readyState 属性改变时，就会调用 onreadystatechange 函数。

readyState：（存有 XMLHttpRequest 的状态。从 0 到 4 发生变化）

• 0: 请求未初始化
• 1: 服务器连接已建立
• 2: 请求已接收
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

status：

• 200: “OK”。
• 404: 未找到页面。

在 onreadystatechange 事件中，当 readyState 等于 4，且状态码为 200 时，表示响应已就绪。

服务器响应的内容

• responseText：获得字符串形式的响应数据。
• responseXML：获得 XML 形式的响应数据。

如果响应的是普通字符串，就使用 responseText；如果响应的是 XML，使用 responseXML。

手写第一个 Ajax 请求

get 请求：

//【发送ajax请求需要五步】

//（1）创建XMLHttpRequest对象

var xmlhttp = new XMLHttpRequest();

//（2）设置请求的参数。包括：请求的方法、请求的url。

xmlhttp.open(\’get\’, \’02-ajax.php\’);

//（3）发送请求

xmlhttp.send();

//（4）注册事件。 onreadystatechange事件，状态改变时就会调用。

//如果要在数据完整请求回来的时候才调用，我们需要手动写一些判断的逻辑。

xmlhttp.onreadystatechange = function () {

// 为了保证 数据 完整返回，我们一般会判断 两个值

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

//（5）服务端相应：如果能够进入这个判断，说明数据请求成功了

console.log(\’数据返回成功：\’ + JSON.stringify(xmlhttp.responseText));

// 伪代码：按业务需要，将接口返回的内容显示在页面上

// document.querySelector(\’h1\’).innerHTML = xmlhttp.responseText;

}

};

post请求：

//（1）异步对象

var xmlhttp = new XMLHttpRequest();

//（2）设置请求参数。包括：请求的方法、请求的url。

xmlhttp.open(\’post\’, \’02.post.php\’);

// 如果想要使用post提交数据,必须添加此行

xmlhttp.setRequestHeader(\’Content-type\’, \’application/x-www-form-urlencoded\’);

//（3）发送请求

xmlhttp.send(\’name=fox&age=18\’);

//（4）注册事件

xmlhttp.onreadystatechange = function () {

//（5）服务端相应

if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {

alert(xmlhttp.responseText);

}

};

封装 Ajax 请求（重要）

上面的代码，执行顺序很好理解，但在实战开发中，是不会这么写的。假如你的页面中，需要调十次接口，那岂不是要手写十遍 Ajax 请求？这样会导致大量的重复代码。

所以，我们需要把重复代码封装成一个公共函数，然后通过回调函数处理成功和失败的逻辑。

封装 Ajax 请求的代码如下：(get 请求为例)

// 封装 Ajax为公共函数：传入回调函数 success 和 fail

function myAjax(url, success, fail) {

// 1、创建XMLHttpRequest对象

var xmlhttp;

if (window.XMLHttpRequest) {

xmlhttp = new XMLHttpRequest();

} else {

// 兼容IE5、IE6浏览器。不写也没关系

xmlhttp = new ActiveXObject(\’Microsoft.XMLHTTP\’);

}

// 2、发送请求

xmlhttp.open(\’GET\’, url, true);

xmlhttp.send();

// 3、服务端响应

xmlhttp.onreadystatechange = function () {

if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {

var obj = JSON.parse(xmlhttp.responseText);

console.log(\’数据返回成功：\’ + obj);

success && success(xmlhttp.responseText);

} else {

// 这里的 && 符号，意思是：如果传了 fail 参数，就调用后面的 fail()；如果没传 fail 参数，就不调用后面的内容。因为 fail 参数不一定会传。

fail && fail(new Error(\’接口请求失败\’));

}

};

}

// 单次调用 ajax

myAjax(\’a.json\’, (res) => {

console.log(res);

});

// 多次调用 ajax。接口请求顺序：a –> b –> c

myAjax(\’a.json\’, (res) => {

console.log(res);

myAjax(\’b.json\’, (res) => {

console.log(res);

myAjax(\’c.json\’, (res) => {

console.log(res);

});

});

});

学会了封装 get 请求之后，封装 post请求也是类似的写法。

下面再列举两种常见的请求方式：

Jquery-Ajax请求

// get请求

$(\’button\’).eq(0).click(()=>{

// 方法中有三个参数，给谁发,发什么参数（对象），回调

$.get(\’http://127.0.0.1:8001/jquery-server\’, {a:100,b:200}, (data)=>{

console.log(data);

})

});

// post请求

$(\’button\’).eq(1).click(()=>{

// 方法中有四个参数，给谁发 ,发什么参数（对象），回调 ,响应体数据类型

$.post(\’http://127.0.0.1:8001/jquery-server\’, {a:100,b:200}, (data)=>{

console.log(data);

})

});

// ajax方式

$(\’button\’).eq(2).click(()=>{

// 参数是一个对象

$.ajax({

//url

url:\’http://127.0.0.1:8001/jquery-server\’,

// 携带参数

data:{a:100, b:200},

// 响应体结果类型设置

// dataType:\’json\’,

// 请求类型

type:\’GET\’,

// 成功的回调函数

success:function(data){

console.log(data)

},

// 超时时间

// timeout:2000,

// 头信息设置

// headers:{},

// 失败的回调

// error:function(){}

})

})

Axios-Ajax请求

// 配置baseURL

// axios.defaults.baseURL = \’http://127.0.0.1:8001\’

// 有此配置项后，请求地址可省略一部分

const btn = document.querySelectorAll(\’button\’);

btn[0].addEventListener(\’click\’, ()=>{

//GET请求

axios.get(\’http://127.0.0.1:8001/axios-server\’,{

// 请求参数

params:{

a:700,

b:400

},

// 请求头信息

// headers:{

// name:\’张三\’,

// age:20

// },

// 回调函数

}).then(value =>{

console.log(value)

});

});

btn[1].addEventListener(\’click\’,()=>{

axios.post(\’http://127.0.0.1:8001/axios-server\’,{

// 携带参数

username:\’admin\’,

passward:\’admin\’,

})

})

btn[2].addEventListener(\’click\’, ()=>{

axios({

// 请求方法

method:\’POST\’,

//url

url:\’http://127.0.0.1:8001/axios-server\’,

// 参数

params:{

a:10,

b:100,

},

// 请求头

Headers:{

c:100,

d:200

},

// 请求体参数

// data: {

// username:\’admin\’,

// passward:\’admin\’,

// },

})

})

以上就是比较常用的一些请求方式，希望对大家理解Ajax网络请求这一块有点帮助。无论是哪种请求方式，还是要根据自身所处环境决定如何使用，介绍的只是方法，而具体逻辑还要看业务需求自行完成。

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com