理解Ajax核心技术：XMLHttpRequest详解

57 浏览量更新于2024-08-31 收藏 110KB PDF 举报

"这篇文章主要介绍了JavaScript中的Ajax基础知识，适合初学者了解和学习Ajax技术。Ajax是一种在不刷新整个页面的情况下，实现与服务器交互的技术，主要依赖于XMLHttpRequest对象。" 在现代网页应用开发中，Ajax（异步JavaScript和XML）扮演着至关重要的角色。它允许我们实现页面的部分更新，而不是每次需要数据时都刷新整个页面，从而提供了更好的用户体验。尽管名称中包含XML，但现在Ajax传输的数据格式并不局限于XML，也可以是JSON、文本或其他格式。 Ajax的核心是XMLHttpRequest对象，这是一个浏览器内置的对象，用于在后台与服务器进行通信。在所有主流浏览器中，XMLHttpRequest对象都得到了良好的支持，分为两个级别。第一级是基本功能，包括打开连接、发送请求和接收响应。第二级则增加了更多的特性，如与表单更好地配合以及对其他相关规范的支持。让我们通过一个简单的例子来理解XMLHttpRequest对象的使用。在这个例子中，当用户点击按钮时，我们将使用Ajax向服务器发送请求并更新页面内容： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example</title> </head> <body> <div> <button>Apples</button> <button>Cherries</button> <button>Bananas</button> </div> <div id="target"> Press a button </div> <script type="application/javascript"> var buttons = document.getElementsByTagName("button"); for (var i = 0; i < buttons.length; i++) { buttons[i].onclick = handleButtonPress; } function handleButtonPress(e) { // 创建新的XMLHttpRequest对象 var httpRequest = new XMLHttpRequest(); // 为readyState改变时设置事件处理器 httpRequest.onreadystatechange = handleResponse; // 打开一个连接到服务器的请求 httpRequest.open('GET', '/api/fruit', true); // 发送请求 httpRequest.send(); // 当服务器响应准备就绪时，此函数会被调用 function handleResponse() { if (httpRequest.readyState === 4 && httpRequest.status === 200) { var targetDiv = document.getElementById('target'); targetDiv.innerHTML = httpRequest.responseText; } } } </script> </body> </html> ``` 在这个示例中，当用户点击按钮时，`handleButtonPress`函数会被调用。它创建了一个新的XMLHttpRequest对象，并设置了`onreadystatechange`事件处理器，当服务器的响应准备好时，`handleResponse`函数将处理响应。`open`方法打开一个到服务器的GET请求，参数为URL、请求类型和是否异步。最后，`send`方法发送请求。一旦服务器返回响应，`handleResponse`函数检查请求是否成功（即`readyState`为4且`status`为200），然后更新页面上的`target`元素的内容为服务器返回的数据。 Ajax不仅仅涉及发送GET请求，还可以使用POST、PUT、DELETE等HTTP方法发送数据到服务器。此外，还可以通过`setRequestHeader`方法设置请求头，以发送额外的信息，如Content-Type或Authorization。在实际应用中，通常会使用库或框架，如jQuery、axios或fetch API，来简化Ajax操作，因为它们提供了更简洁的API和更好的兼容性处理。然而，理解XMLHttpRequest的基础知识对于深入理解这些库的工作原理和解决相关问题至关重要。因此，学习和掌握Ajax的基础是每个JavaScript开发者必备的技能。

Javascript 基础基础---Ajax入门必看入门必看

下面小编就为大家带来一篇Javascript 基础---Ajax入门必看。小编觉得挺不错的，现在就分享给大家，也给大家

做个参考。一起跟随小编过来看看吧

Ajax 是现代Web 应用程序开发的一项关键工具。它让你能向服务器异步发送和接收数据，然后用 Javascript 解析。 Ajax 是

Asynchronous JavaScript and XML （异步JavaScript 与XML）的缩写。

Ajax 核心规范的名称继承于用来建立和发起请求的 Javascript 对象：XMLHttpRequest 。这个规范有两个等级。所有主流浏

览器都实现了第一级，它代表了基础级别的功能。第二级扩展了最初的规范，纳入了额外的事件和一些功能来让它更容易与

form 元素协作，并且支持一些相关规范。

1. Ajax起步起步

Ajax 的关键在于 XMLHttpRequest 对象，而理解这个对象的方法是看个例子。下面代码展示了 XMLHttpRequest 对象的简单

用法：

<!DOCTYPE html>

<head>

<title>Example</title>

</head>

<body>

<div>

<button>apples</button>

<button>cherries</button>

<button>bananas</button>

</div>

Press a button

</div>

var buttons = document.getElementsByTagName("button");

for(var i=0; i<buttons.length; i++){

buttons[i].onclick = handleButtonPress;

}

//脚本会调用此函数以响应 button 控件的 click 事件

function handleButtonPress(e){

//创建一个新的 XMLHttpRequest 对象

var httpRequest = new XMLHttpRequest();

//给 onreadystatechange 事件设置一个事件处理器

httpRequest.onreadystatechange = handleResponse;

//使用 open 方法来指定 HTTP 方法和需要请求的 URL (即告诉 httpRequest 对象你想要做的事)

httpRequest.open("GET", e.target.innerHTML+".html");

//这里没有向服务器发送任何数据，所以 send 方法无参数可用

httpRequest.send();

}

//处理响应

//一旦脚本调用了 send 方法，浏览器就会在后台发送请求到服务器。因为请求是在后台处理的，所以Ajax 依靠事件来通知这个请求的进展情况。

function handleResponse(e){

//当 onreadystatechange 事件被触发后，浏览器会把一个 Event 对象传递给指定的处理函数，target 属性则会被设为与此事件关联的XMLHttpRequest

if(e.target.readyState == XMLHttpRequest.DONE && e.target.status == 200){ //请求成功

document.getElementById("target").innerHTML = e.target.responseText; //显示被请求文档的内容

}

</script>

</body>

</html>

三个额外的文档非常简单：

<!DOCTYPE html>

<head>

<title>Apples</title>

<style>

img { float:left;padding:2px;margin:5px;border: medium double black;background-color: lightgrey; width: 100px;height: 100px;}

</style>

</head>

<body>

<p>

下载后可阅读完整内容，剩余5页未读，立即下载

weixin_38682406

粉丝: 5
资源: 910

理解Ajax核心技术：XMLHttpRequest详解

Ajax入门例子项目

ajax从入门到精通

ajax入门

javascript 从入门到精通 pdf csdn

javascript从入门到精通第四版

javascript从入门到精通 pdf 第五版 电子书

javascript入门

适合初学者的javascript相关书籍

廖雪峰javascript教程pdf

javascript 快速搞定前端技术一面

最新资源

javascript从入门到精通 pdf 第五版电子书