1.获取ajax异步对象

    IE4~IE12 : 使用new ActiveXObject("microsoft.xmlhttp");
    非IE : 使用new XMLHttpRequest();
2.ajax.open(method,url);
    method是提交方式  有 get和post两种
    url是提交路径
3.ajax.send()
4.ajax.onreadystatechange 这是一个监听函数
    包括五中状态码:
        0—ajax异步对象创建完毕,但是还未发送
        1—ajax已经调用了open()方法,但是还未调用send()方法
        2—已经调用send(),但是还未到达服务器端
        3—表示请求已经到达服务端,正在服务端的处理,但是还未响应返回
        4—ajax已经完全接收了服务器的响应信息,但是状态码未必是正确的
                状态码有:
                                200:正确
                                404/500:错误
                                        ps:a.每个浏览器的0,1,2,3这四种状态显示的不一样,但是4这个状态码每
                                              个浏览器都有,所以我们只需要使用4即可
                                                b.  0.1.2.3.4是ajax中的响应码,200/404/500是web中的状态码
5.ajax.readyState == 4
6.ajax.status == 200;
7.获取值  ajax.requestText或者ajax.requestXML

例1get:
  1. <script type="text/javascript">
  2. //定位文本框,同时提供焦点失去事件
  3. document.getElementById("usernameID").onblur = function(){
  4. //获取文本框中输入的值
  5. var username = this.value;
  6. //如果用户没有填内容
  7. if(username.length == 0){
  8. //提示
  9. document.getElementById("resID").innerHTML = "用户名必填";
  10. }else{
  11. //对汉字进行UTF-8(U8)的编码
  12. username = encodeURI(username);
  13. //NO1)
  14. var ajax = createAJAX();
  15. //NO2)
  16. var method = "GET";
  17. var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username=" + username;
  18. ajax.open(method,url);
  19. //NO3)
  20. ajax.send(null);
  21. //--------------------------------------------------------等待
  22. //NO4)
  23. ajax.onreadystatechange = function(){
  24. if(ajax.readyState == 4){
  25. if(ajax.status == 200){
  26. //NO5)
  27. var tip = ajax.responseText;
  28. //NO6)
  29. document.getElementById("resID").innerHTML = tip;
  30. }
  31. }
  32. }
  33. }
  34. }
  35. </script>
例2:post
  1. <script type="text/javascript">
  2. document.getElementById("usernameID").onblur = function(){
  3. var username = this.value;//杰克
  4. //NO1)
  5. var ajax = createAJAX();
  6. //NO2)
  7. var method = "POST";
  8. var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();
  9. ajax.open(method,url);
  10. //设置AJAX请求头为POST,他会将请求体中的汉字自动进行UTF-8的编码
  11. ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
  12. //NO3)
  13. var content = "username=" + username;
  14. ajax.send(content);
  15. //===========================================等待
  16. //NO4)
  17. ajax.onreadystatechange = function(){
  18. if(ajax.readyState == 4){
  19. if(ajax.status == 200){
  20. //NO5)
  21. var tip = ajax.responseText;
  22. //NO6)
  23. //创建img标签
  24. var imgElement = document.createElement("img");
  25. //设置img标签的src/width/height的属性值
  26. imgElement.src = tip;
  27. imgElement.style.width = "12px";
  28. imgElement.style.height = "12px";
  29. //定位span标签
  30. var spanElement = document.getElementById("resID");
  31. //清空span标签中的内容
  32. spanElement.innerHTML = "";
  33. //将img标签加入到span标签中
  34. spanElement.appendChild(imgElement);
  35. }
  36. }
  37. }
  38. }
  39. </script>

