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的时候会把页面里 ...
随机推荐
- LinuxMint(Ubuntu)安装文泉驿家族黑体字
文泉驿黑体字家族在Ubuntu上很有用,可以解决系统字体发虚的问题. 通过下面的三条命令安装: sudo apt-get install ttf-wqy-microhei #文泉驿-微米黑 sudo ...
- ansible_playbook 一键搭建集群架构
目录 基础优化 SSH.Ansible,批量管理服务项目 剧本开始-----.10分钟左右 mail.yaml base.yaml rsync.yaml nfs.yaml web.yaml tweb. ...
- properJavaRDP 跑通本地远程桌面
参考:https://www.cnblogs.com/jfqiu/p/3192364.html 包下载:https://mega.nz/#!HnIX0ajA!lcovIdmYWWJJVRngMsQFK ...
- 【alpha阶段】第八次Scrum Meeting
每日任务内容 队员 昨日完成任务 明日要完成的任务 牛宇航 #26 评价总览接口编写https://github.com/rRetr0Git/rateMyCourse/issues/26 (任务较重, ...
- java+testng接口测试入门
testNG是一个测试框架,它能组织测试用例按照你想要的方式进行运行,并输出一定格式的便于阅读的测试报告(结果),通过java+testng的方式说明一下接口测试的基本使用方法. 一.环境搭建 a)千 ...
- 分析dhcp.lease文件,统计DHCP服务器IP自动分配
#!/usr/bin/env python # coding=utf-8 import string import time,datetime class TIMEFORMAT: def __init ...
- jdbc连接字符串
MySQL:String Driver="com.mysql.jdbc.Driver"; //驱动程序String URL="jdbc:mysql://localhost ...
- linux 下ab压力测试
1.ab的简介 ab是apachebench命令的缩写. ab是apache自带的压力测试工具.ab非常实用,它不仅可以对apache服务器进行网站访问压力测试,也可以对或其它类型的服务器进行压力测试 ...
- NodeJs操作MongoDB之分页功能与常见问题
NodeJs操作MongoDB之分页功能与常见问题 一,方法介绍 1,聚合操作之count count()方法可以查询统计符合条件的集合的总数 db.User.count(<query>) ...
- js作用域零碎的知识点,不同的script块,虽然同是全局变量
如下代码,第一次弹出a,因为解析器里找到var a,赋予a变量undefined,弹出undefined <!DOCTYPE html> <html> <head> ...