Ajax技术

约定不等于承诺〃 2021-09-18 16:18 419阅读 0赞

# 1、Ajax简介 #

随着Web2.0概念的普及，追求更人性化、更美观的页面效果成了网站开发的必须。Ajax正在其中充当着重要角色。由于Ajax是一个客户端技术，所以无论使用哪种服务器技术（如JSP、PHP、ASP.NET等）都可以使用Ajax。相对于传统的Web应用开发，Ajax运用的是更加先进、更加标准化、更加高效的Web开发技术体系。

## 1.1 Ajax开发模式与传统开发模式的比较 ##

互联网发展初期，多数网站都采用传统的开发模式。随着Web2.0时代的到来，越来越多的网站开始采用Ajax开发模式。下面将对Ajax开发模式与传统开发模式的比较。

**传统开发模式：**在传统的Web应用模式中，页面中的用户的每一次操作都触发一次返回Web服务器的HTTP请求，服务器进行相应的处理（获取数据、运行与不同的系统会话）后，返回一个HTML页面给客户端。

**Ajax开发模式：**而在Ajax应用中，页面中用户的操作将通过Ajax引擎与服务器端进行通信，然后将返回结果提交给客户端页面的Ajax引擎，再由Ajax引擎来决定将这些数据插入到页面的指定位置。对于每个用户的行为，在传统的Web应用模式中，将生成一次HTTP请求，而在Ajax应用开发模式中，将变成对Ajax引擎的一次JavaScript调用。在Ajax应用开发模式中通过JavaScript实现在不刷新整个页面的情况下，对部分数据进行更新，从而降低了网络流量，给用户带来更好的体验。

## 1.2 Ajax使用的技术 ##

Ajax是XMLHttpRequest对象和JavaScript、XML、CSS、DOM等多种技术的组合。其中，只有XMLHttpRequest对象是新技术，其它的均为已有技术。

# 2、使用XMLHttpRequest对象 #

通过 XMLHttpRequest 对象，Ajax可以像桌面应用程序一样，只同服务器进行数据层的交换，而不用每次都刷新页面，也不用每次都将数据处理的工作交给服务器来完成。这样既减轻了服务器的负担，又加快了响应速度，缩短了用户等待的时间。

## 2.1 初始化XMLHttpRequest对象 ##

在使用 XMLHttpRequest 对象发送请求和处理响应之前，首先需要初始化该对象，由于 XMLHttpRequest 不是一个W3C标准，所以对于不同的浏览器，初始化的方法也是不同的。通常情况下，初始化 XMLHttpRequest 对象只需要考虑两种情况，一种是IE浏览器，另一种是非IE浏览器，下面分别进行介绍。

### 2.1.1 判断是否IE浏览器（包含IE11） ###

/**
     * 判断是否IE浏览器
     */
    function isIE()
    {  
        if(!!window.ActiveXObject || "ActiveXObject" in window)
        {
       	return true;
        }
        else
        {
        	return false;
        }     
    }

函数说明：

（1）IE早些版本时，IE10及以下，window.ActiveXObject 返回一个对象，!window.ActiveXObject则变为false，!!window.ActiveXObject则为true，因为是或||符号后续无需再判断，返回true。

（2）IE11中，window.ActiveXObject返回undefine，!window.ActiveXObject则变成了true，!!window.ActiveXObject则变成了false，进入 "window.ActiveXObject" in window判断，该判断条件在IE11下返回true。

（3）其他非IE浏览器，如chrome，firefox，window.ActiveXObject都是undefine，!!window.ActiveXObject都是返回的false，而 "window.ActiveXObject" in window也是返回false，因此上述判断函数在非IE浏览器中返回的都是false。

### 2.1.2 IE浏览器 ###

IE浏览器把 XMLHttpRequest 实例化为一个ActiveX对象。具体方法如下：

var http_request = new ActiveXObject("Msxml2.XMLHTTP");

或者：

var http_request = new ActiveXObject("Microsoft.XMLHTTP");

在上面的语法中，Msxml2.XMLHTTP和Microsoft.XMLHTTP是针对IE浏览器的不同版本而进行设置的，目前比较常用的是这两种。

### 2.1.3 非IE浏览器 ###

非IE浏览器（如：Firefox、Opera、Mozilla、Safari）把 XMLHttpRequest 对象实例化为一个本地JavaScript对象。具体方法如下：

var http_request = new XMLHttpRequest();

