AJAX详解：

不爱吃苹果’‘

已于 2022-11-01 17:25:51 修改

阅读量408

点赞数 1

分类专栏： JavaWeb 文章标签： ajax javascript 前端

于 2022-11-01 17:17:22 首次发布

本文链接：https://blog.csdn.net/qq_50692350/article/details/127636174

版权

JavaWeb 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.AJAX简介：

二.AJAX的使用：

一.AJAX简介：

1.1 什么是AJAX:

AJAX 即 Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，是一个技术的集合，其中包括HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的 XMLHttpRequest。当使用结合了这些技术的AJAX模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重新加载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

例如我们使用的百度搜索框，每次输入不同的信息，下面的框会更新对应的信息。当我们每次局部刷新的时候，页面的局部会显示不同的数据。

这都是AJAX的应用。

HTML/XHTML——主要的内容表示语言。
CSS——为XHTML提供文本格式定义。
DOM——对已载入的页面进行动态更新。
XML——数据交换格式，可扩展的标记语言，用自己定义的标签来存储数据的。
XSLT——将XML转换为XHTML（用CSS修饰样式）。
XMLHttp——用XMLHttpRequest来和服务器进行异步通信，是主要的通信代理。
JavaScript——用来编写Ajax引擎的脚本语言。

最主要的是使用了异步通信——异步Javascript和XML（即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）也就是你可以同时发送多个请求，而服务器的响应顺序有可能不是请求顺序。第一次响应的有可能是请求的最后一个请求）。

AJAX的应用：

每次我们输入完之后，光标离开那么客户端发送请求到服务器，实现局部刷新。这就是AJAX请求

1.2 XMLHttpRequest：

AJAX就是在Javascript中多添加了一个对象：XMLHttpRequest对象。所有的异步交互都是使用XMLHttpRequest对象完成的。其中 XMLHttpRequest 对象与服务器通信。它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。

1.3 AJAX的原理：

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。最主要是从服务器拿到请求的数据。

// 创建XMLHttpRequest对象,也就是创建一个异步调用对象
const request = new XMLHttpReauest()
// 调用对象的open方法，创建一个新的HTTP请求,并指定其请求的方法、URL及验证信息
request.open(method, url, async);  
// 设置响应 HTTP 请求状态变化的函数
request.onreadystatechange = function () {
   if(request.readyState === 4 && request.status === 200) {
     console.log(request.responseText);
   }};
// 调用对象的send方法，发送请求  
request.send();
//  获取异步调用返回的数据
// 使用 JavaScript 和 DOM 实现局部刷新

二.AJAX的使用：

2.1 使用jQuery使用AJAX：

通过JavaScript书写AJAX方法相应的比较复杂,还要考虑到浏览器的兼容性等一系列问题.而JQuery中已经将AJAX相关的操作进行了封装,使用时只需要在合适的地方调用AJAX相关的方法即可,相比而言,JQuery实现AJAX更加简洁,方便。

2.1.1 $.ajax()

$.ajax()可以通过发送HTTP请求加载远程数据,是jQuery最底层的AJAX的实现,具有较高灵活性:

语法：

$.ajax([设置参数]);

主要参数：

参数	说明
String url	发送请求的地址,默认为当前页地址
String type	请求方式(POST或者GET,默认为GET)
Number timeout	设置请求超时时间
Object data 或 String data	发送到服务器的数据
String dataType	预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text
function beforeSend(XMLHttpRequest xhr)	发送请求前调用的函数参数xhr,可选, XMLHttpRequest对象
function complete(XMLHttpRequest xhr,String ts)	请求完成后调用的函数(请求成功或失败时均调用)参数: xhr,可选, XMLHttpRequest对象, ts可选,描述请求类型的字符串
function success(Object result,String ts)	请求成功后调用的函数参数result:可选,由服务器返回的数据参数ts可选,描述请求类型的字符串
function error(XMLHttpRequest xhr,String em,Exception e)	请求失败时调用的函数参数: xhr,可选, XMLHttpRequest对象, 参数em可选,错误信息参数e:可选 ,捕获的异常对象
boolean global	默认为true,表示是否触发全局的AJAX事件

2.1.3 $.get()：

$.get()方法是JQuery封装的发送HTTP GET请求从服务器加载数据的AJAX方法,具体语法如下:
 $.get(url,data,success(resp,status,xhr),dataType)
post()方法和get（）的语法参数，差不多

主要参数：

参数	说明
String url	必选,规定将请求发送到呢个url
Object data 或 String data	可选,规定发送给服务器的数据
function success(Object result,String status,XMLHttpRequest xhr)	可选,请求成功后调用的函数:参数result:可选,服务器返回的结果参数status:可选,请求的状态参数xhr: 可选,XMLHttpRequest对象
String dataType	预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用JQuery发送ajax请求</title>
    <script type="text/javascript" src="/js/jquery-2.1.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
    $(function(){
       $("#btn1").click(function(){
            // 发送ajax请求
           $.ajax({
               url:'/AjaxServlet',
               data:'name=zhangsan&age=18',
               type:'GET',
               dataType:'text',
               success:function(rs){
                    $("#text").html(rs);
               }
           });
          $.get('/AjaxServlet','name=zhangsan&age=18',function(rs){
                         $("#text").html(rs);
                   },'text');
           $.ajax({
               url:'/AjaxServlet',
               data:'name=lisi&age=20',
               type:'POST',
               dataType:'text',
               success:function(rs){
                    $("#text").html(rs);
               }
           });

           //post请求
           $.post('/AjaxServlet','name=wangwu&age=18',function(rs){
               $("#text").html(rs);
           },'text');
       });
    });
</script>
    <input type="text"  />
    <button id="btn1">发送get请求</button>
    <h2 id="text"></h2>
</body>
</html>

登录实时判断验证码：

 $(function(){

           $("#verifycode").blur(function () {
            // 获取前端输入的数据
               var ver2 = $("#verifycode").val();
               $.ajax({
                   url: '/LoginServlet',
                   //使用数组存储数据
                   data:{"verifycode":ver2,"time":new Date()},
                   type:'post',
                   datatype:'text',
                //    成功之后，返回后端数据（rs），之后使用html赋值给对应的
                   success:function (rs) {
                       $("#errorinfo2").html(rs);
                   }
               });
           });
       });