上海学习网站建设,天津网站制作建设,成品源码78w78,西青房地产网站建设Ajax#xff08;Asynchronous JavaScript And XML#xff09;即异步 JavaScript 和 XML#xff0c;是一组用于在网页上进行异步数据交换的 Web 开发技术#xff0c;可以在不刷新整个页面的情况下向服务器发起请求并获取数据#xff0c;然后将数据插入到网页中的某个位置。…AjaxAsynchronous JavaScript And XML即异步 JavaScript 和 XML是一组用于在网页上进行异步数据交换的 Web 开发技术可以在不刷新整个页面的情况下向服务器发起请求并获取数据然后将数据插入到网页中的某个位置。这种技术能够实现增量式更新页面提高用户交互体验减少响应时间和带宽的消耗。
1. Ajax 介绍
使用 Ajax 技术可以通过 JavaScript 和 XMLHttpRequest 对象来向服务器获取数据。在 Ajax 请求的过程中可以通过定义回调函数来对请求的结果进行处理回调函数会在请求完成后执行通过这种方式可以更新页面内容或者响应用户操作。
1.1 Ajax 可以用来实现以下功能
异步更新页面内容如搜索建议、聊天框等在页面中特定区域显示动态数据提交表单数据而无需刷新整个页面与服务器进行交互不会导致页面跳转或刷新
1.2 Ajax 的主要优点包括
提高用户体验通过减少页面的重载和刷新使得网站变得更加灵活和动态。减轻服务器负载通过使用 Ajax可以有效减少服务器接收到的请求次数和需要响应的数据量从而减轻服务器的负担。提高响应速度使用 Ajax 可以异步获取数据并更新页面从而提高响应速度。增加交互性通过使用 Ajax可以使得页面变得更加动态和交互性。
1.3 Ajax 的不足
Ajax 对搜索引擎优化(Seo)劣势较大对于需要 SEO 的项目需要谨慎选择使用 Ajax 技术。在使用 Ajax 时需要考虑数据安全性和网络安全性问题并采取相应的措施加以防范。不合适的使用 Ajax可能会造成降低网站质量和效率的问题所以需要根据实际需求来决定是否采用该技术。
2. 核心 API 使用 Ajax 技术可以通过 JavaScript 和 XMLHttpRequest 对象来向服务器获取数据。在 Ajax 请求的过程中可以通过定义回调函数来对请求的结果进行处理回调函数会在请求完成后执行通过这种方式可以更新页面内容或者响应用户操作。 我们需要使用 open() 方法打开一个请求该方法会初始化一个请求但并不会发送请求。它有三个必填参数以及一个可选参数 method请求的 HTTP 方法例如 GET、POST 等。url请求的 URL 地址。async是否异步处理请求默认为 true即异步请求。 onreadystatechange 一个回调函数在每次状态发生变化时被调用 readyState 0未初始化XMLHttpRequest 对象已经创建但未调用 open 方法。readyState 1已打开open 方法已经被调用但 send 方法未被调用。readyState 2已发送send 方法已经被调用请求已经被服务器接收。readyState 3正在接收服务器正在处理请求并返回数据。readyState 4完成服务器已经完成了数据传输。 send 向后端传递参数 例如 xhe.send(params)
3. ajax 发送请求示例
在 XMLHttpRequest 对象中onload 事件是指在 AJAX 请求成功完成后所触发的事件。当异步请求成功返回响应时该事件会被调用可以在该事件中处理服务器返回的数据。
使用 XMLHttpRequest 对象时在调用 send() 方法发送请求后会监听 readystatechange 事件该事件会在请求过程中多次触发它有多个状态其中当该对象 readyState 状态码值为 4 时表示已经获取到服务器的响应信息。但是只有当 HTTP 状态码为 200OK时响应才是有效的。此时你可以通过响应结果来更新页面反之则应该进行错误处理。
使用 onload 事件可以更加直接地判断 AJAX 请求是否成功只有在响应成功即获得正确的 HTTP 状态码时才会触发并且无需判断服务器响应的状态码。可以在 onload 事件中处理服务器返回的数据并根据需要更新网页内容。
3.1 发送 get 请求
const xhr new XMLHttpRequest();
xhr.open(GET, http://localhost:3000/api/txt);
xhr.onload function () {if (xhr.status 200) {document.querySelector(#result).innerText xhr.responseText;} else {console.log(Request failed. Returned status of xhr.status);}
};
xhr.send(null);3.2 发送 post 请求 application/json
const xhr new XMLHttpRequest();
xhr.open(POST, http://localhost:3000/api/post);
xhr.setRequestHeader(Content-Type, application/json);
xhr.onload function () {if (xhr.status 200) {document.querySelector(#result).innerText xhr.responseText;} else {console.log(Request failed. Returned status of xhr.status);}
};
xhr.send(JSON.stringify({ name: zhangsan, age: 18 }));3.3 发送 post 请求 application/x-www-form-urlencoded
const xhr new XMLHttpRequest();
xhr.open(POST, http://localhost:3000/api/post);
xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded);
xhr.onload function () {if (xhr.status 200) {document.querySelector(#result).innerText xhr.responseText;} else {console.log(Request failed. Returned status of xhr.status);}
};
xhr.send(namezhangsanage18);3.4 上传图片 multipart/form-data 使用 FormData 设置参数 浏览器会自动设置请求头为 multipart/form-data
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d6bYWOxr-1690338871942)(image.png)]
并且浏览器会自动添加 boundary 分割线
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h2olgBgJ-1690338871943)(image-1.png)]
document.querySelector(#file).addEventListener(change, function () {const xhr new XMLHttpRequest();xhr.open(POST, http://localhost:3000/api/upload);xhr.onload function () {if (xhr.status 200) {document.querySelector(#result).innerText xhr.responseText;} else {console.log(Request failed. Returned status of xhr.status);}};let file this.files[0];let formData new FormData();formData.append(file, file);xhr.send(formData);
});4. 中断请求和设置超时时间
中断请求: xhr.abort();, 并且会有一个中断的回调
xhr.addEventListener(abort, function (event) {console.log(我被中断了);
});设置超时时间: xhr.timeout 3000;
xhr.addEventListener(timeout, function (event) {console.log(超时啦);
});5. 获取进度 progress
在监听器中我们通过 event.loaded 和 event.total 属性获取已上传数据量和总数据量并计算上传进度最后将进度显示在页面上
xhr.addEventListener(progress, function (event) {document.querySelector(#progress).innerText ${((event.loaded / event.total) *100).toFixed(2)}%;
});
