ajax能做到无刷新数据交互,给用户体验带来好处的同时也减小了服务器的压力,所以运用ajax能使网站性能更强劲、更吸引用户。

大型网站少不了注册页面,而大多数情况下我们不想让用户有相同的注册ID,所以在用户注册成功之前必须进行用户名的检测。ajax还未出现之前,验证方法基本上是待用户填完所有选项之后提交到后台,如果已经有相同ID,则返回提示信息给用户,这样的话表单submit之后页面后刷新,而用户填的其他信息页就白费了,还得重新填一遍。

ajax完美的解决了这个问题,用户填完用户名马上检测是否已被注册。下面截取几个网站的用户名检测:

淘宝网:

百度:

微博:

这样是不是很酷?

首先,ajax并不是什么神秘的东西,我认为它就是一个特殊的JavaScript对象,有着自己的方法和接口。原理框图如下:

第一步:ajax引擎对象的创建(相对简单的创建方法,更严格的方式请参考W3C):

//创建Ajax引擎对象
function getXmlHttpRequest(){
var xmlHttpRequest= "";
if(window.XMLHttpRequest){ // 火狐
xmlHttpRequest = new XMLHttpRequest();
}
else{ // IE
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttpRequest;
}

函数getXmlHttpRequest()返回一个ajax对象,所以使用的时候可以直接赋值:

var myAjaxObject=null;
myAjaxObject = getXmlHttpRequest();

第二步:创建请求机制:(建立与服务器端的通信接口)

ajax请求方式有两种:get和post,下面分别介绍如何建立连接以及它们之间的区别。

◆ get 方式请求格式:

/**** 方式一:get 方式请求 ******/
var url = "process.php?userName="+$("userName").value;
myAjaxObject.open("get",url,true);
//回调处理函数指定为 calback();
myAjaxObject.onreadystatechange=callBack;
myAjaxObject.send(null);

其中open方法的三个参数解释:

1、请求方式:get / post :
2、向服务器请求的 url(后台处理的地址) :
3、 true:异步机制;false:同步机制(ajax的最大好处就是异步,所以基本选择true)

onreadystatechange=callback 意思就是服务器返回的状态改变的时候所选择的处理方式,callback为一个函数(不可写成callback()),也可写成:

onreadystatechange=function(){ /*code here...*/ }

◆post 方式请求格式:

/******** 方式二:post 方式请求 ********/
var url = "process.php";
//【不同之处1】发送的数据另写
var data = "userName="+$("userName").value;
myAjaxObject.open("post",url,true);
// 【不同之处2】post方式一定要加上这句话
myAjaxObject.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
//回调处理函数指定为 callback();
myAjaxObject.onreadystatechange=callBack;
myAjaxObject.send(data); //【不同之处3】 send()函数带参数

最后说明get和post在形式上和性能上的差异:

▪ post传输数据时,不需要在URL中显示出来,而get方法要在URL中显示。
▪ post传输的数据量大,可以达到2M,而get方法由于受到URL长度的限制,只能传递大约1024字节.
▪ post是为了将数据传送到服务器段,get是为了从服务器段取得数据。当然get之所以也能传送数据,只是用来设计告诉服务器,你到底需要什么样的数据,post的信息作为http请求的内容,而get是在Http头部传输的。

第三步:如何处理返回的数据?

首先得判断数据的通信传输状态:

当 readyState 等于 4 且状态为 200 时,表示响应已就绪,可以在前端进行数据处理了。

其次,返回的数据格式主要有文本(.responseText)、JSON(.responseText)和XML(.responseXML),它们各自的处理方式都不相同。

● 文本格式的处理方式:

此时对应于服务器端的process.php文件大致为:

header("Content-type: text/html; charset=utf-8");
header("Cache-Control: no-cache");
$username=$_POST['userName'];
if($username=="tangbc" || $username=="admin"){
/*只做简单的判断例子,实际项目中应该查找数据库*/
echo "<b>抱歉!不可用</b>";
}else{
echo "<b>恭喜!可以使用!</b>";
}

此时前端的处理函数callback为:

function callBack(){
if(myAjaxObject.readyState==4 && myAjaxObject.status==200){
/* 1,返回格式是 文本格式 (responseText) 的处理方式:*/
$("isExist").innerHTML=myAjaxObject.responseText;
}
}

● JSON格式的处理方式:

此时对应于服务器端的process.php文件大致为:

header("Content-Type: text/html; charset=utf-8");
header("Cache-Control: no-cache");
$username=$_POST['userName'];
if($username=="tangbc" || $username=="admin"){
//输出的是 类JSON格式 的字符串
echo '{"msg":"抱歉!不可用!!"}';
}else{
echo '{"msg":"恭喜!可以用"}';
}

此时前端的处理函数callback为:

function callBack(){
if(myAjaxObject.readyState==4&&myAjaxObject.status==200){
// str为服务器返回来的字符串 {"msg":"抱歉!不可用!!"}
var str = myAjaxObject.responseText;
// 将字符串str转换为JSON格式(对象数组)
var obj = eval("("+str+")");
// obj.msg 即为要在浏览器显示的数据 “抱歉!不可用!!”
$("isExist").innerHTML=obj.msg;
}
}

● XML格式的处理方式:

此时对应于服务器端的process.php文件大致为:

header("Content-type: text/xml; charset=utf-8");
header("Cache-Control: no-cache");
$username=$_POST['userName'];
if($username=="tangbc" || $username=="admin"){
echo "<res><mes>抱歉!不可用</mes></res>";
}else{
echo "<res><mes>恭喜!可以用</mes></res>";
}

此时前端的处理函数callback为:

function callBack(){
if(myAjaxObject.readyState==4&&myAjaxObject.status==200){
/* 2,返回格式是 XML(responseXML) 的处理方式:*/
//获取服务器端生成的XML的标签名
var tag=myAjaxObject.responseXML.getElementsByTagName('mes');
//获取该标签名下的文本内容(需要的信息)
var val = tag[0].childNodes[0].nodeValue;
$("isExist").innerHTML=val;
}
}

至此,ajax的小小案例已经算是做完了,您可以在线测试一下:ajax用户名检测DEMO(不可用的用户名为:tangbc、admin)

ajax基本用法的更多相关文章

  1. Ajax.ActionLink 用法

    Ajax.ActionLink 用法 Ajax 属性的ActionLink方法可以创建一个具有异步行为的锚标签. ActionLink方法的第一个参数指定了链接文本,第二个参数是要异步调用的操作的名称 ...

  2. MVC学习十二:Ajax.ActionLink用法

    Ajax.ActionLink用法 <!--使用Ajax.BeginForm必须引用的js文件--> <script type="text/javascript" ...

  3. 关于Jquery Ajax的用法

    今天简单描述一下Jquery Ajax的用法,和我在使用过程中的一些看法,仅供自己娱乐和大家参考值之用! Jquery Ajax的重要性不言而喻,只从Jquery面世之后,终于解救了像我这种既做前台又 ...

  4. js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据)

    js进阶ajax基本用法(创建对象,连接服务器,发送请求,获取服务器传过来的数据) 一.总结 1.ajax的浏览器的window对象的XMLHtmlRequest对象的两个重要方法:open(),se ...

  5. ajax和springmvc的请求响应原理——深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    1,四大重要部分: 请求链接 post请求和get请求 请求参数形式 响应内容形式 2,从springmvc的controller角度,controller能接收到请求的前提 请求链接必须对应 pos ...

  6. 深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    当我们用javascript写ajax程序写得很“开心”的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和HttpRequest是多么的快乐,同时你再也不需要再烦恼纠结的ajax乱码问 ...

  7. 详细解读Jquery的$.get(),$.post(),$.ajax(),$.getJSON()用法

    一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callback为请求成功后的回调函数,该函数接受两个参数,第一个为服务器返回的数据,第 ...

  8. jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 一.jQuery中调用ajax的4种方法:$.get.$.post.$ge ...

  9. 理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    ajax的4种方法:$.get.$.post.$getJSON.$ajax. 1.$.get $.get()方法使用GET方式来进行异步请求,它的语法结构为: $.get( url [, data] ...

  10. ajax实战用法详解

    谦虚使人进步,总结使人提高! 以下5个方法执行一般Ajax请求的简短形式,在处理复杂的Ajax请求时应该使用jQuery.ajax() 1.load(url,[data],[callback])载入远 ...

随机推荐

  1. session和cookie区别

    <?php session_start(); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E ...

  2. c语言学习上的思考与心得

    由于这段时间在c语言的学习中,表现的很努力并且完成作业态度认真,所以得到了老师奖励的小黄衫. 以下是我对于c语言的学习感受与心得. 学习感受与心得 我选择计算机的这个专业,是因为我对计算机的学习很有兴 ...

  3. C# IO操作,写入文本到txt文件.

    /// <summary> /// 写入日志文件 /// </summary> /// <param name="input"></par ...

  4. 后台获取前台runat=server的select的值

    <li> <asp:Label ID="Lpro" runat="server" Text="省份:" CssClass= ...

  5. 桌面应用程序ClickOne打包部署

    http://www.cnblogs.com/weixing/p/3358740.html

  6. MVC项目实践,在三层架构下实现SportsStore-10,连接字符串的加密和解密

    SportsStore是<精通ASP.NET MVC3框架(第三版)>中演示的MVC项目,在该项目中涵盖了MVC的众多方面,包括:使用DI容器.URL优化.导航.分页.购物车.订单.产品管 ...

  7. LED_9261在linux2.6.30中tick_led的实现

    在linux2.6.30内核中,内核也提供了相关的平台驱动来操作gpio或LED,但更简便的方法是直接操作GPIO来控制led. 网上一博文中介绍直接封装led_on和led_off()函数直接调用即 ...

  8. 第三篇 SQL Server代理警报和操作员

    本篇文章是SQL Server代理系列的第三篇,详细内容请参考原文. 正如这一系列的上一篇所述,SQL Server代理作业是由一系列的作业步骤组成,每个步骤由一个独立的类型去执行,除了步骤中执行的工 ...

  9. linux 挂载命令详解

    挂载文件系统与卸载文件系统 mount / umount NO1. 挂载光驱 [root@rehat root]# mount -t iso9660 /dev/cdrom /mnt/cdrom NO2 ...

  10. block数据类型

    // //  main.m //  04-block数据类型 // //  Created by apple on 14-3-18. //  Copyright (c) 2014年 apple. Al ...