Ajax介绍

最新推荐文章于 2021-09-11 10:40:01 发布

xiaoliheng1993

最新推荐文章于 2021-09-11 10:40:01 发布

阅读量190

点赞数

分类专栏： java 文章标签： ajax javascript web应用 xml 体验

本文链接：https://blog.csdn.net/xiaoliheng1993/article/details/52683735

版权

java 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Ajax，全称即Asynchronous javvScript And Xml,指异步JavaScript及xml，不是一种新的编程语言，而是一种用于

创建更好以及交互性更强的web应用程序的技术，是基于JavaScript xml html css 新用法。

举个Ajax的典型例子，通过这个例子，大家应该对Ajax的概念能更加具体，之后再详细介绍一下Ajax的实现

大家应该都有这样的体验，当你在网站上进行注册时，首先输入用户名，光标移到下一行，如果账号已经存在，输

入框后面会有提示出现 “此用户名已存在”。这就是常见的Ajax应用。是不是不使用Ajax就不能实现呢，并不是，我们

来先尝试一下不使用Ajax来实现这个功能，看看Ajax的好处究竟在哪里，看下图代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script type="text/javascript">
  	function checkname(){
  		var username=document.getElementById("haha").value;
  		location.href="${pageContext.request.contextPath}/servlet/checknameServlet?username="+username;
  	};
  </script>
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
  </head>
  
  <body>
    <form>
    	<input type="text" name="username" id="haha" οnblur="checkname()"><span id="msg">${checkmsg}</span><br/>
    	<input type="password" name="psw"><br/>
    	<input type="submit" value="提交">
    </form>
  </body>
</html>

package com.qianfeng.login;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ChecknameServlet extends HttpServlet {

	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out=response.getWriter();
		String username=request.getParameter("username");
		if("lisi".equals(username)){
			request.setAttribute("checkmsg","该用户名已经被注册");
		}else{
			request.setAttribute("checkmsg","该用户名可以使用");
		}
		request.getRequestDispatcher("/index.jsp").forward(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request,response);
	}

}

这个小程序成功的实现了用户名的验证工作，本着尽量简单一点的目的，我并没有涉及数据库的查询，只是

在验证用户名的Servlet中进行了简单的验证。但是，当我将光标移出输入框时，浏览器出现了非常明显的页面跳转现

象。尽管时间非常短暂，还是让人感觉有些不适。

接下来在看一下使用Ajax进行用户名验证的过程，还是看代码:

<%@ 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=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/ajax.js"></script>
</head>
<script type="text/javascript">
	function checkName()
	{
		//得到用户输入的用户名
        var txt = document.getElementsByName("username")[0];
        var name = txt.value;
        
        var req = getXMLHttpRequest();//得到 XMLHttpRequest对象
        
        //定义当servlet返回结果时的处理方法
        req.onreadystatechange=function(){
        	 if(req.readyState==4 && req.status==200){
        	 	 //得到响应的数据
        	 	 var span = document.getElementById("msg");
        	 	 span.innerHTML = req.responseText;
        	 }
        };
        req.open("get","${pageContext.request.contextPath}/servlet/findNameServlet?name="+name);
        req.send(null);
	}

</script>
<body>
    <!-- 验证用户名是否存在,当文本框失去焦点时立刻验证 -->
	用户名<input type="text" name="username" οnkeyup="checkName()"><span id="msg"></span><br/>
	密码<input type="password" name="passwd"><br/>
	<input type="submit" value="注册">
</body>
</html>

package com.qianfeng.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class FindNameServlet extends HttpServlet {


	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		//得到用户名
		String name = request.getParameter("name");
		//验证用户名是否存在
		if("lisi".equals(name)){
			out.print("<font color='red'>用户名已被注册</font>");
		}else{
			out.print("<font color='green'>( ^_^ )√</font>");
		}
		
	}

	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request,response);
	}

这是使用了Ajax功能的程序，实现的原理与上面那个基本相同，但是在光标移出时，页面没有进行跳转。

我相信大家通过这个程序应该明白了Ajax的作用是什么，在这个程序中，局部的页面进行了访问，整体的页面并没有变化，web交互更加贴心，用户的体验更加顺手，

更舒服。Ajax的细节实现十分简单，这里就不做什么详细介绍了。

xiaoliheng1993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax介绍

Ajax，全称即Asynchronous javvScript And Xml,指异步JavaScript及xml，不是一种新的编程语言，而是一种用于创建更好以及交互性更强的web应用程序的技术，是基于JavaScript xml html css 新用法。举个Ajax的典型例子，通过这个例子，大家应该对Ajax的概念能更加具体，之后再详细介绍一下Ajax的实现大家应该
复制链接

扫一扫