13、Ajax的使用
一、AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
a)、AJAX = 异步 JavaScript 和 XML。
b)、AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。例如我们在用户注册的时候需要验证该注册名是否已经存在,这时候就可以使用Ajax实现与服务器的的通信来验证。
二、AJAX的使用:
1、创建 XMLHttpRequest 对象:所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 对象(详见W3School)
2、向服务器发送请求:与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用
3、处理返回数据
<%@ 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>
<script type="text/javascript">
function ajax(){
var url = "<%=request.getContextPath() %>/servlet/AjaxTest";
var value = document.getElementById("userName").value;
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
if("unsucceed"== xmlHttp.responseText){
document.getElementById("userName").value=null;
document.getElementById("userName").placeholder="该用户已被占用,请重新输入";
}
}
};
xmlHttp.open("POST", url, true);// true:异步调用 false:同步调用
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");// 设置请求头信息
xmlHttp.send("userName="+value);
}
function submit_user(){
if(document.getElementById("userName").value.length>1){
if(document.getElementById("passWord").value.length > 5)
document.getElementById("user").submit();
else{
document.getElementById("passWord").value=null;
document.getElementById("passWord").placeholder="请重新输入密码";
alert("请输入6位数以上密码");
}
}else
alert("请先输入用户名");
}
</script>
</head>
<body>
<form id="user" method="get" action="<%=request.getContextPath()%>/servlet/LoginTest">
<table>
<tr>
<td>姓名<td/>
<td><input type="text" id="userName" name="userName" onblur="ajax()" placeholder="请输入姓名"><td/>
<tr/>
<tr>
<td>密码<td/>
<td><input type="password" id="passWord" name="passWord" placeholder="请输入密码"><td/>
<tr/>
<tr>
<td><td/>
<td><input type="button" onClick="submit_user()" value="注册"/><td/>
<tr/>
</table>
</form>
</body>
</html>
13、Ajax的使用的更多相关文章
- 13. Ajax技术
在传统的Web应用模式中,页面中用户的每一次操作都将触发一次返回Web服务器的HTTP请求,服务器进行相应的处理后,返回一个HTML页面的客户端.而在Ajax应用中,页面中的用户的操作将通过Ajax引 ...
- JavaScript 13 Ajax技术(未完)
<body> <!-- 添加文档主体内容 --> <header> <nav>JavaScript - Ajax - 读取XML文件</nav&g ...
- 使用ajax实现无刷新改变页面内容
如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...
- Django中的Ajax
Ajax 很多时候,我们在网页上请求操作时,不需要刷新页面.实现这种功能的技术就要Ajax!(本人定义,不可迷信) jQuery中的ajax就可以实现不刷新页面就能向后台请求或提交数据的功能,我们仍然 ...
- jQuery基础---Ajax基础教程
jQuery基础---Ajax基础 内容提纲: 1.Ajax 概述 2.load()方法 3.$.get()和$.post() 4.$.getScript()和$.getJSON() 5.$.ajax ...
- 使用Ajax发送http请求(get&post请求)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 同步和异步 同步和异步的概念 同步:必须等待前面的任务完成,才能继续后面 ...
- ajax中的async属性值之同步和异步及同步和异步区别
jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里 ...
- ajax获取json数据为undefined--原因解析
解决办法:var dataObj=eval("("+data+")");//转换为json对象 问题: 1. 碰到一个问题ajax成功获取json数据后,取值显 ...
- ajax操作提交整个表单内容
1 2 3 4 5 6 7 8 9 10 11 12 13 $.ajax({ cache: true, type: "POST ...
- ajax同步与异步的区别
jquery中ajax方法有个属性async用于控制同步和异步,默认是true,即ajax请求默认是异步请求,有时项目中会用到AJAX同步.这个同步的意思是当JS代码加载到当前AJAX的时候会把页面里 ...
随机推荐
- FPGA设计千兆以太网MAC(3)——数据缓存及位宽转换模块设计与验证
本文设计思想采用明德扬至简设计法.上一篇博文中定制了自定义MAC IP的结构,在用户侧需要位宽转换及数据缓存.本文以TX方向为例,设计并验证发送缓存模块.这里定义该模块可缓存4个最大长度数据包,用户根 ...
- Golang mysql 上线的一个坑 Db.close重要性
急冲冲完成的mysql的一个监控自动处理程序上线了,线下处理是正常的,没想到线上才半小时就奔溃了. 现在时间是晚上11点,心慌焦虑涌上心头,需要熬夜?肾上腺素激增. 程序主要是一个定时任务的处理程序, ...
- vue 利用mockJs 模拟数据
工作这几年一直用Java 开发,前端的技术自己也忘得差不多了(实际上自己也不怎么会),最近参与的项目是用VUE + Element-ui + springboot 写的,由于需求没有定,先画一个de ...
- python学习——读取染色体长度(六:读取含有染色体长度的文件)
含有染色体长的文件chr_len.txt chr1 10chr2 20chr3 30chr4 40chr5 50 python脚本 #传递命令行参数 import sys # 导入模块 # 从命令行获 ...
- 利用 keras_proprecessing.image 扩增自己的遥感数据(多波段)
1.keras 自带的 keras_proprecessing.image 只支持三种模式图片(color_mode in ['grey', 'RGB', 'RGBA'])的随机扩增. 2.遥感数据除 ...
- RB-Tree删除详解
红黑树的删除操作较于插入操作,情况更为复杂: 考虑到红黑节点的差异性,我们在此通过红黑节点来考虑这个问题,即仅仅通过要删除的节点是红节点,还是黑节点来讨论不同的情况: 1 删除的红节点为叶子结点(此 ...
- Ubuntu18.04LTS安装Nvidia显卡
笔者在为Ubuntu18.04LTS安装Nvidia显卡驱动之前,早就听说了一系列关于由于Nvidia驱动引起的疑难杂症.选择高质量的教程并保持足够的耐心,就能解 决这些问题.很重要的一点,不要怕把电 ...
- 有这iconfont.woff文件 为什么还报404
解决方法1.打开服务器IIS管理器,找到MIME类型. 2.添加MIME类型 添加三条: 文件扩展名 MIME类型 .svg image/svg+xml.woff application/x-font ...
- 关于【jq插件开发】
很详细,原文链接:https://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html#commentform和https://www.cnblogs ...
- miui 系统铃声
MIUI7-8系统铃声和通知铃声等,从miui system.img中提取出来的: 链接:http://pan.baidu.com/s/1bpH5N5P 密码:tz7p