[Javaweb]Ajax

[Javaweb]Ajax

文章目录

​​Ajax概述​​​​同步和异步​​​​Ajax基本操作​​

Ajax概述

​​AJAX​​ (Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。

​​JavaScript​​​ 表明该技术和前端相关；​​XML​​ 是指以此进行数据交换

AJAX 作用有以下两方面：

与服务器进行数据交换：通过AJAX可以给服务器发送请求，服务器将数据直接响应回给浏览器。

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用校验，等等…

同步和异步

同步发送请求过程如下：

浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。异步发送请求过程如下：

浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

Ajax基本操作

首先服务端的代码很好写：

@WebServlet("/AjaxDemo1")public class ServletAjaxDemo1 extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.getWriter().write("hello,Ajax~"); }}

然后就是前端代码，我们可以参考w3c：

首先我们要创建核心对象，Ajax 的核心是 XMLHttpRequest 对象。

var x(window.XMLHttpRequest) { x= new XMLHttpRequest(); } else { // code for IE6, IE5 x= new ActiveXObject("Microsoft.XMLHTTP");}

其次我们要发送请求： 如需向服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

x"ajax_info.txt", true);x还是 POST？ GET 比 POST 更简单更快，可用于大多数情况下。 不过，请在以下情况始终使用 POST： ①缓存文件不是选项（更新服务器上的文件或数据库） ②向服务器发送大量数据（POST 无大小限制） ③发送用户输入（可包含未知字符），POST 比 GET 更强大更安全

最后获取服务器响应： readyState 属性存留 XMLHttpRequest 的状态。

onreadystatechange 属性定义当 readyState 发生变化时执行的函数。

status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。

每当 readyState 发生变化时就会调用 onreadystatechange 函数。

注释：onreadystatechange 被触发五次（0-4），每次 readyState 都发生变化。

当 readyState 为 4，status 为 200 时，响应就绪：

function loadDoc() { var x= new XMLHttpRequest(); x= function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = this.responseText; } }; x"ajax_info.txt", true); x}

最后我们前端的完整代码如下：

接下来当我们访问此网站的时候：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。