ajax可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
 
接下来，将以例子的形式进行讲解
 
例一：创建用户
        在不刷新的情况下，当创建的用户已经有了，就会在后面显示：该用户名已经存在；
                                当创建的用户不存在，就会在后面显示：该用户名可以使用；
<body>

<div>

   创建用户名：<input type="text" id="uid"/>

                    <span id="xinxi"></span>

</div>

</body>

　　

调用ajax代码如下

<script type="text/javascript">

$(document).ready(function(e) {

	$("#uid").blur(function(){  //blur失去焦点触发

		//把文本框里的内容取出来

		var uid=$(this).val()

		//调用ajax

		$.ajax({

			url:"chuli.php",  //处理页面

			data:{u:uid},     //传递数据，JSON数据形式，key：value 多个数据用逗号隔开

			type:"POST",      //提交方式

			datatype:"TEXT",  //返回的数据类型；TEXT：文本、字符串,JSON,XML

			success:function(data){   //回调函数  包括形参，和上面的date没关系

				    if(data=="OK")

					{

						var str="该用户名可以使用";

						$("#xinxi").html(str);

					}

					else

					{

						var str="<span style='color:red'>该用户名已经存在</span>";

						$("#xinxi").html(str);

					}

				},

			 //当调用失败，调用该方法，（不常用）

			 error: function(){}

			});

		})

　　当代码运行到红色字体的代码时，会运行chuli.php代码，如下

<?php

//接受传递过来的参数

$uid=$_POST["u"];

//查数据库

include("DBDA.class.php");

$db=new DBDA();

$sql="select count(*) from user where uid='{$uid}'";

$attr=$db->Query($sql);

if($attr[0][0]==1)  //当结果等于1，说明数据库已经存在该用户名。

{

	echo "NO";

}

else

{

    echo "OK";

}

　　

例二：用户登录

<body>

<h1>登陆</h1>

<div>

  用户名：<input type="text" id="uid"/>

</div>

<br />

<div>

  密  码：<input type="text" id="pwd"/>

</div>

<div>

             <input type="button" id="btn" value="登陆"/>

</div>

</body>

　　

ajax代码

<script type="text/javascript">

$(document).ready(function(e) {

	$("#btn").click(function(){

		var uid=$("#uid").val();

		var pwd=$("#pwd").val();

		$.ajax({

			url:"dengluchuli.php",

			data:{u:uid,p:pwd},

			type:"POST",

			dataType:"TEXT",

			success: function(data)

			{

				if(data=="OK")

				{

					window.location="ajax.php";

				}

				else

				{

					alert("用户名或密码错误");

				}

			},

			});

		})

});

</script>

　　调用处理代码：dengluchuli.php

<?php

$uid=$_POST["u"];

$pwd=$_POST["p"];

include("DBDA.class.php");

$db=new DBDA();

$sql="select count(*) from user where uid='{$uid}' and pwd='{$pwd}'";

$attr=$db->Query($sql);

if($attr[0][0]==1)

{

	echo "OK";

}

else

{

	echo "NO";

}

　　

重点讲解：ajax的异步、同步讲解

在js中调用ajax时，有条async代码

async:false,     //false同步，true异步   不写的情况默认为true异步
     数据传输中
     同步：传输必须等到接受方接收到，才能传输下一个
     异步：传输不用等到对方接受就可以继续传输

AJAX同步false：AJAX必须等到处理完才能继续向下传输
   AJAX异步true(默认)：AJAX在处理数据的同时，代码继续往下执行

以下面的例题讲解

测试AJAX异步情况

<div id="text" style="width:100px; height:100px; background-color:#0FF"></div>

　　

$("#text").click(function(){

			//语句1

			$("#text").html("");

			//语句2

			$.ajax({

				//此处没有async，所以默认情况为async:true，异步

				url:"ajaxcl.php",

				//data:{},     //因为没有要传输的数据，所以不用写

				//type:"POST",

				datatype:"TEXT",

				success: function(data)

				{

				    //语句4

					$("#text").html(data);

				}

				});

			//语句3

			alert($("#sj").html());

　　要传入的处理页面是ajaxcl.php

<?php

echo "<div id='sj'>hello world!!</div>";

　　单击蓝色区域，会出现“语句3”的执行结果“undefined”，紧接着会在蓝色框内出现“语句4”的执行结果：hello world！！

因为语句2花费的时间要比语句3花费的时间长，所以要先显示语句3的执行结果：undefined；在然后显示语句4的执行结果，至此结束。

     为了解决这个问题，需要在ajax中加入async:false,同步；等到处理完语句4，在向后传输处理语句3，结果如下

ajax讲解：“创建用户”和“用户登录”练习的更多相关文章

  1. Mysql创建新用户后无法登录，提示 Access denied for user 'username'@'localhost' (using password: YES)

    MySQL创建新用户后无法登录,提示 Access denied for user 'username'@'localhost' (using password: YES) ,多半是因为存在匿名用户, ...

  2. 安装mysql5.7与创建用户和远程登录授权

    环境:ubuntu18.04 参考文章:安装并远程登录授权:https://www.cnblogs.com/chancy/p/9444187.html 用户管理:https://www.cnblogs ...

  3. Oracle12C用户创建、授权、登录

    Oracle12C用户创建.授权.登录 1.以系统用户登录 C:\Users\LEI>sqlplus sys/dwh as sysdba; SQL*Plus: Release 12.1.0.2. ...

  4. Linux下查看/管理当前登录用户及用户操作历史记录

    转载自: http://www.cnblogs.com/gaojun/archive/2013/10/24/3385885.html 一.查看及管理当前登录用户 1.使用w命令查看登录用户正在使用的进 ...

  5. MySQL, 创建一个只读用户和一个所有权限用户

    安装pasa需要配置mysql.基本知识学习一下 http://www.cnblogs.com/mr-wid/archive/2013/05/09/3068229.html MySQL 为关系型数据库 ...

  6. mysql新建用户本地无法登录

    mysql新建用户本地无法登录 MySQLDebianGoogleAccess  出此是用mysql,因为root权限过高,所以新建一用户appadmin,权限仅为要用到的数据库.创建语句如下:gra ...

  7. Mysql创建和删除用户

    问题描述:        Mysql中创建用户和删除用户 问题解决:     (1)查询Mysql当前登录账户     (2)创建用户     方法一: 创建用户赋予用户所有权限: 新创建的用户可以在 ...

  8. oracle创建表空间-用户-角色-授权

    1.创建数据表空间: SQL> create tablespace rusky_data datafile 'D:\rusky\rusky_data01,dbf' size 10M autoex ...

  9. 给postgresql 创建新的用户

    \du 查看当前postgresql的用户,一般此时只能看到 postgres create user ysr superuser password '123456'; \du 就可以看到两个用户了. ...

  10. SQLServer创建用户自定义数据库用户

    创建用户自定义数据库用户注意事项 如果已忽略 FOR LOGIN,则新的数据库用户将被映射到同名的SQL Server登录名. 默认架构将是服务器为此数据库用户解析对象名时将搜索的第一个架构. 除非另 ...

随机推荐

  1. Wordpress页面判断

    is_single() 判断是否是文章页面 is_single('2')/is_single(2)判断是否是具体文章(id=2)的页面 is_single('')判断是否是具体文章(标题为Beef S ...

  2. sqlserver 在脚本中，为所有字符前没有N标记的字符增加N

    {[^N]}{'[\u4e00-\u9fa5]|[\u4e00-\U9fa5]|[0-9]|[A-Z]} \1N\2

  3. Android 通过Base64上传图片到服务器

    之前做上传图片是采用HttpServlet上传,不过用了一下Base64上传图片后,感觉比HttpServlet方便很多,大家也可以跟着尝试一下. 前台图片处理:(传Bitmap对象即可) /** * ...

  4. sql语句操作集锦

    SQL操作全集 下列语句部分是Mssql语句,不可以在access中使用. SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT ...

  5. python center, ljust, rjust

    例子 >>> s = "jihite" >>> s.center(, "*") '**jihite**' >>& ...

  6. Google File System翻译（转）

    摘要 我们设计实现了google文件系统,一个面向大规模分布式数据密集性应用的可扩展分布式文件系统.它运行在廉价的商品化硬件上提供容错功能,为大量的客户端提供高的整体性能. 尽管与现有的分布式文件系统 ...

  7. error MIDL2311 : statements outside library block are illegal in mktyplib compatability mode

    解决办法: 1. Do not use the /mktyplib203 switch unless you have to deal with legacy code dating back to ...

  8. [chrome插件] 利滚利计算器 银行存款 基金理财 余额宝收益计算

    利滚利计算在数学上是否有一个简单的公式,我不知道,但作为程序员,这个算法实现起来就是小菜一碟.作为插件发布,是因为程序确实简单,也方便Chome浏览器使用者安装.如果你也想使用一下Chrome插件,参 ...

  9. java学习材料

    java资料大全 http://zz563143188.iteye.com/ it男视野扩展资料 HTTP://WLSAM168.400GB.COM 最全 spring mvc http://jinn ...

  10. Swift实战-豆瓣电台（三）获取网络数据

    观看地址:http://v.youku.com/v_show/id_XNzMwMzQxMzky.html 这节内容,我们先说了怎么将storyboard中的组件在类中进行绑定.然后写了一个类用来获取网 ...