Ajax实现步骤和原理的更多相关文章

  1. Ajax引擎:ajax请求步骤详细代码

    说起AJAX,可能是很多同学在很多地方都看到过,各大招聘网站上对于WEB前端和PHP程序员的技能要求清单中也是必不可少的一项.但是,ajax请求步骤详细代码以及说明却比较少见到 什么是AJAX引擎? ...

  2. Ajax实例OR技术原理 转自 (http://blog.csdn.net/evankaka )

    摘要:AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用于创建快速动态网页的 ...

  3. Ajax操作如何实现跨域请求 (JSONP和CORS实现Ajax跨域的原理)

    由于浏览器存在同源策略机制,同源策略阻止ajax (XMLHttpRequest) 从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 特别的:由于同源策略是浏览器的限制,所以请求的发送和响 ...

  4. MHA在线切换的步骤及原理

    在日常工作中,会碰到如下的场景,如mysql数据库升级,主服务器硬件升级等,这个时候就需要将写操作切换到另外一台服务器上,那么如何进行在线切换呢?同时,要求切换过程短,对业务的影响比较小. MHA就提 ...

  5. 实现ajax的步骤

    实现ajax的步骤 1.创建xmlHttprequest对象 function createXmlHttpRequest(){ var xmlHttp; try{ //Firefox, Opera 8 ...

  6. MySQL高可用方案MHA在线切换的步骤及原理

    在日常工作中,会碰到如下的场景,如mysql数据库升级,主服务器硬件升级等,这个时候就需要将写操作切换到另外一台服务器上,那么如何进行在线切换呢?同时,要求切换过程短,对业务的影响比较小. MHA就提 ...

  7. js原生Ajax 的封装和原理

    原理及概念 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是一种用于创建快速动态网页的技术. 动态网页:是指可以通过服务器语言结合数 ...

  8. ajax ----进度条的原理

    一.进度条的原理 新知识点:Html5中FormData,xmlHttpRequest中的upload属性,progress事件监控 xmlHttpRequest中的upload属性,实现: < ...

  9. jQuery的ajax跨域 Jsonp原理

    1.Jsonp Jsonp(json with padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题. Jsonp是为了解决ajax跨域发送http请求出现的,利用S ...

随机推荐

  1. iOS8远程通知处理

    // IOS8 新系统需要使用新的代码注册推送if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 8.0){    [[UI ...

  2. Wix安装包权限问题

    Wix在安装完成之后,如果遇到非管理员用户(域用户或Win7+系统,UAC权限问题等),修改配置文件(setting.ini)文件时,会遇到文件权限为只读,无法修改问题: 解决方案有两种: 首先添加U ...

  3. 使用Nlog记录日志到数据库

    Nlog是一个很不错的.NET日志记录组件,它可以将日志输出到控件台,保存到文本,也可以很方便的记录到数据库中. 可以在这里下载Nlog:http://nlog-project.org/ 这里分享一下 ...

  4. 写代码的自动提示是怎么出来的...我的WebStorm中不能自动提示Bootstrap中的样式呢

    首先开启自动提示 File -> Settings ->Editor ->Code Completion ->Preselect the first suggestion:,将 ...

  5. C# String.Format大全 去 decimal 后面的 0

    转 http://kwon.iteye.com/blog/1068255  http://blog.csdn.net/tvvbbb/article/details/47256943 public st ...

  6. [ASP.NET]ASP.NET数据绑定菜单控件

    public void BindMenu(Menu mn,MenuItem menu,string mainMenu,string sql) { MenuItem mitem = null; DB d ...

  7. springMVC3 ckeditor3.6 图片上传 JS回调

    一.引入js文件 <script type="text/javascript" src="<%=base %>/resources/ckeditor/c ...

  8. kylin一种OLAP的实现

    1.基于hive.hadoop的预先计算. 2.cube存储在HBASE里面.利用HBase的列存储,实现MOLAP 3.在cube上做数据分析,kylin实现标准的SQL,实现查询HBase 所以说 ...

  9. 移动开发 android 入门开发 阶段视频

    一直想把 android 的开发学习录制成视频,这里录制了一部分供大家学习. http://www.chuanke.com/s5402069.html 到这里,文档,源码,视频基本就全了,祝愿大家能够 ...

  10. OSChina中远程GIT仓库同步探索

    GIT平台在OSChina中的搭建帮了我们很大的忙,但如何将本地GIT仓库上传至OSChina的远程仓库,相信这是一个艰难的坎,今天我就在此总结我的成功经验,帮助大家,共同学习.由于条件有限,我全部的 ...