ajax实现无刷新

### AJAX 实现无刷新技术详解 #### 一、引言 在现代Web开发中，提升用户体验是至关重要的。其中一种非常实用的技术就是AJAX（Asynchronous JavaScript and XML），它允许网页在不重新加载整个页面的情况下与服务器进行数据交互，从而实现了局部刷新或“无刷新”效果。本文将详细介绍如何使用AJAX实现无刷新功能。 #### 二、基础知识 **1. AJAX 的概念：** - AJAX 是一种用于创建快速动态网页的技术。 - 它通过后台载入和交换数据，并使网页的部分更新而无需重新加载整个页面。 - 主要依赖于JavaScript、XMLHttpRequest对象以及HTML和CSS等技术。 **2. XMLHttpRequest 对象：** - 这个对象是实现AJAX的关键。 - 它用于在后台与服务器进行异步数据交换。 - 不同浏览器可能需要使用不同的方法来创建这个对象。 **3. onreadystatechange 事件：** - 当readyState属性发生变化时触发。 - readyState 属性表示请求/响应过程的当前活动阶段。 - 最终状态为4，表示请求完成并且响应已就绪。 **4. HTTP 请求方法：** - POST：向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。 - GET：请求获取由请求URI所标识的资源。 #### 三、示例代码解析 **1. 创建 XMLHttpRequest 对象：** ```javascript function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try { // IE 7+, IE 6 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { // IE 5, IE 5.5 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert('不支持ajax'); return false; } } } ``` - 这段代码展示了如何兼容不同浏览器创建 XMLHttpRequest 对象。 - 使用 `try...catch` 结构处理可能出现的错误。 **2. 设置请求及发送：** ```javascript xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4) { var ret = xmlHttp.responseText; return ret; } } xmlHttp.open("post", "middle.jsp", true); xmlHttp.send(null); ``` - 设置 `onreadystatechange` 回调函数，在请求完成时执行。 - 使用 `open` 方法设置请求方式、URL 及是否异步。 - 使用 `send` 发送请求。 **3. 表单验证函数：** ```javascript function resubmit() { if (check()) { alert('ddd'); // var aaa = ajaxFunction(); // alert(aaa); } else { var variable = ""; if (login.value == null || login.value.length < 4 || login.value.length > 6) { variable += "请输入4-6个字符,字符类型\n"; } if (password1.value == null || password1.value.length < 4 || password1.value.length > 6) { variable += "请输入4-6个字符,字符类型\n"; } if (password1.value != password2.value) { variable += "两次输入不一致\n"; } alert(variable); } } ``` - 这个函数用于表单验证。 - 检查 `login` 和 `password` 是否符合要求。 **4. 弹出窗口：** ```javascript function openwindow() { window.showModalDialog("increase.jsp"); window.location.href = "user-manage.jsp"; } ``` - 使用 `showModalDialog` 打开一个模态对话框。 - 调用 `location.href` 更新页面地址。 **5. 删除记录：** ```javascript function dropa() { var log = $("#gridTable").jqGrid("getGridParam", "selrow"); if (null == log) { alert("请选择一条记录删除"); } else { var sj = jQuery("#gridTable").jqGrid('getRowData', log); var value = sj['loginName']; $.post("delete.jsp", {login: value}, function (data) { alert(data); window.location.href = "user-manage.jsp"; }); } } ``` - 使用 jQuery 获取选中的行数据。 - 发起 POST 请求到服务器端进行删除操作。 **6. 更新记录：** ```javascript function updatea() { var log = $("#gridTable").jqGrid("getGridParam", "selrow"); if (null == log) { alert("未选择修改，请选择一条记录"); } else { var sj = jQuery("#gridTable").jqGrid('getRowData', log); var log = trim(sj['loginName']); var use = trim(sj['userName']); var sty = trim(sj['userStyle']); var rem = trim(sj['remark']); $.post("update.jsp", {lly: log, us: use, st: sty, re: rem}, function (data) { window.location.href = "user-manage.jsp"; alert(data) }); } } ``` - 同样使用 jQuery 获取选中的行数据。 - 发起 POST 请求到服务器端进行更新操作。 #### 四、总结 通过以上示例可以看出，AJAX 技术能够极大地提升用户界面的友好性和交互性。它允许开发者在不刷新整个页面的情况下与服务器通信，使得网页应用变得更加灵活和高效。掌握了 AJAX 的基本原理和实现方法后，可以进一步探索更高级的应用场景，如动态加载内容、实时聊天等功能，从而开发出更加出色的Web应用程序。