Ajax详解(拓展:利用Ajax实现用户名的校验)

时间:2022-07-22
本文章向大家介绍Ajax详解(拓展:利用Ajax实现用户名的校验),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

简介

AJAX全称为“AsynchronousJavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。它不是一种新技术,是如下几种技术的组合应用:

基于web标准(standards-basedpresentation)XHTML+CSS的表示; 使用 DOM(DocumentObject Model)进行动态显示及交互; 使用 XML 和 XSLT 进行数据交换及相关操作; 使用 XMLHttpRequest 进行异步数据查询、检索; 使用 JavaScript将所有的东西绑定在一起。

作用

  1. 通过异步模式,提升了用户体验
  2. 优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
  3. Ajax 在客户端运行,承担了一部分本来由服务器承担的工作,减少了大用户量下的服务器负载。

同步与异步

  1. 同步:提交请求 -> 等待服务器处理 -> 处理完毕返回,这个期间客户端浏览器不能干任何事
  1. 异步:请求通过事件触发 -> 服务器处理(这是浏览器仍然可以作其他事情)-> 处理完毕

JavaScript下的Ajax

问题: 怎么在保留当前页面信息的基础上显示新的信息呢 解决: 使用ajax 特点: 实现网页的局部刷新 应用前景: 搜索框提示语 地图 网页的其他功能 使用: ajax的访问原理

第一个ajax程序:

		流程:
			1、创建ajax引擎对象
			2、声明监听函数
				//判断ajax状态码
					//判断响应状态码
						//获取响应信息(普通字符串和json格式的字符串)
						//处理响应
			3、创建并发送ajax请求
				创建请求(设置请求方式,设置请求地址,设置异步或者同步)
				发送请求
			4、其他处理

改动的参数就是上方的蓝色代码(第2-4个),分别为获取的输入框id,请求方式,url

ajax的get请求附带请求数据的方式

ajax.open("get","my?uname='张三'&password='123'",true);
ajax.send(null);

