AJAX发送请求(GET方式)

分手后的思念是犯贱 2022-05-23 23:58 276阅读 0赞

# AJAX请求 #

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术：

*  *这里介绍一下AJAX发送请求（GET）*

#### 首先我们看一下效果 ####

> **当用户名已经存在时**  
> ![这里写图片描述][70]
> 
> **当用户名不存在于数据库里，可以使用时**  
> ![这里写图片描述][70 1]

在用户登录时，这是最常见的用法。接下来，我们看看代码吧。

**首先，咱们写一个简单的PHP服务**

### PHP部分 ###

代码如下：

<?php
    $db = ['tom', 'mary', 'john'];
    
    //数据库的查询
    
    $uname = $_REQUEST['uname'];
    $exists = false;
    foreach($db  as  $n){
        if($n === $uname){
            $exists = true;
            break;
        }
    }
    
    if($exists){
        echo '1';
    }else{
        echo '0';
    }
    ?>

> 这里仅是一个demo，用于举例。

接着，我们看HTML部分。HTML的代码很简单，就不说了，直接上代码：

### HTML部分 ###

代码如下：

<h1>验证用户名是否正确--AJAX</h1>
        用户名: <input type="text" id="uname"> <span id="uname_ts"></span>
        <br>
        密码名: <input type="password" id="pwd"> <span id="pwd_ts"></span>
        <br>
        验证码: <input type="text">
        <br>
        <button>提交</button>

### 接下来我们进入AJAX部分。 ###

*  AJAX发送请求分为四个步骤，万变不离其宗：  
    
    
    > 1.建立连接

var xhr;
        if (window.XMLHttpRequest){
       // 兼容 IE7+, Firefox, Chrome, Opera, Safari
            xhr = new XMLHttpRequest();
         }
        else {
       // 兼容 IE6, IE5
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
         }

> 2.绑定监听函数

xhr.onreadystatechange = function(){ 
                //内容
            }

> 3.创建请求

xhr.open("GET","01.txt",true)
            // xhr.open("请求方式","test1.txt",true);
            // GET：一般用于查询，所有的内容全部暴露地址栏中，2000来个字符
            // POST：一般用于存储或者修改服务器数据，请求体重，理论上网速好的情况下不限制大小
            // 第二个参数：请求的地址
            // 第三个参数：boolean 默认为true，不写也为true，表示异步，false表示同步

> 4.发送数据

xhr.send(null);
            // xmlhttp.send(); 发送数据
            // 有数据的时候写在send参数里，没有就不写或者'null'

#### 那AJAX判断用户名就非常简单易懂了 ####

*  `注意：页面需要在服务器上打开，这里用的Apache服务器`

### AJAX部分 ###

代码如下：

> 以上就是AJAX简单的介绍。

[70]: /images/20220524/394a4b1d61824a9d8e2148695dff5014.png
[70 1]: /images/20220524/a17c1cbf85734db381b5d82a84af5103.png