JavaScript

JS Ajax请求简介说明

下文笔者讲述JavaScript中Ajax的简介说明,如下所示

Ajax简介

Ajax(“Asynchronous JavaScript and XML”)
是JavaScript语言借助XMLHttpRequest对象发送请求，并获取返回结果
同时渲染DOM,呈现给用户，它可以实现无刷新更新网页,所以现在AJAX已经应用于各大网页中

Ajax注意事项:
   1.Ajax是异步运行的方式,Ajax会将代码交给另一个线程运行,当前线程会继续向下运行
   2.Ajax中的X代表XML

Ajax工作原理

JavaScript需要使用浏览器内置XMLHttpRequest对象
    向服务器发送HTTP请求
    并接收服务器响应的数据

XMLHttpRequest的示例

var request = new XMLHttpRequest();

XMLHttpRequest.open(method, url, async, user, password);

参数说明如下：
  method：请求的类型(使用的 HTTP 方法),如：GET、POST、PUT、HEAD、DELETE 等；
  url：请求的地址
  async：可选参数,布尔类型,表示是否请求是否异步执行，默认值为 true；
  user：可选参数,表示用户名,主要用来认证，默认值为 null；
  password：可选参数,表示密码,同样用来认证，默认值为 null。
例 
var request = new XMLHttpRequest();
request.open('GET', 'test.php');

XMLHttpRequest对象send()

XMLHttpRequest.send(body);
  body:
   是一个可选参数，表示请求主体
   即请求中要发送的数据
   如果不需要在请求时发送数据

 如:
   发送GET请求,就可以忽略该参数或者传入 null。
   如果请求方法为 GET 或 HEAD
   则应该将请求主体设置为 null或忽略请求主体 
var request = new XMLHttpRequest();
request.open('GET', './test.php');
request.send(null);

检索响应信息

请求发送成功后（即使用 send() 方法发送请求后）
 可以通过检索 XMLHttpRequest 对象来获取服务器的响应信息
XMLHttpRequest 对象中有许多与响应有关的属性
 如：
  XMLHttpRequest.readyState：一个无符号整型数字，表示请求的状态码，取值如下所示：
0：未初始化，尚未调用 open() 方法；
1：启动，已调用 open() 方法，但尚未调用 send() 方法；
2：发送，已调用 send() 方法，但尚未接收到响应；
3：接收，已接收到部分响应数据，但尚未完成；
4：完成，已接收到全部响应数据，可以在客户端使用了。

XMLHttpRequest其他说明

XMLHttpRequest.onreadystatechange
   指定一个函数（回调函数），当 readyState  的值发生改变时，就会调用这个函数；
XMLHttpRequest.responseText
   请求的响应信息，如果请求未成功或尚未发送请求，则为 null；
XMLHttpRequest.responseType
   一个枚举值，用于指定响应中包含的数据类型；
XMLHttpRequest.responseURL
   返回响应的序列化 URL（与请求的 URL 相同），如果 URL 为空则返回空字符串；
XMLHttpRequest.responseXML
   返回一个包含 HTML 或 XML 的 Document 对象
    若请求未成功、未发送或响应数据无法解析为 XML 或 HTML 则返回 null；
XMLHttpRequest.status
   一个无符号整型数字，表示请求的响应状态码，常见的响应状态码如下所示：
200：请求成功，服务器成功处理了请求；
404：请求失败，服务器未找到请求的页面；
500：服务器暂时不可用。
XMLHttpRequest.statusText 
   一个字符串，表示响应状态的文本信息，例如“OK”或“Not Found”；
XMLHttpRequest.timeout
   一个无符号整型数字，表示请求的超时时间，单位为毫秒
     若超过该时间，请求会自动终止，默认值为 0，表示没有超时时间；
XMLHttpRequest.upload
    返回一个 XMLHttpRequestUpload 对象，用来表示上传的进度。
例 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <div id="result"></div>
    <button type="button" onclick="displayFullName()">点击发送请求</button>
    <script>
        function displayFullName() {
            // 创建 XMLHttpRequest 对象
            var request = new XMLHttpRequest();
            // 实例化请求对象
            request.open("GET", "test.php?name=二八年华&url=https://www.linux28.com/");
            // 监听 readyState 的变化
            request.onreadystatechange = function() {
                // 检查请求是否成功
                if(this.readyState === 4 && this.status === 200) {
                    // 将来自服务器的响应插入当前页面
                    document.getElementById("result").innerHTML = this.responseText;
                }
            };
            // 将请求发送到服务器
            request.send();
        }
    </script>
</body>
</html>

//test.php

<?php
    if(isset($_GET["name"]) && isset($_GET["url"])) {
        $name = htmlspecialchars($_GET["name"]);
        $url = htmlspecialchars($_GET["url"]);
        // 输出欢迎信息
        echo "欢迎访问 $name! 本站网址为：$url";
    } else {
        echo "你好！欢迎访问我们的网站。";
    }
?>