ajax的post请求附带请求数据的方式

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("method=login&uid=10");`

使用ajax时遇到的http响应码信息

1**:请求收到,继续处理
2**:操作成功收到,分析、接受
3**:完成此请求必须进一步处理
4**:请求包含一个错误语法或不能完成
5**:服务器执行一个完全有效请求失败
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到,但返回信息为空
205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET,但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码,现行版本中不再使用
307——申明请求的资源临时性删除
400——错误请求,如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖,请求资源不可访问
407——类似401,用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态,请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下一级服务器不能满足请求
500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用,有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本

JQuery下的Ajax

jquery是js的一个轻量型框架,已经将js创建的操作进行了封装, 而ajax也是js的一部分,所以jQuery也已经将ajax进行了封装。

格式

	//get请求方式
	$.get(url,data,fn)	
	//例如
	$("#uname").blur(function(){
	//get请求方式(url,json{},function(){})
	$.get("data",{uname:$("#uname").val()},function(data){
		alert(data);
	}); 
	
	
    //post请求方式
    $.post(url,data,fn)
	//例如
	$.post("data",{uname:$("#uname").val()},function(data){
	alert(data);
	});


    //ajax请求方式
    $.ajax({json格式参数}):参数说明参照api
    //例如
    $.ajax({
		type:"get",
		url:"data",
		data:"uname="+$("#uname").val(),
		success:function(data){
		alert(data);
			}
		})

url:请求地址 data:请求参数,参数格式为json对象 success: 请求成功后回调函数。参数:服务器返回数据,数据格式。 Ajax 事件。注意函数要声明一个形参,用来接收响应数据。 type:请求方式,为ajax请求方式独有 async (Boolean) : (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。 … …

注:尤其重点记忆Ajax的方式,因为这种方式应用范围最广,其他属性请自行搜索jquey的API

json格式

JSON是一种轻量级数据交换格式。 json简单说就是js中的对象和数组,所以这两种结构就是对象和数组2种结构,你用的数据格式就是对象和数组的复合结构。

作用

Json就是js创建对象的另一种格式,保证对象中数据的紧密性和完整性。

书写形式

var 对象名={
    	键名:值,
    	键名:值,
    	...
    	键名:值
    		}

利用Jquery中的Ajax实现用户名校验

1、数据库表设计

DROP TABLE IF EXISTS `t_user`;
CREATE TABLE `t_user` (
  `uid` int(10) NOT NULL AUTO_INCREMENT,
  `uname` varchar(100) NOT NULL,
  `pwd` varchar(100) NOT NULL,
  `sex` char(4) NOT NULL,
  `age` int(3) NOT NULL,
  `birthday` date NOT NULL,
  PRIMARY KEY (`uid`)
) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8;


INSERT INTO `t_user` VALUES ('8', '张三', '12345', '女', '22', '2018-07-10');
INSERT INTO `t_user` VALUES ('9', '李四', '123', '女', '22', '2018-07-18');
INSERT INTO `t_user` VALUES ('10', '王五', '123', '女', '22', '2018-07-12');
INSERT INTO `t_user` VALUES ('11', 'chy', '12345', '男', '24', '1996-06-07');
INSERT INTO `t_user` VALUES ('12', 'xyl', '12345', '男', '24', '2019-07-06');

-- dao层查询用到的语句
String sql="select * from t_user where uname=?";

2、servlet层所用到的类

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

import cn.bjsxt.service.DataService;
import cn.bjsxt.service.impl.DataServiceImpl;

public class DataServlet extends HttpServlet {
	@Override
	protected void service(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		
		//设置请求编码格式
		req.setCharacterEncoding("utf-8");
		//设置响应编码格式
		resp.setContentType("text;charset=utf-8");
		
		//获取请求信息
		String uname=req.getParameter("uname");
		String areaname=req.getParameter("areaname");
		
		//处理请求信息
			//创建业务层对象
			DataService ds = new DataServiceImpl();
			//检验用户名信息
			boolean flag=ds.checkUnameInfoService(uname);
			
		//响应处理结果
			if (flag) {
				resp.getWriter().write("true");
			} else {
				resp.getWriter().write("false");
			}
	}
}

3、在web.xml中配置访问别名

<servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>DataServlet</servlet-name>
    <servlet-class>servlet全限定路径</servlet-class>
  </servlet>

<servlet-mapping>
    <servlet-name>DataServlet</servlet-name>
    <url-pattern>/data</url-pattern>
  </servlet-mapping>

4、jsp代码

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'reqJQuery.jsp' starting page</title>
    <!-- 引入jquery文件 -->
	<script type="text/javascript" src="js/j.js"></script>
	<script type="text/javascript">
		//页面加载成功,给html元素添加事件
		$(function(){
			$("#uname").blur(function(){
				
				$.ajax({
					type:"get",
					url:"data",
					data:"uname="+$("#uname").val(),
					success:function(data){
						alert(data+"uname="+$("#uname").val());
						//通过下面两种方式,体会js和jquery获取方式节点以及设置css的不同
						if(eval(data)){
							//获取Span对象
							//设置span颜色
							$("#unameSpan").css("color","red");
							//将数据填充到span中
							$("#unameSpan").html("用户名已被注册");
						}else{
							//获取Span对象
							var span=document.getElementById("unameSpan");
							//设置span颜色
							span.style.color="green";
							//将数据填充到span中
							span.innerHTML="用户名ok";
						}
					}
					 
				});

				})
		})

	</script>
	
  </head>
  
  <body>
  <h3>Jquery中的ajax的学习</h3> <hr />
   		用户名 : <input type="text" name="uname" id="uname" value="" onblur="checkUname()"/> <span id="unameSpan"></span>
  </body>
</html>

5、实体类

public class User {
	private int uid;
	private String uname;
	private int age;
	private String fav;
	public User() {
		super();
	}
	public User(int uid, String uname, int age, String fav) {
		super();
		this.uid = uid;
		this.uname = uname;
		this.age = age;
		this.fav = fav;
	}
	public int getUid() {
		return uid;
	}
	public void setUid(int uid) {
		this.uid = uid;
	}
	public String getUname() {
		return uname;
	}
	public void setUname(String uname) {
		this.uname = uname;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getFav() {
		return fav;
	}
	public void setFav(String fav) {
		this.fav = fav;
	}
	@Override
	public int hashCode() {
		final int prime = 31;
		int result = 1;
		result = prime * result + age;
		result = prime * result + ((fav == null) ? 0 : fav.hashCode());
		result = prime * result + uid;
		result = prime * result + ((uname == null) ? 0 : uname.hashCode());
		return result;
	}
	@Override
	public boolean equals(Object obj) {
		if (this == obj)
			return true;
		if (obj == null)
			return false;
		if (getClass() != obj.getClass())
			return false;
		User other = (User) obj;
		if (age != other.age)
			return false;
		if (fav == null) {
			if (other.fav != null)
				return false;
		} else if (!fav.equals(other.fav))
			return false;
		if (uid != other.uid)
			return false;
		if (uname == null) {
			if (other.uname != null)
				return false;
		} else if (!uname.equals(other.uname))
			return false;
		return true;
	}
	@Override
	public String toString() {
		return "User [uid=" + uid + ", uname=" + uname + ", age=" + age
				+ ", fav=" + fav + "]";
	}
	
}

6、其他

jdbc工具类以及相关jar包、jquery文件的导入、db.properties、service以及其实现类、dao层以及其实现类请自行解决