**示例：**为了提高程序的兼容性，创建一个跨浏览器的 XMLHttpRequest 对象。

## 2.2 XMLHttpRequest对象的常用方法 ##

XMLHttpRequest对象提供了一些常用的方法，通过这些方法可以对请求进行操作。

### 2.2.1 open()方法 ###

open()方法用于设置进行异步请求目标的URL、请求方法以及其他参数信息。其具体语法如下：

open(method, url, async, username, password)

参数说明：

method：必填参数，用于指定用来发送请求的HTTP方法（GET，POST，PUT，DELETE或HEAD）。按照HTTP规范，该参数要大写。

url：必填参数，用于指定 XMLHttpRequest 对象把请求发送到的服务器相应的URI，可以使用绝对路径或者相对路径，该路径会被自动解析为绝对路径，并且可以传递查询字符串。

async：可选参数，该参数用于指定是否请求是异步的，其默认值为true。如果需要发送一个同步请求，需要把该参数设置为false。

userName、password：可选参数，如果需要服务器验证访问用户的情况，那么可以设置userName以及password这两个参数。

**示例：**设置异步请求目标为register.jsp页面，请求方法为GET，请求方式为异步。

http_request.open("GET","register.jsp",true);

### 2.2.2 send()方法 ###

send()方法用于向服务器发送请求。如果请求声明为异步，该方法将立即返回，否则将等到接收到响应为止。调用open()方法后，就可以通过send()方法按照open()方法设定的参数将请求进行发送。当open()方法中async参数为true时，在send()调用后立即返回，否则将会中断直到请求返回。需要注意的是，send()方法必须在readyState属性值为1时，即调用open()方法以后才能调用。在调用send()方法以后到接收到响应信息之前，readyState属性的值将被设为2；一旦接收到响应消息，readyState属性值将会被设为3；直到响应接收完毕，readyState属性的值才会被设为4。

其语法如下：

send(data)

参数说明：

send()方法使用一个可选的参数，该参数可以包含可变类型的数据。用户可以使用它并通过POST方法把数据发送到服务器。另外，可以显示的使用null参数调用send()方法，这与不同参数调用该方法一样。对于大多数其他的数据类型，在调用send()方法之前，应该使用setRequestHeader()方法先设置Content-Type头部。如果send(data)方法中的data参数的类型为DOMString，那么，数据将被编码为UTF-8。如果数据是Document类型，那么将使用由data.xmlEncoding指定的编码串行化该数据。

**示例：**向服务器发送一个不包含任何参数的请求。

http_request.send(null);

### 2.2.3 abort()方法 ###

abort()方法用于停止或放弃当前异步请求，并且将XMLHttpRequest对象设置为初始化状态。其语法如下：

abort()

### 2.2.4 setRequestHeader()方法 ###

setRequestHeader()方法用于为请求的HTTP头设置值。其语法如下：

setRequestHeader(header,value)

参数说明：

header：用于指定HTTP头。

value：用于为指定的HTTP头设置值。

**注意：**setRequestHeader()方法必须在调用open()方法之后才能调用。

**示例：**在发送POST请求时，需要设置Content-Type请求头的值为application/x-www-form-urlencoded，这是就可以通过setRequestHeader()方法进行设置。

http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

### 2.2.5 getResponseHeader()方法 ###

getResponseHeader()方法用于以字符串形式返回指定的HTTP头信息。其语法如下：

getResponseHeader(headerLabel)

参数说明：

headerLabel：用于指定HTTP头，包括Server、Content-Type和Date等。

**示例：**获取HTTP头Content-Type的值。

http_request.getResponseHeader("Content-Type");

### 2.2.6 getAllResponseHeaders()方法 ###

getAllResponseHeaders()方法用于以字符串形式返回完整的HTTP头信息，其中包括Server、Date、Content-Type和Content-Length。其语法如下：

getAllResponseHeaders()

**示例：**使用getAllResponseHeaders()方法获取完整的HTTP头信息。

http_request.getAllResponseHeaders();

## 2.3 XMLHttpRequest对象的常用属性 ##

XMLHttpRequest 对象提供了一些常用属性，通过这些属性可以获取服务器的响应状态及响应内容。

### 2.3.1 readyState属性 ###

readyState属性用于获取请求的状态，当一个XMLHttpRequest对象被创建后，readState属性的标识了当前对象正处于什么状态，可以通过对该属性的访问，来判断此次请求的状态然后做出相应的操作。该属性共包括5个属性值，如下表：

