简述Ajax原理及实现步骤

1、Ajax简介

概念

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）。

现在允许浏览器与务器通信而无须刷新当前页面的技术到叫做ajax。

Ajax：一种不用刷新整个页面便可与服务器通讯的办法。

应用

1.运用XHTML+CSS来表达信息；
2.运用JavaScript操作DOM（Document Object Model）来运行动态效果；
3.运用XML和XSLT操作数据
4.运用XMLHttpRequest或新的Fetch API与网页服务器进行异步数据交换；
注意：AJAX与Flash、Silverlight和Java Applet等RIA技术是有区分的。

2、Ajax优点

咱们的网页如果想要刷新局部内容。那么需要重新载入整个网页。用户体验不是很好。就是为了解决局部刷新的问题。保持其他部分不动，只刷新某些地方。

使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。

Ajax技术之主要目的在于局部交换客户端及服务器之间的数据。

3、Ajax原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。

下面从以下几个方面了解一下XmlHttpRequest对象：

3.1 什么是XmlHttpRequest对象？

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。

尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。

XMLHttpRequest 对象是名为 AJAX的 Web 应用程序架构的一项关键功能。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

3.2 如何创建 XMLHttpRequest 对象？

通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject 。一个比较常用的创建XMLHttpRequest 对象的方法：

     //创建XMLHttpRequest对象
        function CreateXmlHttp() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xmlhttp;
        }

3.3 XMLHttpRequest 对象的常用属性有哪些？

1. onreadystatechange 属性

onreadystatechange 属性存有处理服务器响应的函数。
下面的代码定义一个空的函数，可同时对 onreadystatechange 属性进行设置：

xmlHttp.onreadystatechange = function() {
    //我们需要在这写一些代码
}

2. readyState 属性

readyState 属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatechange 函数就会被执行。
readyState 属性可能的值：

状态	描述
0	请求未初始化（在调用 open() 之前）
1	请求已提出（调用 send() 之前）
2	请求已发送（这里通常可以从响应得到内容头部）
3	请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4	请求已完成（可以访问服务器响应并使用它）

我们要向这个 onreadystatechange 函数添加一条 If 语句，来测试我们的响应是否已完成(意味着可获得数据)：

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        //从服务器的response获得数据
    }
}

3. responseText 属性

可以通过 responseText 属性来取回由服务器返回的数据。
在我们的代码中，我们将把时间文本框的值设置为等于 responseText：

xmlHttp.onreadystatechange = function() {
    if (xmlHttp.readyState == 4) {
        document.myForm.time.value = xmlHttp.responseText;
    }
}

其它属性如下：
在这里插入图片描述

3.4 XMLHttpRequest 对象的常用方法有哪些？

1. open() 方法

open() 有三个参数。第一个参数定义发送请求所使用的方法，第二个参数规定服务器端脚本的URL，第三个参数规定应当对请求进行异步地处理。

xmlHttp.open("GET","test.php",true);

GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET 请求

一个简单的 GET 请求：

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

在上面的例子中，您可能得到的是缓存的结果。

为了避免这种情况，请向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();

如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

POST 请求

一个简单 POST 请求：

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

2. send() 方法

send() 方法将请求送往服务器。如果我们假设 HTML 文件和 PHP 文件位于相同的目录，那么代码是这样的：

xmlHttp.send();

其它方法如下：
在这里插入图片描述

4.Ajax实例

Ajax编程步骤：

创建XMLHttpRequest对象。

设置请求方式。

调用回调函数。

发送请求。

get请求的实例：

jsp:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>$Title$</title>
    <script type="text/javascript">
         //创建XMLHttpRequest对象
        function CreateXmlHttp() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xmlhttp;
        }
        //执行get请求
        function getAjax03() {
            //1. 创建xmlhttprequest 对象
            var request = ajaxFunction();
            //2. 发送请求   注意url路径可以为相对路径或绝对路径
            request.open("GET", "demo?name='张三'&age=22", true);
            //3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
            request.onreadystatechange = function () {
                //前半段表示 已经能够正常处理。再判断状态码是否是200
                if (request.readyState == 4 && request.status == 200) {
                    //弹出响应的信息
                    alert(request.responseText);
                }
            }
            request.send();
        }
    </script>
</head>
<body>
<h1><a href="" onclick="getAjax03()">使用ajax方式发送get请求并传递参数然后获取返回值</a></h1>
</body>
</html>

post请求的实例：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
   //创建XMLHttpRequest对象
        function CreateXmlHttp() {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                xmlhttp = new XMLHttpRequest();
            }
            else {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            return xmlhttp;
        }
	function post() {
		//1. 创建对象
		var request = ajaxFunction();
		//2. 发送请求
		request.open( "POST", "demo", true);
		//想获取服务器传送过来的数据， 加一个状态的监听。 
		request.onreadystatechange=function(){
			if(request.readyState==4 && request.status == 200){
				alert("post："+request.responseText);
			}
		}
//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		//带数据过去  ， 在send方法里面写表单数据。 
		request.send("name='王五'&age=19");
	}
</script>
</head>
<body>
	<h3><a href="" onclick="post()">使用Ajax方式发送Post请求</a></h3>
</body>
</html>

下面给出上述get请求和post请求所对应的servlet:

package servlet;
import java.io.IOException;
public class demo extends javax.servlet.http.HttpServlet {
    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        System.out.println("现在来了一个post请求，将要去走get的代码了。");
        doGet(request,response);
    }
    protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        String name = request.getParameter("name");
        String age = request.getParameter("age");
        System.out.println("收到了一个grt请求" +name+"年龄为："+age);
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().write("页面返回收到了get请求");
    }
}

(如有错误，请指正)

参考文档：http://www.w3school.com.cn/ajax/index.asp

https://blog.csdn.net/weixin_37580235/article/details/81459282