Ajax 完整学习笔记

梦里梦外; 2021-06-22 15:36 349阅读 0赞

# Ajax #

## 一、什么是Ajax ##

AJAX（`Asynchronous Javascript And XML`）翻译成中文就是“**异步Javascript和XML**”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。  
AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

传输的数据可以是text纯文本，但是更常用的是xml，现在我们最经常使用就是json。

## 二、同步交互和异步交互 ##

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

## 三、Ajax的应用场景 ##

![在这里插入图片描述][20200219171303454.png]  
搜索引擎的关键字提示，使用的就是ajax技术，在我们输入一些文字之后，它就会把相近的词汇提示出来供我们选择使用。这个过程整个页面没有刷新，只是刷新页面中的局部位置。而且请求发出以后，浏览器还可以进行其他的操作，无需等待服务器的响应。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]  
还有一些网站的判定用户名已经存在的提示，也是使用的ajax技术。当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为zhangSan的用户是否存在，最终服务器返回true表示名为zhangSan的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。整个过程中页面没有刷新，只是局部刷新了；在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作。

## 四、Ajax的优缺点 ##

*  **优点：**  
    异步交互：增强了交互体验。  
    性能：因为服务器无需响应整个页面，只需要响应部分内容，服务器的压力减轻了。
 *  **缺点：**  
    ajax不能应用在所有的场景，还有很多时候需要使用同步交互。  
    ajax无端的增多了对服务器的访问次数，给服务器增多了很多压力。  
    因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题。

## 五、Ajax的四步操作 ##

### 第一步 创建XMLHttpRequest对象 ###

ajax其实只需要学习一个对象：`XMLHttpRequest`，如果掌握了它，就掌握了ajax。

**如何得到这个对象呢？**  
大多数浏览器，可以通过：`var xmlHttp = new XMLHttpRequest();`  
如果是IE6.0的话，应该使用`var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")；`  
如果是IE5.5以及更早的版本的IE，应该使用`var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")；`  
来得到这个对象。

一般，我们都会写一个函数，来专门处理不同的情况而产生XMLHttpRequest对象。  
**`createXMLHttpRequest()`函数：**

### 第二步 打开与服务器的连接 ###

我们使用`xmlHttp.open()`：用来打开与服务器的连接，它需要三个参数：  
`请求方式`：可以是GET或者POST；  
`请求的URL`：指定服务器端资源，例如/xxx/AServlet；  
`请求是否为异步`：如果为true表示发送异步请求，否则为同步请求。  
例如：

xmlHttp.open("GET", "/day23_1/AServlet", true);

### 第三步 发送请求 ###

这一步很简单，就是执行发送函数。

xmlHttp.send(null);

但是注意这里要给一个参数null，如果不给参数可能会造成部分浏览器无法发送。  
参数其实就是请求体内容。如果是GET请求，必须给出null。如果是POST，这里我们先不做讨论。

### 第四步 处理请求 得到响应 ###

**这一步我们需要一些知识点作为前导：**

*  在xmlHttp对象的一个事件上注册一个监听器：`onreadystatechange`
 *  xmlHttp对象一共有5个状态：  
    0：表示刚创建，还没有调用open()方法  
    1：表示请求开始，调用了open()方法，但是没有调用send()方法  
    2：调用完了send()方法  
    3：服务器已经开始响应，但是不再表示响应结束了  
    4：服务器响应结束了。（通常我们只关心这个状态）
 *  怎么得到xmlHttp对象的状态呢？我们可以使用属性`var state = xmlHttp.readyState`，它的值可能是0 1 2 3 4 。
 *  得到服务器的响应状态码，使用`var status = xmlHttp.status;`，例如是200 404 500
 *  得到服务器响应的内容  
    可以使用`var content = xmlHttp.responseText;`得到的是服务器的响应的文本格式的内容  
    也可以使用`var content = xmlHttp.responseXML`，这样得到的是服务器的响应的xml响应的内容，它是一个document对象

这样我们可以形成如下的代码用来处理我们需要响应的内容：

