【Day 26】JavaScript AJAX - XMLHttpRequest

说明 : 藉由 XMLHttpRequest(XHR)物件的方式来存取服务器端的资料,可以直接经由指定的 URL 撷取资料却不用刷新整个网页。

在AJAX应用中 XMLHttpRequest 被大量的使用。
虽然 XMLHttpRequest 这个物件的命名包含了 XML 与 HTTP 等字眼,但实际上 XMLHttpRequest 可用来接收任何类型的资料,不限於 XML 类型而已。

建构 XMLHttpRequest 物件的语法:

var XMLHttpRequest; //建立XMLHttpRequest物件
variable = new XMLHttpRequest(); //实作XMLHttpRequest物件

向服务器发送请求 - 使用 XMLHttpRequest 物件的 open() 和 send() 方法:

使用 open 方法指定要请求的网址 (URL),语法:
httpRequest.open( method , url , async );
参数 method 指定 HTTP method 如: "GET", "POST"
GET 比 POST 更简单、更快,并且可以在大多数情况下使用。
但是,在以下情况下,请使用 POST 请求:
* 无法使用缓存文件(更新服务器上的文件或数据库)
* 向服务器发送大量数据(POST 没有数据量限制)
* 发送包含未知字符的用户输入时,POST 比GET 更稳定安全。
参数 url 指定要发送请求的网址
参数 async 是一个布林值 (boolean) 表示是否要做非同步请求,预设是 true 非同步。一般来说,很少会使用到同步请求。

使用 send 方法,语法:
send()

服务器响应 - XMLHttpRequest 物件的 responseText 和 responseXML 属性

如需获得来自服务器的响应,请使用XMLHttpRequest 物件的 responseText 或 responseXML 属性。
responseText 获得字符串形式的响应数据。

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

onreadystatechange 事件

当请求被发送到服务器时,需要执行一些基於响应的任务。
每当readyState 改变时,就会触发onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 物件的三个重要的属性:
1.onreadystatechange - 储存函数(或函数名),每当 readyState 属性改变时,就会调用该函数。

2.readyState - 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0 : 请求未初始化
1 : 服务器连接已建立
2 : 请求已接收
3 : 请求处理中
4 : 请求已完成且响应已就绪

3.status

  • 200 : "OK"
  • 404 : 未找到页面
<!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>
</head>
<body>
    <div id="demo">
        <h1>The XMLHttpRequest Object</h1>
        <button type="button" onclick="loadDoc()">Change Content</button>
    </div>    
    <script>
        function loadDoc() {
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              document.getElementById("demo").innerHTML =
              this.responseText;
            }
          };
          xhttp.open("GET", 档案在服务器上的位置, true);
          xhttp.send();
        }                
    </script>
</body>
</html>

<<:  【Day 11】- 还在 PTT 点击已满 18 岁? 带上 cookies 吧!(实战 PTT 爬虫 1/3)

>>:  Day11 PHP数据类型--复合类型之阵列

DAY 9 『 CollectionView 』Part2

CollectionView:Storyboard、Xib + Collection View + ...

[Day28]初探Firebase Cloud Messaging for Flutter

大家好,今天要来尝试使用firebase_messaging,今天使用的是Android手机 首先到...

D-19. Git中的tag 、Git flow && Array Partition I

如果单纯从学习Ruby再学习运用Rails开发网页专案,那可能还要再认识一些技能,对开发上能更有帮助...

便利贴中的手势操作

在 Jetpack Compose 的官方文件中,拖曳手势操作是这样子使用的: Box(modifi...

AE卷轴制作3-Day4

来到了第四天,还在第一个练习,但每天都有一点不一样的收获, 今天练习到在Shape 底下加使用Rep...