jQuery动画、表单事件、原生AJAX-优快云博客

文章介绍了jQuery中的animate方法用于创建自定义动画，以及表单的GET和POST提交方式，强调了GET与POST的安全性和速度差异。接着，详细阐述了AJAX的工作原理，包括异步数据交换和其优缺点，并展示了原生AJAX的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

animate自定义动画

animate( )方法用于创建自定义动画。

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值: s1ow、fast 或毫秒数。

可选的 callback 参数是动画完成后所执行的函数名称。

表单提交

get 请求

请求参数放到请求的地址后面，参数大小受限只能传递几 k 的数据。由于参数出现在地址后面，所以安全性不能保证。但是速度较快。

应用场景: 地址栏发出的请求或超链接发出的请求。

post 提交

请求参数放到请求体里面，参数大小没有限制。由于请求参数不可见，所以安全性更高。但是速度较慢.

应用场景:当form 表单指定请求方式为 post 时发出请求

get 与 post 的区别

get 方法是用来从服务器上获取数据； post 是用来向服务器上传递修改数据。

表单提交的原则

name相同的表单提交格式：

如果 name 值相同的表单提交，该 name 值会出现多次，且对应不同表单的值。

没有 name 的表单、含有 disabled 的表单元素：

表单元素没有 name 属性、含有 disabled 属性都会被禁止提交。

表单提交事件

当提交表单时，会发生 submit 事件。

该事件只适用于<form> 元素

submit(方法触发 submit 事件，或规定当发生 submit 事件时运行的函数

表单序列化

serialize( ) 方法通过序列化表单值创建 URL 编码文本字符串。

serializeArray( ) 方法通过序列化表单值来创建对象(name 和value) 的数组。

AJAX

AJAX 全称是Asynchronous JavaScript and XML (异步的JavaScript和XML)。

同步的理解:

同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去。

同步就相当于是当客户端发送请求给服务端，在等待服务端响应的请求时，客户端不做其他的事情。当服务端做完了才返回到客户端。这样的话客户端需要一直等待。用户使用起来会有不友好。

异步的理解:

异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。

异步就相当于当客户端发送给服务端请求时，在等待服务端响应的时候，客户端可以做其他的事情，这样节约了时间，提高了效率，

同步是阻塞模式，异步是非阻塞模式。

AJAX 技术

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页 (不使用 AAX) 如果需要更新内容，必需重载整个页面

XML，可扩展标记语言，被设计用来传输和存储数据。XML和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据。

以前 Ajax 是用 XML 格式的字符串进行数据交换，现在已经逐渐被JSON 所取代了。

AJAX 的特点

优点:

可以无需刷新页面，与服务器进行通信

允许依据用户事件来更新部分页面内容

缺点:

没有浏览历史，不能回退

存在跨域问题 (同源) ;

SEO不友好 (搜索引擎优化，对爬虫不友好)。

原生AJAX

Ajax工作流程：

Ajax 通过 XmlHttpRequest 对象来向服务器发出异步请求，从服务器获得数据，然后用avascript 来操作 DOM，进而更新页面。

创建XmlHttpRequest( )的对象

var xmlhttp = new XmlHttpRequest();

向服务器发送请求（判断数据的传输方式 (get/post) ，打开连接 (open( )）

xmlhttp.open("get"，"http://127.0.0.1:5055"， true);

open（"请求类型 (get/post)" , "(文件在服务器上的位置)" ，"（true (异步) / false (同步)）"）

获取响应（如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML属性）

responseText：获得字符串形式的响应数据。

responseXML：获得 XML 形式的响应数据。

xmlhttp.onreadystatechange = function(){
    if(xmlhttp.status == 200 8& xmlhttp.readyState == 4) {
         document.write(xmThttp .responseText);
      }
}

当请求被发送到服务器时，我们需要执行一些基于响应的任务每当readystate 改变时，就会触发 onreadystatechange 事件readyState 属性存有XMLHttpRequest 的状态信息

下面是XMLHttpRequest 对象的三个重要的属性:

onreadystatechange

存储函数 (或函数名)，每当 readyState 属性改变时，就会调用该函数

readyState

存有XMLHttpRequest 的状态。

从0到4发生变化。

0:请求未初始化;

readyState

1: 服务器连接已建立;

2:请求已接收;

3:请求处理中;

4:请求已完成，且响应已就绪。

status

200: K; <br/>

404:未找到页面。

在onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于4 且状态为 200 时，表示响应已就绪

如需获得来自服务器的响应，使用XMLHttpRequest 对象的 responseText 或 responseXML 属性

responseText 获得字符串形式的响应数据。

responseXML 获得 XML 形式的响应数据

发送

xmlhttp.send();

send(string)：

将请求发送到服务器

string: 仅用于 POST 请求

事例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.6.0.js"></script>
</head>
<body>
    <button id="btn">点我获取</button>
    <div id="div1">

    </div>

   <script>
            var btn= document.getElementById("btn");
            btn.onclick=function(){
                //创建XmlHttpRequest()的对象
                var xml = new XMLHttpRequest;
                //向服务器发送请求
                xml.open("GET","http://127.0.0.1:5500/4.html",true);
                //获取响应
                xml.onreadystatechange = function(){
                    if (xml.status==200&&xml.readyState==4) {
                    document.getElementById("div1").innerHTML = xml.responseText;
                }
            }
            //发送
            xml.send();
            }
    </script>


</body>
</html>