AJAX技术详解：异步无刷新数据交互

需积分: 1 183 浏览量更新于2024-08-05 收藏 24KB MD 举报

"这篇学习笔记主要介绍了AJAX的基础知识，包括其异步特性和优缺点，以及XML的简单介绍和如何使用AJAX进行无刷新数据获取。此外，还提供了搭建测试服务器和创建基本AJAX请求的示例代码。" 在前端开发中，AJAX（Asynchronous JavaScript and XML）是一种用于创建动态网页的技术。它允许网页在不重新加载整个页面的情况下，与服务器交换数据并局部更新页面内容。这样可以提供更好的用户体验，因为用户不必等待整个页面重新加载，仅需关注所需更新的部分。 ## 1. AJAX简介 AJAX的核心优势在于其异步性，这意味着它可以在后台与服务器通信，不会中断用户的交互。这通常通过创建XMLHttpRequest对象来实现。当用户触发特定事件（如点击按钮）时，AJAX可以发送请求到服务器，获取数据，并在页面上进行相应的更新。 ### 优点 1. 无刷新获取数据 - 用户可以即时看到更新，无需等待整个页面刷新。 2. 部分页面更新 - 只有需要变动的部分会更新，提高页面加载速度。 ### 缺点 1. 无浏览历史 - 由于页面未实际跳转，浏览器的历史记录中不会显示这些操作，用户无法通过后退按钮恢复状态。 2. 跨域问题 - AJAX请求受到同源策略限制，只能向同源（协议、域名、端口都相同）的服务器发送请求，除非服务器支持CORS（跨源资源共享）。 3. SEO不友好 - 搜索引擎爬虫可能无法抓取通过AJAX加载的内容，影响搜索引擎优化。 ## 1.1 XML简介 XML（Extensible Markup Language）是一种标记语言，与HTML类似，但更加灵活。XML允许开发者自定义标签来结构化数据。例如，以下是一个简单的XML数据示例，用于表示学生信息： ```xml <student> <name>张三</name> <age>19</age> <gender>男</gender> </student> ``` ## 1.2 AJAX的使用要使用AJAX，首先需要搭建一个测试服务器。这里使用了Node.js的Express框架创建了一个简单的服务器，监听8000端口，并设置了一个GET请求路由`/get`，用于返回数据。 ```js const express = require('express'); const app = express(); app.use(express.static(__dirname + '/src')); // 暴露静态资源 app.get('/get', (request, response) => { response.send('我是get请求返回的界面'); }); app.listen(8000, function (err) { if (!err) { console.log('测试ajax请求的服务器成功了'); console.log('http:127.0.0.1:8000/1小试牛刀.html'); } }); ``` 接着，创建一个HTML页面，包含一个按钮和一个用于显示请求结果的`div`元素。当用户点击按钮时，将触发AJAX GET请求： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>1_ajax小试牛刀</title> <style> #content { width: 300px; height: 100px; border: 1px solid black; margin-top: 10px; } </style> </head> <body> <h3>该页面是测试：ajax小试牛刀</h3> <button id="btn">点我发送请求(原生js-ajax-get)</button> <div id="content"></div> <script> document.getElementById('btn').addEventListener('click', function () { var xhr = new XMLHttpRequest(); xhr.open('GET', '/get', true); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById('content').innerText = xhr.responseText; } }; xhr.send(); }); </script> </body> </html> ``` 这个示例展示了如何使用原生JavaScript创建一个AJAX GET请求，当点击按钮时，会向服务器发送请求，并将返回的文本填充到`#content`元素中。总结来说，AJAX技术对于创建交互式、高效的Web应用至关重要，它能够提升用户体验，但同时也需要注意其带来的问题，如跨域和SEO优化等。在实际开发中，通常会结合使用库或框架，如jQuery或Vue.js，来简化AJAX的使用。

qq_45309319

粉丝: 2
资源: 15

AJAX技术详解：异步无刷新数据交互

ajax 学习笔记源代码

AJAX学习笔记(内含实例)

Ajax学习笔记pink老师

ajax详细笔记csdn

黑马ajax笔记HTTP

武沛齐django笔记ajax请求

Ajax学习黄金市场报价

学习ajax需要先学什么

JQury 学习笔记

前端学习Ajax之前还要学习什么知识

最新资源