// xmlHttp的5种状态都会调用本方法，但是我们通常只关心4状态
    	xmlHttp.onreadystatechange = function() { 
    		// 双重判断，判断是否为4状态，并且判断是否为200
    		if (xmlHttp.readystate == 4 && xmlHttp.status == 200) { 
    			// 获取服务器的响应内容
    			var text = xmlHttp.responseText;
    			
    			...
    			...
    			
    		}
    	}

## 六、ajax的简单示例 ##

我们接下来做一个最基础的ajax的示例：

1.  首先创建一个servlet，**AServlet**：
    
        public class AServlet extends HttpServlet { 
        	public void doGet(HttpServletRequest request, HttpServletResponse response)
        			throws ServletException, IOException { 
        		System.out.println("hello AJAX!");
        		// 我们向客户端响应的字符串也很简单。
        		response.getWriter().print("hello AJAX!!!");
        	}
        }
2.  创建一个jsp，**ajax1.jsp**：
    
        <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
        <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
        
        
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
        <html>
        	<head>
        		<title>ajax1</title>
        
        		<meta http-equiv="pragma" content="no-cache">
        		<meta http-equiv="cache-control" content="no-cache">
        		<meta http-equiv="expires" content="0">
        		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        		<meta http-equiv="description" content="This is my page">
        		
        
        
        		<script type="text/javascript"> // 创建异步对象 function createXMLHttpRequest() { try { return new XMLHttpRequest(); // 支持大多数浏览器 } catch (e) { try { return new ActiveXObject("Msxml2.XMLHTTP"); // 支持IE6浏览器 } catch (e) { try { return new ActiveXObject("Microsoft.XMLHTTP"); //支持IE5.5以及更早版本的浏览器 } catch (e) { alert("不支持您的浏览器！"); throw e; } } } } window.onload = function() { //文档加载完毕之后执行 var btn = document.getElementById("btn"); btn.onclick = function() { //给按钮的点击事件注册监听 /* ajax的四步操作，得到服务器的响应 把响应的结果显示到h1元素中 */ // 1.得到异步对象 var xmlHttp = createXMLHttpRequest(); // 2.打开与服务器的连接(指定请求方式，指定请求的URL，指定是否为异步请求) xmlHttp.open("GET", "<c:url value='/AServlet'/>", true); // 3. 发送请求 xmlHttp.send(null); // 4. 给异步对象的onreadystatechange事件注册监听器 xmlHttp.onreadystatechange = function() { //当xmlHttp的状态发生改变的时候执行 //双重判断,xmlHttp的状态为4，以及服务器响应的状态码为200 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { // 获取服务器的响应内容 var text = xmlHttp.responseText; // 获取h1元素 var h1 = document.getElementById("h1"); h1.innerHTML = text; } } }; }; </script>
        	</head>
        
        	<body>
        		<button id="btn">点击这里</button>
        		<h1 id="h1"></h1>
        	</body>
        </html>

具体的代码我就不再详细的讲解，我在注释中写的很清楚了。  
我们打开浏览器测试一下效果，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 1]  
完全符合我们的预期，而且我们可以在后台看到，也输出的相应的语句，表示这确实请求了服务器，是一个异步加载的过程。  
![在这里插入图片描述][20200219183835103.png]

## 七、遗留的问题——POST请求该怎么处理？ ##

上面我们遗留了一个问题，就是在POST请求的时候应该怎么处理。  
一般只有我们发送请求的时候带有参数，才需要使用Post请求。  
**首先我们在使用xmlHttp.open()方法的时候添加的参数应该改为“POST”。**  
其次我们发送请求的时候，参数应该填写，而且不是null。  
这个时候呢，我们要添加一步：  
**设置Content-Type请求头：**

xmlHttp.setRequestHeader("Contnet-Type","application/x-www-form-urlencoded");

我们在send方法中应该添加参数，来指定请求体：

xmlHttp.send("username=zhangsan&password=123");

## 八、响应内容为xml的处理方式 ##

上面我们说更常用的是xml的数据格式。如果是xml，我们应该做什么样的处理呢？  
首先是服务器端，应该设置响应头`Content-Type`值为`text/xml;charset=utf-8`。  
而在客户端，得到的是一个document对象，所以我们应该接受为`var doc = xmlHttp.responseXML;`。