<table> 
 <thead> 
  <tr> 
   <th style="width:67px;">值</th> 
   <th>意义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:67px;">0</td> 
   <td>未初始化状态：此时，已经创建了一个XMLHttpRequest对象，但是还没有初始化。</td> 
  </tr> 
  <tr> 
   <td style="width:67px;">1</td> 
   <td>准备发送状态：此时，已经调用了XMLHttpRequest对象的open()方法，并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端。</td> 
  </tr> 
  <tr> 
   <td style="width:67px;">2</td> 
   <td>已发送状态：此时，已经通过send()方法把一个请求发送的服务器端，但是还没有收到一个响应。</td> 
  </tr> 
  <tr> 
   <td style="width:67px;">3</td> 
   <td>正在接收状态：此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收到。</td> 
  </tr> 
  <tr> 
   <td style="width:67px;">4</td> 
   <td>完成响应状态：此时，已经完成了HttpResponse响应的接收。</td> 
  </tr> 
 </tbody> 
</table>

### 2.3.2 responseText属性 ###

responseText属性用于获取服务器的响应，表示为字符串。 responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState属性值为0、1或2时，responseText属性包含一个空字符串；当readyState属性值为3（正在接收）时，响应中包含客户端还未完成的响应信息；当readyState属性值为4（已加载）时，该resoinseText属性才包含完整的响应信息。

### 2.3.3 responseXML属性 ###

responseXML属性用于获取服务器的响应，表示为XML。这个对象可以解析为一个DOM对象。只有当readyState属性值为4，并且响应头部的Content-Type的MIME类型被指定为XML(text/xml或者application/xml)时，该属性才会值并解析为一个XML文档，否则该属性值为null。如果是回传的XML文档结构不良或者未完成响应回传，该属性值也为null。由此可见，responseXML属性用来描述被XMLHttpRequest解析后的XML文档属性。

### 2.3.4 status属性 ###

status属性用于返回服务器的HTTP状态码。常用的状态码如下表：

<table> 
 <thead> 
  <tr> 
   <th style="width:67px;">值</th> 
   <th>意义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="width:67px;">200</td> 
   <td>表示成功。</td> 
  </tr> 
  <tr> 
   <td style="width:67px;">202</td> 
   <td>表示请求被接受，但尚未成功。</td> 
  </tr> 
  <tr> 
   <td style="width:67px;">400</td> 
   <td>错误的请求。</td> 
  </tr> 
  <tr> 
   <td style="width:67px;">404</td> 
   <td>文件未找到。</td> 
  </tr> 
  <tr> 
   <td style="width:67px;">500</td> 
   <td>内部服务器错误。</td> 
  </tr> 
 </tbody> 
</table>

**注意：**仅当readyState属性值为3（正在接收中）或4（已加载）时，才能对此属性进行访问。如果在readyState属性值小于3时，试图存取status属性值，将发生一个异常。

### 2.3.5 statusText属性 ###

statusText属性用于返回HTTP状态码对应的文本，如OK或者Not Fount（未找到）等。statusText属性描述了HTTP状态代码文本，并且仅当readyState属性值为3或4时才可以用。当readyState属性为其它值时试图存取statusText属性值将引发一个异常。

### 2.3.6 onreadystatechange属性 ###

onreadystatechange属性用于指定状态改变时所触发的事件处理器。在Ajax中，每当readyState属性值发生改变时，就会触发onreadystatechange事件，通常会调用一个JavaScript函数。

**示例：**指定状态改变时触发JavaScript函数getResult。

http_request.onreadystatechange = getResult; //调用返回结果处理函数

**注意：**在指定所触发的事件处理器时，所调用的JavaScript函数不能添加小括号及指定参数名。不过这里可以使用匿名函数。例如，要调用带参数的函数getResult()，可以使用下面的代码：

//通过匿名函数指定要带参数的函数
    http_request.onreadystatechange = function()
    {
        getResult("添加的参数"); //调用带参数的函数	
    };

# 3、与服务器通信（发送请求与处理响应） #

## 3.1 发送请求 ##

Ajax可以通过XMLHttpRequest对象实现采用异步方式在后台发送请求。通常情况下，Ajax发送请求有两种，一种是发送GET请求，另一种是发送POST请求。但是无论发送哪种请求，都需要经过以下4个步骤。

