JavaWeb学习-AJAX-1- AJAX介绍

超、凢脫俗 2021-11-30 00:52 332阅读 0赞

进入到一个新的知识点的学习，这个知识点叫做Ajax，指的是异步的javascript和xml，Ajax不是一种编程语言，而是一种用于创建更好更快，交互性更强的web应用程序技术，是基于Javascript xml css html新用法。

**1.什么是Ajax**

下面这张图可以解释Ajax是由什么组成

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70][]

Ajax就是上面四个单词缩写，主要是看第一个单词，异步的，Asynchronous，相反肯定有同步的概念。

先简单理解下什么是同步和异步。

同步，之前我们练习demo过程中访问各种jsp页面，其实就是同步的，一个jsp页面全部元素对应的请求都同一时间发往web服务器，服务器开始处理，返回返回给客户端。没做一次操作，都需要刷新整个页面，这个就是同步的场景。

异步，拿手机淘宝举例，我们打开手机淘宝首页，里面有分很多子产品。例如天天特价，淘抢购等，同样是首页，淘抢购这个局部区域，一般都间隔一段时间进行刷新，显示出商品。这种局部刷新技术，就是异步请求。

**2.Ajax涉及技术名词解释**

JavaScript:更新局部的网页

XML：一般用于请求数据和响应数据的封装

XMLHttpRequest对象：发送请求到服务器并获得返回结果

CSS：美化页面样式

异步：发送请求后不等返回结果，由回调函数处理结果。

JavaScript中XMLHttpReuqest对象是整个Ajax技术的核心，它提供了异步发送请求的能力。

**3.同步请求和异步请求对比**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 1][]

**4.XMLHttpReuqest对象简介**

**4.1 XMLHttpReuqest的构造方法**

Eclipse上新建一个动态的web项目，然后在WebContext文件夹下新建一个1.html文件，输入下面代码。

<!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=UTF-8">
 <title>Insert title here</title>
 </head>
 <script type="text/javascript">
 		window.onload = function(){
 			var xmlhttp;
 			if (window.XMLHttpRequest){
 				// code for IE7+, Firefox, Chrome, Opera, Safari
 			 xmlhttp=new XMLHttpRequest();
 			} else{
 				// code for IE6, IE5
 			 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 			}
 			alert(xmlhttp);
 		}
 </script>
 <body>
 
 </body>
 </html>

选择任何浏览器去打开这个1.html文件，如果出现以下图效果，说明XMLHttpReuqest对象创建成功。

![2019072223343851.png][]

**4.2 XMLHttpReuqest方法和属性**

<table style="width:446.3pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:160.5pt;"> 方法名 </td> 
 <td style="vertical-align:top;width:285.8pt;"> 说明 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:160.5pt;"> open(method,URL,async) </td> 
 <td style="vertical-align:top;width:285.8pt;"> 建立与服务器的连接 method参数为http请求方法，例如get 和post async参数指定是否使用异步请求，值为true或者false,默认是true </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:160.5pt;"> send(context) </td> 
 <td style="vertical-align:top;width:285.8pt;"> 发送请求 context指定请求的参数，一般情况下我们给传null，这个参数相当于请求正文，如果是get请求，我们一般都是url后面问号传参，所以这写null，如果是post，我们写例如name=tom &nbsp; </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:160.5pt;"> SetRequestHeader(header,value) </td> 
 <td style="vertical-align:top;width:285.8pt;"> 设置请求头信息，例如charset=UTF-8 </td> 
 </tr> 
 </tbody> 
</table>

常用属性：

readyState: 返回类型是short,只读

responseText: 返回类型是String,只读

responseXML: 返回类型是Document，只读

status: 返回类型是short,只读,例如返回500错误

事件处理器

onreadystatechange

下表说明readyState不同状态码的含义。

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:113px;"> 就绪状态码 </td> 
 <td style="vertical-align:top;"> 说明 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:113px;"> 0 </td> 
 <td style="vertical-align:top;"> XMLHttpRequest 对象没有完成初始化，即刚刚创建 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:113px;"> 1 </td> 
 <td style="vertical-align:top;"> XMLHttpRequest对象开始发送请求 调用open方法，但还没调用send方法，请求还没有发出 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:113px;"> 2 </td> 
 <td style="vertical-align:top;"> XMLHttpRequest对象请求发送完成，send方法已经调用，数据已经提交到服务器，但没有任何响应。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:113px;"> 3 </td> 
 <td style="vertical-align:top;"> XMLHttpRequest对象开始读取响应，但还没有完成，收到所有响应消息头，但正文还没有完全收到。 </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:113px;"> 4 </td> 
 <td style="vertical-align:top;"> XMLHttpRequest对象请求已完成，响应就绪。 </td> 
 </tr> 
 </tbody> 
</table>

下一篇详细来学习下XMLHttpRequest对象用代码来做一下发送请求。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70]: /images/20211129/16ef9a2c9a8847c5b1cf6a1d3c8e6507.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE1NDE5NDY_size_16_color_FFFFFF_t_70 1]: /images/20211129/f0ec40c86a40499e851324ed48c124bd.png
[2019072223343851.png]: /images/20211129/7ff755a5c5884d7aa2caa9e2e66cf9eb.png