当前位置:Gxlcms > JavaScript > 实例讲解使用原生JavaScript处理AJAX请求的方法_javascript技巧

实例讲解使用原生JavaScript处理AJAX请求的方法_javascript技巧

时间:2021-07-01 10:21:17 帮助过:7人阅读

Ajax 是异步的JavaScript和XML的简称,是一种更新页面某部分的机制。它赋予了你从服务器获取数据后,更新页面某部分的权力,从而避免了刷新整个页面。另外,以此方式实现页面局部更新,不仅能有效地打造流畅的用户体验,而且减轻了服务器的负载。

下面是对一个基本的 Ajax 请求进行剖析:

在这里, 我们创建了一个能向服务器发出 HTTP 请求的类的实例。然后调用其 open 方法,其中第一个参数是 HTTP 请求方法,第二个参数是请求页面的 URL。最后,我们调用参数为 null 的 send 方法。假如使用 POST 请求方法(这里我们使用了 GET),那么 send 方法 的参数应该包含任何你想发送的数据。

下面是我们如何处理服务器的响应:

onreadystatechange 是异步的,那么这就意味着它将可在任何时候被调用。这种类型的函数被称为回调函数——一旦某些处理完成后,它就会被调用。在此案例中,这个处理发生在服务器。

示例

便捷的 Ajax 方法也是不少人依赖 jQuery 的原因,但实际上原生 JavaScript 的 Ajax api 也很强大,并且基本的使用在各个浏览器中的差异不大,因此完全可以自行封装一个 Ajax 对象,下面是封装好的 Ajax 对象:

下面给出一个使用例子:

index.html




 
 原生 JavaScript 实现 Ajax
 
 


 
 
 
 
Ajax 获取内容
ajax.html



 
 ajax


 

成功获取到这段文本

具体的效果可以浏览完整 Demo 。

人气教程排行