臧富祥 ^回到顶部

您的当前位置:首页 > web资讯 > JS > ajax基础

ajax基础

所属分类: JS   2019-12-27 16:32:05  编辑:admin  浏览次数 23 次

用于用户名校验的页面

准备一个JSP页面,叫做checkName.jsp用于校验提交的用户名是否存在

如果提交的用户名是abc就打印存在,否则就可以使用

<html>

<a href="http://xxx.com?name=abc">checkName.jsp?name=abc</a>

<br>

<a href=" http://xxx.com?name=def">checkName.jsp?name=def</a>

</html>

不是用Ajax通过刷新页面验证账号是否存在

如果不使用AJAX,传统的方法需要通过提交数据 刷新页面来获知用户名是否存在。

提示:使用F5回到原来页面

<form action=" http://xxx.com ">

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

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

</form>

使用Ajax通过无刷新验证账号是否存在

<span>输入账号 :</span>

<input id="name" name="name" onkeyup="check()" type="text"> 

<span id="checkResult"></span>

<script>

var xmlhttp;

function check(){

  var name = document.getElementById("name").value;

  var url = " http://xxx.com?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>

分步解析

创建XHR

创建XHR对象 XMLHttpRequest
XHR对象是一个javascript对象,它可以在用户没有感觉的情况下,就像背后运行的一根小线程一般,悄悄的和服务器进行数据交互
AJAX就是通过它做到无刷新效果的

<script>

var xmlhttp =new XMLHttpRequest();

document.write(xmlhttp);

</script>

设置响应函数

XHR对象的作用是和服务器进行交互,所以既会发消息给服务器,也能接受服务器返回的响应。 
当服务器响应回来的时候,调用怎么处理呢? 
通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。

设置并发出请求

通过open函数设置背后的这个小线程,将要访问的页面url

xmlhttp.open("GET",url,true);

通过send函数进行实际的访问

xmlhttp.send(null);

null表示没有参数,因为参数已经通过“GET" 方式,放在url里了。

只有在用"POST",并且需要发送参数的时候,才会使用到send

类似这样:

xmlhttp.send("user="+username+"&password="+password)

处理响应信息

checkResult 函数中处理响应

function checkResult(){

  if (xmlhttp.readyState==4 && xmlhttp.status==200)  

     document.getElementById('checkResult').innerHTML=xmlhttp.responseText;

}

xmlhttp.readyState 4 表示请求已完成

xmlhttp.status 200 表示响应成功

xmlhttp.responseText; 用于获取服务端传回来的文本

document.getElementById('checkResult').innerHTML 设置span的内容为服务端传递回来的文本

完整流程

<span>输入账号 :</span>

<input id="name" name="name" onkeyup="check()" type="text">

<span id="checkResult"></span>

<script>

var xmlhttp;

function check(){

  var name = document.getElementById("name").value;

  var url = " http://xxx.com?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>


Web文章检索

Web文章目录