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>