Ajax——Ajax基础概念以及两种请求方式

Ajax总结目录

1. 传统请求方式
- 1.1 传统请求的方式
- 1.2 传统请求存在的问题
2. Ajax

1. 传统请求方式

1.1 传统请求的方式

直接在浏览器地址栏上输入URL。
点击超链接
提交form表单
使用JS代码发送请求

1.2 传统请求存在的问题

页面全部刷新导致了用户的体验较差。
传统的请求导致用户的体验有空白期。（用户的体验是不连贯的）

2. Ajax

2.1 Ajax基础知识

AJAX不能称为一种技术，它是多种技术的综合产物。

AJAX可以让浏览器发送一种特殊的请求，这种请求可以是：异步的。
什么是异步，什么是同步？
- 假设有t1和t2线程，t1和t2线程并发，就是异步。
- 假设有t1和t2线程，t2在执行的时候，必须等待t1线程执行到某个位置之后t2才能执行，那么t2在等t1，显然他们是排队的，排队的就是同步。
- AJAX是可以发送异步请求的。也就是说，在同一个浏览器页面当中，可以发送多个ajax请求，这些ajax请求之间不需要等待，是并发的。
AJAX代码属于WEB前端的JS代码。和后端的java没有关系，后端也可以是php语言，也可以是C语言。
AJAX 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。
AJAX可以更新网页的部分，而不需要重新加载整个页面。（页面局部刷新）
AJAX可以做到在同一个网页中同时启动多个请求，类似于在同一个网页中启动“多线程”，一个“线程”一个“请求”。

2.2 XMLHttpRequest对象

XMLHttpRequest对象是AJAX的核心对象，发送请求以及接收服务器数据的返回，全靠它了。
XMLHttpRequest对象，现代浏览器都是支持的，都内置了该对象。直接用即可。
创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();
1

XMLHttpRequest对象的方法

方法	描述
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method, url, async, user, psw)	规定请求method：请求类型 GET 或 POSTurl：文件位置async：true（异步）或 false（同步）user：可选的用户名称psw：可选的密码
send()	将请求发送到服务器，用于 GET 请求
send(string)	将请求发送到服务器，用于 POST 请求
setRequestHeader()	向要发送的报头添加标签/值对

XMLHttpRequest对象的属性

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
status	返回请求的状态号200: "OK"403: "Forbidden"404: “Not Found”
statusText	返回状态文本（比如 “OK” 或 “Not Found”）

2.3 AJAX GET请求分析

AJAX GET请求建立步骤：

创建XMLHttpRequest的核心对象
注册回调函数
- 判断xhr对象的状态码是否发生变化
- 判断xhr状态码值是否为4 并且判断Http状态码是否为200
- 接受服务器响应的数据信息
打开通道
获取需要的数据
发送数据

建立AJAX GET请求的样例：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax2回顾title>
head>
<body>
    <script type="text/javascript">
        window.onload = function () {
            var mybtn = document.getElementById("mybtn");
            mybtn.onclick = function () {
                //1.创建XMLHttpRequest对象
                var xhr = new XMLHttpRequest();
                //2.执行回调函数（接受服务器响应过来的数据）
                xhr.onreadystatechange = function () {
                    //如果ajax请求码是4表示服务器开始响应数据
                    if (this.readyState == 4) {

                        if (this.status == 200) {
                            //http状态码也正常
                            //XMLHttpRequest对象获取响应的数据放到span标签
                            document.getElementById("mydiv").innerHTML = this.responseText
                        }
                    }
                }
                //3.开启通道
                //首先需要获取到前端用户填入的数据
                //遇到低版本的浏览器发送get请求时，会走缓存，解决办法是：加一个时间戳
                // alert(new Date().getTime())
                var usercode = document.getElementById("usercode").value;
                var username = document.getElementById("username").value;
                xhr.open("GET","/ajax/ajaxrequest2?t="+new Date().getTime()+"&usercode="+usercode+"&username="+username,true);
                //4.发送数据
                xhr.send();
            }
        }
    script>

    usercode<input type="text" id="usercode"><br>
    username<input type="text" id="username"><br>

    <button id="mybtn">ajax studybutton>

    <br>

    <div id="mydiv">div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

2.4 AJAX POST请求

创建XMLHttpRequest的核心对象
注册回调函数
- 判断xhr对象的状态码是否发生变化
- 判断xhr状态码值是否为4 并且判断Http状态码是否为200
- 接受服务器响应的数据信息
打开通道（不在这里写传送的数据）
设置xhr的请求头
获取需要的数据
发送数据（在这里填写数据）

建立AJAX POST请求的样例：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX POST请求title>
head>
<body>

    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("mybtn").onclick = function (){
                //1.创建XMLHttpRequest核心对象
                var xhr = new XMLHttpRequest();
                //2.获取响应数据(this代表的就是xhr)
                xhr.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status == 200) {

                            document.getElementById("mydiv").innerHTML = this.responseText;

                        }else{
                            alert(this.status);
                        }
                    }
                }
                //3.打开通道
                xhr.open("POST","/ajax/ajaxrequest3",true);

                //模拟form表单提交数据
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                //4.发送请求
                var username = document.getElementById("username").value;
                var password = document.getElementById("password").value;
                xhr.send("username="+username+"&password="+password);//拼串发送数据
            }
        }
    script>

    
    用户名：<input type="text" id="username"><br>
    密码：<input type="password" id="password"><br>
    <button id="mybtn">发送Ajax POST请求button><br>
    <div id="mydiv">div>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

相关阅读:
Python命令行可以用下划线_代表上一次计算的结果
 重载和重写的区别
 【软件与系统安全】堆溢出
 English语法_介词 - on
linux 主机通信 ipv6 配置
 [附源码]Python计算机毕业设计_社区无接触快递栈
 IIS perl python cbrother php脚本语言配置及简单测试样例程序
 【详识JAVA语言】运算符
 git简单命令
 SpringAOP总结
原文地址：https://blog.csdn.net/weixin_44606952/article/details/126269763