Ajax入门程序一--------用户名校验

木南山牙

于 2018-10-23 11:34:25 发布

阅读量184

点赞数

分类专栏： Ajax --------------前端--------------

本文链接：https://blog.csdn.net/qq_37230121/article/details/83303873

版权

--------------前端-------------- 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Ajax

2 篇文章 0 订阅

订阅专栏

前提：什么是Ajax？
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
Ajax的本质：
和刷新页面一样都是向服务器发送了一个http请求获得结果并进行显示（超链接或者提交表单），但不同的是ajax不需要刷新整个界面，只需要实现浏览器提供的接口创建一个XMLHttpRequest对象，使用现有标准的新方法即可实现向服务器发送http请求！

使用Ajax只需要理清楚以下几点：

请求url（服务器端路径）
请求方法：get or post
请求数据（请求数据格式、数据是自定义还是通过JS界面获取）
响应数据返回（响应数据格式、如何接收并解析数据）
响应数据的显示（通过JS在html界面哪里显示）

1.入门程序：用户名校验

浏览器端： register.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<script>
function ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }

		return xmlHttp;
}
function showHint(str)
{
  //1.创建xmlhttprequest对象
  var request = ajaxFunction();
  //判断输入是否为空
  if (str.length==0)
  { 
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  //4.获取响应数据
  request.onreadystatechange=function()
  {
	//4.1添加监听
    if (request.readyState==4 && request.status==200)
    {
    	 //4.2获取响应消息并显示在界面
    	 document.getElementById("txtHint").innerHTML=request.responseText;
    }
  }
  //2.设置请求：
  /* 参数一：请求类型GET or POST
   * 参数二：请求的路径
   * 参数三：是否异步，一般true，表示发送后就不再去管而去做其他事
   */
  request.open("POST","checkname.jsp?",true);
  //2.1如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
  request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  //3.发送请求：post请求需要在send方法里面写请求数据。 
  request.send("name="+str);
}
</script>
<body>
	<h3>用户注册:</h3>
	<form action=""> 
	输入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
	</form>
	<p>提示信息: <span id="txtHint"></span></p> 
</body>
</html>

服务器端： checkname.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<%
	String name = request.getParameter("name");
	//模拟服务器端校验
	if(name.equals("cyn")){
		//存在用户名
		out.println("<font color='red'>用户名已存在!</font>");
	}
	else{
		//不存在用户名
		out.println("<font color='green'>用户名可用!</font>");
	} 
%>
</body>
</html>

运行结果：

2.总结：

首先必须根据浏览器版本的不同创建Ajax引擎

var xmlhttp;
if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

open()方法只是初始化http请求参数，并不真正发送http请求。可以调用send()方法发送http请求。
根据http请求的状态，自动调用相应处理函数接收数据并在前台界面进行显示操作：xmlhttp.onreadystatechange=function(){}。
XMLHttpRequest的属性responseText自动封装了接收到的相应文本的所有内容！

ajax的基本流程可以概括为：

页面上js脚本实例化一个XMLHttpRequest对象，设置好服务器端的url、必要的查询参数、回调函数之后，向服务器发出请求，服务器在处理请求之后将处理结果返回给页面，触发事先绑定的回调函数。这样，页面脚本如果想要改变一个区域的内容，只需要通过ajax向服务器获取与该区域有关的少量数据，在回调函数中将该区域的内容替换掉即可，不需要刷新整个页面。

木南山牙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax入门程序一--------用户名校验

前提：什么是Ajax？ AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。Ajax的本质：和刷新页面一样都是向服务器发送了一个http请求获得结果并进行显示（超链接或者提交表单），但不同的是ajax不需要刷新整个界面，只需要实现浏览器...
复制链接

扫一扫

专栏目录