Ajax实现步骤和原理
1.获取ajax异步对象
<script type="text/javascript">
//定位文本框,同时提供焦点失去事件
document.getElementById("usernameID").onblur = function(){
//获取文本框中输入的值
var username = this.value;
//如果用户没有填内容
if(username.length == 0){
//提示
document.getElementById("resID").innerHTML = "用户名必填";
}else{
//对汉字进行UTF-8(U8)的编码
username = encodeURI(username);
//NO1)
var ajax = createAJAX();
//NO2)
var method = "GET";
var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username=" + username;
ajax.open(method,url);
//NO3)
ajax.send(null);
//--------------------------------------------------------等待
//NO4)
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
//NO5)
var tip = ajax.responseText;
//NO6)
document.getElementById("resID").innerHTML = tip;
}
}
}
}
}
</script>
<script type="text/javascript">
document.getElementById("usernameID").onblur = function(){
var username = this.value;//杰克
//NO1)
var ajax = createAJAX();
//NO2)
var method = "POST";
var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();
ajax.open(method,url);
//设置AJAX请求头为POST,他会将请求体中的汉字自动进行UTF-8的编码
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
//NO3)
var content = "username=" + username;
ajax.send(content);
//===========================================等待
//NO4)
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
//NO5)
var tip = ajax.responseText;
//NO6)
//创建img标签
var imgElement = document.createElement("img");
//设置img标签的src/width/height的属性值
imgElement.src = tip;
imgElement.style.width = "12px";
imgElement.style.height = "12px";
//定位span标签
var spanElement = document.getElementById("resID");
//清空span标签中的内容
spanElement.innerHTML = "";
//将img标签加入到span标签中
spanElement.appendChild(imgElement);
}
}
}
}
</script>
Ajax实现步骤和原理的更多相关文章
- Ajax引擎:ajax请求步骤详细代码
说起AJAX,可能是很多同学在很多地方都看到过,各大招聘网站上对于WEB前端和PHP程序员的技能要求清单中也是必不可少的一项.但是,ajax请求步骤详细代码以及说明却比较少见到 什么是AJAX引擎? ...
- Ajax实例OR技术原理 转自 (http://blog.csdn.net/evankaka )
摘要:AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用于创建快速动态网页的 ...
- Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)
由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...
- MHA在线切换的步骤及原理
在日常工作中,会碰到如下的场景,如mysql数据库升级,主服务器硬件升级等,这个时候就需要将写操作切换到另外一台服务器上,那么如何进行在线切换呢?同时,要求切换过程短,对业务的影响比较小. MHA就提 ...
- 实现ajax的步骤
实现ajax的步骤 1.创建xmlHttprequest对象 function createXmlHttpRequest(){ var xmlHttp; try{ //Firefox, Opera 8 ...
- MySQL高可用方案MHA在线切换的步骤及原理
在日常工作中,会碰到如下的场景,如mysql数据库升级,主服务器硬件升级等,这个时候就需要将写操作切换到另外一台服务器上,那么如何进行在线切换呢?同时,要求切换过程短,对业务的影响比较小. MHA就提 ...
- js原生Ajax 的封装和原理
原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...
- ajax ----进度条的原理
一.进度条的原理 新知识点:Html5中FormData,xmlHttpRequest中的upload属性,progress事件监控 xmlHttpRequest中的upload属性,实现: < ...
- jQuery的ajax跨域 Jsonp原理
1.Jsonp Jsonp(json with padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. Jsonp是为了解决ajax跨域发送http请求出现的,利用S ...
随机推荐
- iOS8远程通知处理
// IOS8 新系统需要使用新的代码注册推送if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 8.0){ [[UI ...
- Wix安装包权限问题
Wix在安装完成之后,如果遇到非管理员用户(域用户或Win7+系统,UAC权限问题等),修改配置文件(setting.ini)文件时,会遇到文件权限为只读,无法修改问题: 解决方案有两种: 首先添加U ...
- 使用Nlog记录日志到数据库
Nlog是一个很不错的.NET日志记录组件,它可以将日志输出到控件台,保存到文本,也可以很方便的记录到数据库中. 可以在这里下载Nlog:http://nlog-project.org/ 这里分享一下 ...
- 写代码的自动提示是怎么出来的...我的WebStorm中不能自动提示Bootstrap中的样式呢
首先开启自动提示 File -> Settings ->Editor ->Code Completion ->Preselect the first suggestion:,将 ...
- C# String.Format大全 去 decimal 后面的 0
转 http://kwon.iteye.com/blog/1068255 http://blog.csdn.net/tvvbbb/article/details/47256943 public st ...
- [ASP.NET]ASP.NET数据绑定菜单控件
public void BindMenu(Menu mn,MenuItem menu,string mainMenu,string sql) { MenuItem mitem = null; DB d ...
- springMVC3 ckeditor3.6 图片上传 JS回调
一.引入js文件 <script type="text/javascript" src="<%=base %>/resources/ckeditor/c ...
- kylin一种OLAP的实现
1.基于hive.hadoop的预先计算. 2.cube存储在HBASE里面.利用HBase的列存储,实现MOLAP 3.在cube上做数据分析,kylin实现标准的SQL,实现查询HBase 所以说 ...
- 移动开发 android 入门开发 阶段视频
一直想把 android 的开发学习录制成视频,这里录制了一部分供大家学习. http://www.chuanke.com/s5402069.html 到这里,文档,源码,视频基本就全了,祝愿大家能够 ...
- OSChina中远程GIT仓库同步探索
GIT平台在OSChina中的搭建帮了我们很大的忙,但如何将本地GIT仓库上传至OSChina的远程仓库,相信这是一个艰难的坎,今天我就在此总结我的成功经验,帮助大家,共同学习.由于条件有限,我全部的 ...