Ajax 技术(四)

目的：

熟练掌握AJAX基础和XMLHttpRequest对象及其方法。
重点掌握AJAX发送请求的具体过程，及过程中的不同状态。

要求：

实现用户注册表单中，使用AJAX技术根据users.json检测用户名是否被占用。
如用户名没被占用，在文本框旁边打个勾；如已占用打个叉，并显示文字“已占用”
从questions.json中随机抽取一个问题和答案，根据抽取的问题，用户填写答案进行匹配，防止使用机器人注册。例如：
users.json, 编写5个已存在用户。
questions.json, 编写3个问题和对应的答案。

[

// user.json

{

“id”: 1

“username”: “tom”,

“password”: “123456”

{

“id”: 2

“username”: “tom1”,

“password”: “1234567”

……

]

[

// answer.json

{

“id”: 1

“question”: “我的家乡在哪里？”,

“answer”: “南昌”

{

“id”: 2

“question”: “我喜欢的宠物是什么？”,

“password”: “大黄”

……

]

源代码：

<!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>this is a js experiment made by xphohr</title>


<!-- 简单地样式装饰页面 -->

  <style>

    form{

      width: 300px;

      background-color: cornflowerblue;

      margin: 100px auto;

      padding: 50px;

      text-align:left;

      border: 1px solid black;

      border-radius: 25px ;

    }

  </style>

</head>

<body>

    <form method="get" action="" id="form1">

      <div>用户名：<input type="text" name="username" id="username" onkeyup="checkName()"><span id="message"></span></div><br>

      <div id="question"><input type="text"id="answer"></div><br>

      <input type="submit" value="提交" onclick="checkAnswer()">

    </form>

</body>


<!-- JS代码 -->

<script>

// 获取所用要使用的节点

  var username=document.getElementById('username');

  var answer = document.getElementById("answer");

  var message=document.getElementById('message');

  var boo,bo;

  var randomQuestion;



  // 随机生成一个问题

  (function ask(){        

      var question = document.createElement("div");

      ajaxFunc('question.json',function(str){

        var questionsArr = JSON.parse(str);

        randomQuestion = Math.ceil(Math.random()*questionsArr.length)-1;

        var questiontext = questionsArr[randomQuestion].question;

        question.innerHTML = questiontext;

        document.getElementById("question").insertBefore(question,answer);

      })

  })()



  // 检查用户名是否已存在

  function checkName(){

    boo=false;

    ajaxFunc('user.json',function(str){

      var usersArr=JSON.parse(str)

      for(var i=0;i<usersArr.length;i++){

        if (usersArr[i].username==username.value) {

            boo=true;

        }

      }

      if (boo) {

          message.innerHTML='× 已占用'

      }else{

          message.innerHTML='√'

      }

    })

  }  



// 检查问题回答是否正确

  function checkAnswer(){

    bo=false;

    ajaxFunc('question.json',function(str){

      var answersArr=JSON.parse(str)

        if (answersArr[randomQuestion].answer==answer.value) {

            bo=true;

      }

      if(!boo){//用户名是否占用

          if(bo){//问题回答是否正确

              alert("注册成功！");

          } else {

              alert("答案输入错误！");

      }

      } else {

          alert("用户名已被注册！");

      }

    })

  }



  // 将ajax封装成一个函数

  function ajaxFunc(url,funSucc,fnFaild){

    if (window.XMLHttpRequest) { //非IE

        xhr = new XMLHttpRequest();

    } else if (window.ActiveXObject) { //IE

        xhr = new ActiveXObject("Microsoft.XMLHTTP");

    }

    xhr.open('GET',url,true);

    xhr.send();

    xhr.onreadystatechange=function(){

      if (xhr.readyState==4) {

          if (xhr.status==200) {

              funSucc(xhr.responseText)

          }else{

              if (fnFaild){

                    fnFaild(xhr.statusText)

              }

          }

      }

    }

  }

</script>

</html>

截图：

总结(遇到问题、解决方式、心得体会)：

本次实验思路相对清晰简单.

先是将Ajax相关代码封装成一个ajaxFunc()函数,以便后续的

检查用户名是否重复,

随机选取一个问题,

检查回答问题是否正确

等需要从json文件中读取数据的操作变得简洁,提高代码复用率.

所以本次实验的关键在与完成ajaxFunc() 函数部分的代码.AJAX统一了一个流程，要想实现AJAX，按照以下步骤：

创建XMLHttpRequest对象.
设置请求方式open().
发送请求send()
调用回调函数onreadystatechange()

只要按照上述流程,可以说完成该ajaxFunc()函数毫无问题.

posted @ 2022-03-27 17:36 霖霖的信箱阅读(28) 评论(0) 收藏举报

刷新页面返回顶部

霖霖的信箱

Ajax 技术(四)

公告