Ajax

最新推荐文章于 2022-03-07 15:03:45 发布

sigarlin

最新推荐文章于 2022-03-07 15:03:45 发布

阅读量147

点赞数

分类专栏： Ajax 文章标签：前端 Ajax知识归纳

本文链接：https://blog.csdn.net/sigarlin/article/details/88756271

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Ajax知识点归纳

1.Ajax是什么

“Asynchronous Javascript And XML”（异步JavaScript和XML）
Ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。
1.使用CSS和XHTML来表示。
2.使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。

2.Ajax有什么用

Ajax可以让我们无需重新加载全部网页内容，即可完成对某个部分的内容执行刷新。
最典型的例子：在注册网站的时候，输入的用户名，会自动地提示我们，该用户已被注册。

3.Ajax内部原理

传统方式：
1. 输入用户名，
2. 点击一个按钮，校验。
3. 把数据提交给服务器
4. 服务器在后台帮助我们完成校验，并且反馈信息。
5. 我们在浏览器上提示用户，给出结果

Ajax方式：
1. 通过JS 获取输入框文本内容 document.getElementById(“username”).value
2. 通过XmlHttpRequest 去执行请求。 XmlHttpRequest 其实就是 XML + http + Request 的组合。
3. 请求结束后，收到结果，再使用 js 去完成提示。
4. 可以配合 css 样式来增加提示效果。

4.Ajax的使用

（1）GET方式提交数据

<%@ 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>Ajax Get</title>
		<script type="text/javascript">
			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;
			}
			//执行GET请求
			function get(){
				//1.创建XmlHttpRequest对象
				var request = ajaxFunction();
				//2.发送请求
				/*
					参数一：请求方式 GET/POST
					参数二：请求路径
					参数三：是否异步 true/false
				*/
				//request.open("GET","/AjaxGet/ServletDemo01",true);
				request.open("GET","/AjaxGet/ServletDemo01?username=admin",true);
				//3.获取响应数据
				request.onreadystatechange = function(){
					//是否正常处理  状态码是否200
					if(request.readyState == 4 && request.status == 200){
						alert(request.responseText);
					}
				}
				request.send();
			}
		</script>
	</head>
	<body>
		<a href="#" onclick="get()">使用Ajax方式发送Get请求</a>
	</body>
</html>

package com.sigar.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ServletDemo01")
public class ServletDemo01 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String username = request.getParameter("username");
		System.out.println("收到Get请求" + username);
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().write("收到了请求");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

（2）POST方式提交数据

<%@ 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>Ajax Get</title>
		<script type="text/javascript">
			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;
			}
			//执行GET请求
			function post(){
				//1.创建XmlHttpRequest对象
				var request = ajaxFunction();
				//2.发送请求
				/*
					参数一：请求方式 GET/POST
					参数二：请求路径
					参数三：是否异步 true/false
				*/
				request.open("POST","/AjaxGet/ServletDemo01",true);
				//3.获取响应数据
				request.onreadystatechange = function(){
					//是否正常处理  状态码是否200
					if(request.readyState == 4 && request.status == 200){
						alert(request.responseText);
					}
				}
				//使用post方式传数据，要添加头，说明提交的数据类型是经过url编码的form表单数据
				request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				request.send("username=username");
			}
		</script>
	</head>
	<body>
		<a href="#" onclick="post()">使用Ajax方式发送Post请求</a>
	</body>
</html>

package com.sigar.servlet;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/ServletDemo01")
public class ServletDemo01 extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String username = request.getParameter("username");
		System.out.println("收到Get请求=====>" + username);
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().write("收到了Get请求");
	}


	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("收到Post请求------>");
		doGet(request, response);
	}

}

5.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>用户注册demo</title>
		<script type="text/javascript">
			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 checkUsername(){
				var xmlHttp = ajaxFunction();
				var username = document.getElementById("username").value;
				xmlHttp.open("POST", "/AjaxGet/RegisterCheckUserServlet", true);
				xmlHttp.onreadystatechange = function(){
					if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
						if(xmlHttp.responseText == 1){
							document.getElementById("UNameTips").innerHTML = "<font color='red'>&nbsp;用户名已存在&nbsp; </font>";
						}
					}
				}
				xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
				xmlHttp.send("username=" + username);
			}
		</script>
	</head>
	<body>
		<table border="1px">
			<tr>
				<td>用户名</td>
				<td><input type="text" name="username" id="username" onblur="checkUsername()"><span id="UNameTips"></span></td>
			</tr>
			<tr>
				<td>密码</td>
				<td><input type="password" name="password"></td>
			</tr>
			<tr>
				<td colspan="2"><input type="submit" value="注册"></td>
			</tr>
		</table>
	</body>
</html>

package com.sigar.servlet;

import java.io.IOException;
import java.sql.SQLException;

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

import com.sigar.dao.UserDao;
import com.sigar.dao.impl.UserDaoImpl;

/**
 * Servlet implementation class RegisterCheckUserServlet
 */
@WebServlet("/RegisterCheckUserServlet")
public class RegisterCheckUserServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		try {
			String username = request.getParameter("username");
			UserDao userDao = new UserDaoImpl();
			Boolean isExist = userDao.RegisterCheckUser(username);
			if(isExist){
				//存在该用户
				response.getWriter().println(1);
			}else{
				//不存在该用户
				response.getWriter().println(0);
			}
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

sigarlin

关注

0
点赞
踩
0

收藏

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

**Ajax知识点归纳**1.Ajax是什么“Asynchronous Javascript And XML”（异步JavaScript和XML）Ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。1.使用CSS和XHTML来表示。2.使用DOM模型来交互和动态显示。3.使用XMLHttpRequest来和服务器进行异步通信。4.使用javascript来绑...
复制链接

扫一扫