AJAX入门学习

AJAX概述

什么是AJAX？

AJAX(Asynchronous JavaScript And XML)翻译成中文就是“异步Javascript和XML”,即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)

AJAX还有一个最大的特点就是:当服务器响应时,不用刷新整个浏览器页面,而是可以局部刷新,这一特点给用户的感受是在不知不觉中完成请求和响应过程

同步交互与异步交互:

同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求

异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求

AJAX常见应用情景:

当我们在百度中输入一个“传”字后,会马上出现一个下拉列表!列表中显示的是含“传”字的10个关键字,其实这里就使用了AJAX技术!当文件框发生了输入变化时,浏览器会使用AJAX技术向服务器发送一个请求,查询包含“传”字的前10个关键字,然后服务器会把查询到的结果响应给浏览器,最后浏览器把这10个关键字显示在下拉列表中

整个过程中页面没有刷新,只是刷新页面中的局部位置而已!当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!

AJAX的优缺点:

优点:

• AJAX使用Javascript技术向服务器发送异步请求
• AJAX无须刷新整个页面
• 因为服务器响应内容不再是整个页面,而是页面中的局部,所以AJAX性能高

缺点:

• AJAX并不适合所有场景,很多时候还是要使用同步交互
• AJAX虽然提高了用户体验,但无形中向服务器发送的请求次数增多了,导致服务器压力增大
• 因为AJAX是在浏览器中使用Javascript技术完成的,所以还需要处理浏览器兼容性问题

简单使用

一个简单的实例如图:

当用户输入用户名,文本框失去焦点后,通过异步调用来判断该用户名是否已存在,若存在,则上图中红框处显示提示,当用户名可用时,提交按钮变为可用状态

设计Html页面:

<form name="myForm">      用户名:<input type="text" name=" myName" onblur="checkName()" />      <span id="myDiv"> </span><br />       密码:<input type="text" name="myPwd"/><br />      <input type="button" value=" 提交" name="submitButton" disabled />  </form>  

在“用户名”文本框后添加了一个span标签,该标签划分一个区域,用于显示用户名的验证信息, 还要添加一个事件,当失去焦点时触发”checkName()”

JavaScript代码部分:

<script>            var xmlHttp=null;  //定义用户存储XMLHttpRequest对象的变量             //创建XMLHttpRequest对象:            function createXmlHTTP(){                  if(window.ActiveXObject){  //判断浏览器是否支持ActiveX控件,针对IE6及之前版本                     var arrXmlHttpTypes=                        ['Microsoft.XMLHTTP','MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',                     'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];  //将所有可能出现的ActiveXObject版本都放在一个数组中                    for(var i=0;i<arrXmlHttpTypes.length;i++){  //通过循环创建XMLHttpRequest对象                          try{                            xmlHttp = new ActiveXObject(arrXmlHttpTypes[i]);  //创建XMLHttpRequest对象                            break;  //如果创建XMLHttpRequest对象成功,则跳出循环                         }catch(Exception ex){  }                     }                }else if(window.XMLHttpRequest){                    xmlHttp = new XMLHttpRequest();  //IE7,Firefox,Chrome,Opera,Safari...                  }            }            //响应XMLHttpRequest对象状态变化的函数:            function httpStateChange(){                if(xmlHttp.readyState==4){  //异步调用完毕                      if (xmlHttp.status==200||xmlHttp.status==0){  //异步调用成功,在本机上调试                          //status(响应状态码):200(正常) 404(请求文件没找到).....                        var userNames = xmlHttp.responseText;  //获得服务器返回的数据                        var arrUserName = userNames.split(";");  //把获取到的一个字符串分割成字符串数组                        var bFlag = false;  //定义一个变量,用于判断用户名是否已经存在                        for(var i=0;i<arrUserName.length;i++){                            if(arrUserName[i]==myFrom.myName.value){                                bFlag=true;                                break;  //用户名存在                             }                        }                        var node=document.getElementById("myDiv");  //查找用于显示提示信息的节点                          if(bFlag){                            node.firstChild.nodeValue="用户名已经存在";                            myForm.submitButton.disabled=true;                        }else{                            node.firstChild.nodeValue = "用户名不存在，可以使用";                            myForm.submitButton.disabled = false;  //提交按钮可用                          }                    }                }            }            //校验用户名是否有效:            function checkName(){                creatXMLHTTP(); //创建XMLHttpRequest对象,调用前面定义好的函数                if (xmlHttp!=null){                    xmlHttp.onreadystatechange = httpStateChange; //创建响应XMLHttpRequest对象状态变化的函数                    xmlHttp.open("get","userName.txt",true);//创建http请求,注意:需要建一个userName.txt存储已存在的用户名,各个用户名之间用分号隔开                    xmlHttp.send(null);                }else{                    alert("您的浏览器不支持XMLHTTP");                 }            }</script>