看程序学ajax

涂家豪

于 2019-06-19 17:02:29 发布

阅读量148

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/tujiahao1/article/details/92838235

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="http://how2j.cn/study/checkName.jsp?name=abc">checkName.jsp?name=abc</a>
<br>
<a href="http://how2j.cn/study/checkName.jsp?name=def">checkName.jsp?name=def</a>

<form action="http://how2j.cn/study/checkName.jsp">

  输入账号 <input name="name" type="text" value="abc">

  <input type="submit" value="验证账号是否存在">

</form>

<span>输入账号 :</span>
<input id="name" name="name" onkeyup="check()" type="text">
<span id="checkResult"></span>
//使用AJAX 通过无刷新验证账号是否存在
<script>
  var xmlhttp;
  function check(){
    var name = document.getElementById("name").value;
    var url = "http://how2j.cn/study/checkName.jsp?name="+name;

    xmlhttp =new XMLHttpRequest();
    xmlhttp.onreadystatechange=checkResult; //响应函数
    xmlhttp.open("GET",url,true);   //设置访问的页面
    xmlhttp.send(null);  //执行访问
  }

  function checkResult(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
      document.getElementById('checkResult').innerHTML=xmlhttp.responseText;

  }

</script>
</body>
</html>