（1）初始化XMLHttpRequest对象。为了提高程序的兼容性，需要创建一个跨浏览器的XMLHttpRequest对象，并且判断XMLHttpRequest对象的实例是否成功，如果不成功，则给予提示。

**示例：**发送请求。

（2）为XMLHttpRequest对象指定一个返回结果处理函数（即回调函数），用于对返回结果进行处理。

**示例：**设置回调函数。

http_request.onreadystatechange = getResult; //调用返回结果处理函数

//通过匿名函数指定要带参数的函数
    http_request.onreadystatechange = function()
    {
        getResult("添加的参数"); //调用带参数的函数	
    };

（3）创建一个与服务器的连接。在创建时，需要指定发送请求的方式（即GET或POST），以及设置是否采用异步方式发送请求。

**示例：**采用异步方式发送GET方式的请求。

http_request.open("GET",url,true);

**示例：**采用异步方式发送POST方式的请求。

http_request.open("POST",url,true);

**说明：**以Java Web项目为例，在opne()方法中的url参数，可以是一个JSP页面的URL地址，也可以是Servlet的映射地址。也就是说，请求处理页可以是一个JSP页面，也可以是一个Servlet。

**技巧：**在指定URL参数时，最好将一个时间戳追加到该URL参数的后面，这样可以防止因浏览器缓存结果而不能实时得到最新的结果。例如，可以指定URL参数为以下代码：

var url = "deal.jsp?nocache="+new Date().getTime();

（4）向服务器发送请求。XMLHttpRequest对象的send()方法可以实现向服务器发送请求，该方法需要传递一个参数，如果发送的是GET请求，可以将该参数设置为null，如果发送的是POST请求，可以通过该参数指定要发送的请求参数。

**示例：**向服务器发送GET请求。

http_request.send(null);   //向服务器发送请求

**示例：**向服务器发送POST请求。

需要注意的是，在发送POST请求前，需要设置正确的请求头。具体代码如下：

http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  //设置请求头

上面的这句代码，需要添加在“http\_request.send(param);”语句之前。

设置POST参数并发送服务器请求。

var param = "userName=pan_junbiao&age=30"; //组合参数
    http_request.send(param);   //向服务器发送请求

## 3.2 处理服务器响应 ##

当向服务器发送请求后，接下来就需要处理服务器响应了。在向服务器发送请求时，需要通过XMLHttpRequest对象的onreadystatechange属性指定一个回调函数，用于处理服务器响应。在这个回调函数中，首先需要判断服务器的请求状态，保证请求已完成，然后再根据服务器的HTTP状态码，判断服务器对请求的响应是否成功，如果成功，则获取服务器的响应反馈给客户端。

XMLHttpRequest对象提供了两个用来访问服务器响应的属性：一个是responseText属性，返回字符串响应；另一个是responseXML属性，返回XML响应。

### 3.2.1 处理字符串响应 ###

字符串响应通常应用在响应不是特别复杂的情况下。例如，将响应显示在提示对话框中，或者响应只是显示成功或失败的字符串。

**示例：** 使用Ajax处理字符串响应。

（1）创建getMsg.jsp页面，该页面返回一段字符串。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%
        out.println("欢迎访问，pan_junbiao的博客");
        out.println("<br/>博客地址：https://blog.csdn.net/pan_junbiao");
    %>

（2）创建getText.jsp页面，在Ajax回调函数中处理字符串响应，并将其显示到页面中。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Ajax处理字符串响应</title>
    </head>
    <body>
    您好！
    <div id="divMsg"></div>
    
    <script type="text/javascript">
    
    //1、初始化XMLHttpRequest对象
    var http_request = null;
    if(window.XMLHttpRequest) //非IE浏览器
    {
        http_request = new XMLHttpRequest(); //创建XMLHttpRequest对象
    }
    else if(!!window.ActiveXObject || "ActiveXObject" in window) //IE浏览器
    {
        try 
        {
            http_request = new ActiveXObject("Msxml2.XMLHTTP"); //创建XMLHttpRequest对象
        } catch (e) 
        {
            try 
            {
                http_request = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHttpRequest对象
           	} catch (e) {}
        }
    }
    
    //2、指定请求返回结果处理函数
    http_request.onreadystatechange = getResult; //调用返回结果处理函数
    function getResult()
    {
    	if(http_request.readyState==4) //判断请求状态
    	{
    		if(http_request.status==200) //请求成功，开始处理返回结果
    		{
    			document.getElementById("divMsg").innerHTML = http_request.responseText;  //显示内容
    		}
    		else
    		{
    			alert("您所请求的页面有错误"); //请求页面有错误
    		}
    	}
    }
    
    //3、创建一个与服务器的路径
    http_request.open("POST","getMsg.jsp",true);
    
    //4、向服务器发送请求
    http_request.send();
    
    </script>
    	
    </body>
    </html>