废话少说，我们来做一个响应内容为xml的示例：  
页面：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    	<head>
    		<title>ajax1</title>
    
    		<meta http-equiv="pragma" content="no-cache">
    		<meta http-equiv="cache-control" content="no-cache">
    		<meta http-equiv="expires" content="0">
    		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    		<meta http-equiv="description" content="This is my page">
    		
    
    
    		<script type="text/javascript"> // 创建异步对象 function createXMLHttpRequest() { try { return new XMLHttpRequest(); // 支持大多数浏览器 } catch (e) { try { return new ActiveXObject("Msxml2.XMLHTTP"); // 支持IE6浏览器 } catch (e) { try { return new ActiveXObject("Microsoft.XMLHTTP"); //支持IE5.5以及更早版本的浏览器 } catch (e) { alert("不支持您的浏览器！"); throw e; } } } } window.onload = function() { //文档加载完毕之后执行 var btn = document.getElementById("btn"); btn.onclick = function() { //给按钮的点击事件注册监听 /* ajax的四步操作，得到服务器的响应 把响应的结果显示到h1元素中 */ // 1.得到异步对象 var xmlHttp = createXMLHttpRequest(); // 2.打开与服务器的连接(指定请求方式，指定请求的URL，指定是否为异步请求) xmlHttp.open("GET", "<c:url value='/XMLServlet'/>", true); // 3. 发送请求 xmlHttp.send(null); // 4. 给异步对象的onreadystatechange事件注册监听器 xmlHttp.onreadystatechange = function() { //当xmlHttp的状态发生改变的时候执行 //双重判断,xmlHttp的状态为4，以及服务器响应的状态码为200 if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { // 获取服务器的响应内容(xml格式的) var doc = xmlHttp.responseXML; // 查询文档下名为student的所有元素，得到数组，在获取下标0元素 var ele = doc.getElementsByTagName("student")[0]; // 获取元素名为number的属性值 var number = ele.getAttribute("id"); var name; var age; var sex; // 为了处理浏览器差异，在对xml元素进行获取的时候，采取不同的手段 if (window.addEventListener) { name = ele.getElementsByTagName("name")[0].textContent; //其他的浏览器支持 } else { name = ele.getElementsByTagName("name")[0].text; //IE浏览器支持 } if (window.addEventListener) { age = ele.getElementsByTagName("age")[0].textContent; //其他的浏览器支持 } else { age = ele.getElementsByTagName("age")[0].text; //IE浏览器支持 } if (window.addEventListener) { sex = ele.getElementsByTagName("sex")[0].textContent; //其他的浏览器支持 } else { sex = ele.getElementsByTagName("sex")[0].text; //IE浏览器支持 } var text = number + "," + name + "," + age + "," + sex; document.getElementById("h1").innerHTML = text; }; }; }; }; </script>
    	</head>
    
    	<body>
    		<button id="btn">点击这里</button>
    		<h1 id="h1"></h1>
    	</body>
    </html>

Servlet:

package com.veeja.web.servlet;
    
    import java.io.IOException;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class XMLServlet extends HttpServlet { 
    
    	public void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException { 
    		String xml = "<studnets><student id='001'><name>zhangsan</name><age>18</age><sex>male</sex></student></studnets>";
    		response.setContentType("text/xml;charset=utf-8");
    		response.getWriter().print(xml);
    	}
    }

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 2]

--------------------

END.

[20200219171303454.png]: /images/20210615/10512a04d3e54b67a6f04d2ab4c9f287.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70]: /images/20210615/78e825aa09c944ec8fd637a62e6f0d47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 1]: /images/20210615/ac7db555f80c46a5877ef7c57c3ff630.png
[20200219183835103.png]: /images/20210615/71928daf2a314192af327bbacf7c2b7d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ1NjUxMjc_size_16_color_FFFFFF_t_70 2]: /images/20210615/a6a2d295c7774d34a91f47a09c80d2bd.png