简述Ajax原理及实现步骤
简述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" %>
$Title$
使用ajax方式发送get请求并传递参数然后获取返回值
post请求的实例：
Insert title here
使用Ajax方式发送Post请求
下面给出上述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