**执行结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70][]

### 3.2.2 处理XML响应 ###

如果在服务器端需要生成特别复杂的响应，那么就需要应用XML响应。应用XMLHttpRequest对象的responseXML属性，可以生成一个XML文档，而且当前浏览器已经提供了很好的解析XML文档对象的方法。

**示例：**使用Ajax处理XML响应。

（1）创建XML目录，并在该目录下创建blogInfo.xml文件。

<?xml version="1.0" encoding="UTF-8"?>
    <blogs>
    	<blog>
    		<title>pan_junbiao的博客</title>
    		<url>https://blog.csdn.net/pan_junbiao</url>
    	</blog>
    	<blog>
    		<title>Ajax技术</title>
    		<url>https://blog.csdn.net/pan_junbiao/article/details/88943130</url>
    	</blog>
    	<blog>
    		<title>Java面向对象程序设计</title>
    		<url>https://blog.csdn.net/pan_junbiao/article/details/5297328</url>
    	</blog>
    </blogs>

（2）创建getXML.jsp页面，在Ajax回调函数中处理XML响应，并将其显示到页面中。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Ajax处理XML响应</title>
    </head>
    <body>
    <div id="divMsg"></div>
    	
    <script type="text/javascript">
    
    //1、初始化XMLHttpRequest对象
    var http_request = null;
    if(window.XMLHttpRequest) //非IE浏览器
    {
        http_request = new XMLHttpRequest(); //创建XMLHttpRequest对象
    }
    else if(!!window.ActiveXObject || "ActiveXObject" in window) //IE浏览器
    {
        try 
        {
            http_request = new ActiveXObject("Msxml2.XMLHTTP"); //创建XMLHttpRequest对象
        } catch (e) 
        {
            try 
            {
                http_request = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHttpRequest对象
           	} catch (e) {}
        }
    }
    
    //2、指定请求返回结果处理函数
    http_request.onreadystatechange = getResult; //调用返回结果处理函数
    function getResult()
    {
    	if(http_request.readyState==4) //判断请求状态
    	{
    		if(http_request.status==200) //请求成功，开始处理返回结果
    		{
    			var xmldoc = http_request.responseXML;
    			var str="";
    			for(i=0; i<xmldoc.getElementsByTagName("blog").length; i++)
    			{
    				var bolg = xmldoc.getElementsByTagName("blog").item(i);
    				str += "《" + bolg.getElementsByTagName("title")[0].firstChild.data + "》";
    				str += "博客地址：" + bolg.getElementsByTagName("url")[0].firstChild.data;
    				str += "<p>";
    			}
    			document.getElementById("divMsg").innerHTML = str;  //显示内容
    		}
    		else
    		{
    			alert("您所请求的页面有错误"); //请求页面有错误
    		}
    	}
    }
    
    //3、创建一个与服务器的路径
    http_request.open("POST","XML/blogInfo.xml",true);
    
    //4、向服务器发送请求
    http_request.send();
    
    </script>
    </body>
    </html>

**执行结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 1][]

## 3.3 一个完整的实例——检测用户名是否唯一 ##

在介绍了向服务器发送请求与处理服务器响应后，下面将通过一个完整的实例，更好的说明在Ajax中如何与服务器通信。

**示例：**检测用户名是否唯一。

