AJAX概述，应用场景和其优缺点

╰半橙微兮° 2022-08-05 12:21 211阅读 0赞

AJAX小例子：

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    
    <script type="text/javascript">
    	window.οnlοad=function(){//文档加载完毕后执行
    		//得到btn元素
    		var btn = document.getElementById("btn");//获取btn这个id
    		//给按钮的点击事件注册监听
    		btn.onclick = function(){//在按钮被点击时执行
    			//获取h1元素对应的DOM对象
    			var h1 = document.getElementById("h1");
    			//给h1添加内容
    			h1.innerHTML = "Hello JavaScript!";
    		};
    	};
    </script>
    </head>
    <body>
    <button id="btn">点击这里局部刷新</button>
    <h1 id="h1"></h1>
    </body>
    </html>

## AJAX概述 ##

### 1　什么是AJAX ###

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML，可以是jSon 纯文本text）。

AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

l  与服务器异步交互；

l  浏览器页面局部刷新；

### 2.　同步交互与异步交互 ###

l  同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；

l  异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

### 3.　AJAX常见应用情景 ###

当我们在百度中输入一个“传”字后，会马上出现一个下拉列表！列表中显示的是包含“传”字的10个关键字。

其实这里就使用了AJAX技术！当文件框发生了输入变化时，浏览器会使用AJAX技术向服务器发送一个请求，查询包含“传”字的前10个关键字，然后服务器会把查询到的结果响应给浏览器，最后浏览器把这10个关键字显示在下拉列表中。