（1）创建register.jsp页面，在该页面中添加用于收集用户注册信息的表单，并使用Ajax实现检测用户名是否唯一。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>用户注册——检测用户名是否唯一</title>
    </head>
    <body>
    <div align="center">请输入注册信息
    	<form name="form1">
    		<table border="0" align="center">
    			<tr>
    				<td>用户姓名：</td>
    				<td><input type="text" id="name" style="width:250px;" /></td>
    			</tr>
    			<tr>
    				<td>博客地址：</td>
    				<td><input type="text" id="blog" style="width:250px;"/></td>
    			</tr>
    			
    			<tr>
    				<td>
    					<input type="button" value="提交" onclick="checkUser()" />
    				</td>
    				<td>
    					<input type="reset" value="取消" />
    				</td>
    			</tr>
    		</table>
    	</form>
    	<b id="spMsg" style="color:red;"></b>
    </div>
    
    <script type="text/javascript">
    
    /**
     * 检测用户名
     */
    function checkUser()
    {
    	var name = document.getElementById("name").value;
    	if(!name)
    	{
    		alert("请输入用户姓名！");
    		document.getElementById("name").focus();
    		return;
    	}
    	else
    	{
    		//向服务器发送Ajax请求
    		var url = encodeURI("servlet/CheckUser?name=" + name + "&nocache="+new Date().getTime());
    		createRequest(url);
    	}
    }
    
    /**
     * 向服务器发送Ajax请求
     */
    function createRequest(url)
    {
    	//1、初始化XMLHttpRequest对象
    	var http_request = null;
    	if(window.XMLHttpRequest) //非IE浏览器
    	{
    	    http_request = new XMLHttpRequest(); //创建XMLHttpRequest对象
    	}
    	else if(!!window.ActiveXObject || "ActiveXObject" in window) //IE浏览器
    	{
                try 
    	    {
    	        http_request = new ActiveXObject("Msxml2.XMLHTTP"); //创建XMLHttpRequest对象
    	    } catch (e) 
    	    {
    	        try 
    	        {
    	            http_request = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHttpRequest对象
    	       	} catch (e) {}
    	    }
    	}
    	
    	//判断XMLHttpRequest对象是否创建成功
    	if (!http_request) 
    	{
    		alert("不能创建XMLHttpRequest对象实例！");
    		return false;
    	}
    	
    	//2、指定请求返回结果处理函数
    	http_request.onreadystatechange = getResult; //调用返回结果处理函数
    	function getResult()
    	{
    		if(http_request.readyState==4) //判断请求状态
    		{
    			if(http_request.status==200) //请求成功，开始处理返回结果
    			{
    				document.getElementById("spMsg").innerHTML = http_request.responseText;  //显示内容
    			}
    			else
    			{
    				alert("您所请求的页面有错误"); //请求页面有错误
    			}
    		}
    	}
    	
    	//3、创建一个与服务器的路径
    	http_request.open("GET",url,true);
    
    	//4、向服务器发送请求
    	http_request.send(null);
    }
    
    </script>
    
    </body>
    </html>

（2）创建com.pjb.servlet包，并在该包下创建用于检测用户名的Servlet类CheckUser.java文件。

package com.pjb.servlet;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * 检测用户名Servlet类
     * 
     * @author pan_junbiao
     *
     */
    @WebServlet(name = "CheckUser", urlPatterns = "/servlet/CheckUser")
    public class CheckUser extends HttpServlet
    {
    	private static final long serialVersionUID = 1L;
    
    	/**
    	 * 检测用户名是否唯一
    	 */
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    	{
    		// 创建一维数组
    		String[] userList = { "panjunbiao", "pan_junbiao", "pan_junbiao的博客" };
    
    		// 设置request的编码
    		request.setCharacterEncoding("UTF-8");
    
    		// 获取用户姓名参数
    		String name = request.getParameter("name");
    
    		// 搜索数组
    		Boolean isExist = false;
    		for (String item : userList)
    		{
    			if (item.equals(name))
    			{
    				isExist = true;
    				break;
    			}
    		}
    
    		// 设置response的编码
    		response.setCharacterEncoding("UTF-8");
    
    		// 获取PrintWriter对象
    		PrintWriter out = response.getWriter();
    
    		// 判断结果
    		if (isExist)
    		{
    			out.println("很抱歉！用户名【" + name + "】已经被注册！");
    
    		} else
    		{
    			out.println("恭喜您，该用户名未被注册！");
    		}
    
    		// 释放PrintWriter对象
    		out.flush();
    		out.close();
    	}
    }

**执行结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 2][]

# 4、解决中文乱码问题 #

Ajax不支持多种字符集，它默认的字符集是UTF-8，所以在应用Ajax技术的程序中应及时进行编码转换，否则程序中出现的中文符将变成乱码。一般情况下，以下两种情况可能产生中文乱码。

## 4.1 发送请求时出现中文乱码 ##

将数据提交到服务器有两种方法，一种是使用GET方法提交；另一种是使用POST方法提交。使用不同的方法提交数据，在服务器端接收参数时解决中文乱码的方法是不同的。具体解决方法如下。

（1）当接收使用GET方法提交的数据时，要将编码转换为GBK或是UTF-8。

**示例：**将省份名称的编码转换为UTF-8。

String selProvince = request.getParameter("parProvince");
    selProvince = new String(selProvince.getBytes("ISO-8859-1"), "UTF-8");

（2）由于应用POST方法提交数据时，默认的字符编码是UTF-8，所以当接收使用POST方法提交的数据时，要将编码转换为UTF-8。

**示例：**将用户名的编码转换为UTF-8。

String userName = request.getParameter("user");
    userName = new String(userName.getBytes("ISO-8859-1"), "UTF-8");

## 4.2 获取服务器的响应结果时出现中文乱码 ##

由于Ajax在接收responseText或responseXML的值时是按照UTF-8的编码格式进行解码的，所以如果服务器端传递的数据不是UTF-8格式，在接收responseText或responseXML的值时，就可能产生乱码。解决的办法是保证从服务器端传递的数据采用UTF-8的编码格式。

# 5、Ajax重构 #

Ajax的实现主要依赖于XMLHttpRequest对象，但是在调用其进行异步数据传输时，由于XMLHttpRequest对象的实例在处理事件完成后就会被销毁，所以如果不对该对象进行封装处理，在下次需要调用它时就要重新构建，而且每次调用都需要写一大段的代码，使用起来很不方便。虽然现在有很多开源的Ajax框架都提供了对XMLHttpRequest对象的封装方案，但是如果应用这些框架，通常需要加载很多额外的资源，这势必会浪费很多服务器资源。不过JavaScript脚本语言支持OO编码风格，通过它可以将Ajax所必需的功能封装在对象中。

## 5.1 重构Ajax文件 ##

**示例：**创建一个单独的JS文件，名称为AjaxRequest.js，并且在该文件中编写重构Ajax所需的代码。

## 5.2 应用Ajax重构实现实时系统时钟 ##

**示例：**实时系统时钟。

（1）创建clock.jsp页面。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>系统时间</title>
    </head>
    <body>
    
    <h3>欢迎访问，pan_junbiao的博客</h3>
    <div id="clock">系统时间</div>
    
    <script src="JS/AjaxRequest.js"></script>
    <script type="text/javascript">
    //实例化Ajax对象方法
    function getSysTime()
    {
    	var loader = new net.AjaxRequest("servlet/GetSysTime?nocache="+new Date().getTime(),deal,onerror,"GET");
    }
    
    //回调函数
    function deal()
    {
    	document.getElementById("clock").innerHTML="现在的时间："+this.req.responseText;
    }
    
    //错误处理函数
    function onerror()
    {
    	alert("出错了");
    }
    
    window.onload = function()
    {
    	//调用获取系统时间方法
    	getSysTime();
    	
    	//每个1秒调用一次获取系统时间方法
    	window.setInterval("getSysTime();",1000); 
    }
    </script>
    </body>
    </html>

（2）创建com.pjb.servlet包，并在该包下创建用于获取系统时间的Servlet类GetSysTime.java文件。

package com.pjb.servlet;
    
    import java.io.IOException;
    import java.text.SimpleDateFormat;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * 获取系统时间Servlet类
     * 
     * @author pan_junbiao
     */
    @WebServlet(name = "GetSysTime", urlPatterns = "/servlet/GetSysTime")
    public class GetSysTime extends HttpServlet
    {
    	private static final long serialVersionUID = 1L;
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    	{
    		String datestyle = "yyyy-MM-dd HH:mm:ss";
    		SimpleDateFormat format = new SimpleDateFormat(datestyle);
    		java.util.Date nowtime = new java.util.Date();
    		String strnowtime = format.format(nowtime);
    		response.setContentType("text/text");
    		response.setCharacterEncoding("UTF-8");
    		response.getWriter().print(strnowtime);
    	}
    }

**执行结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70]: /images/20210724/0873662e57174f1183c142b6951e6d47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 1]: /images/20210724/24e2bd2157c7484d956d615c6635ec5c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 2]: /images/20210724/81aa885642e3463c8aaa7c2994f7ba83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Bhbl9qdW5iaWFv_size_16_color_FFFFFF_t_70 3]: /images/20210724/acc6c569c0044f5c94f839dd5b8024d8.png