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. angularJS推荐显示注入写法

    使用js压缩工具时发现压缩之后的控制器注入参数由原来的$scope变成了a,b...这样的字母而导致js失效,那么我们推荐使用完整的显示注入方式来解决此问题! //隐式注入的写法 angular.mo ...

  2. ActiveMQ发布订阅模式

    ActiveMQ的另一种模式就SUB/HUB即发布订阅模式,是SUB/hub就是一拖N的USB分线器的意思.意思就是一个来源分到N个出口.还是上节的例子,当一个订单产生后,后台N个系统需要联动,但有一 ...

  3. Selenium2学习-029-WebUI自动化实战实例-027-判断元素是否存在

    非常简单的源码,敬请各位小主参阅.若有不足之处,敬请大神指正,不胜感激! /** * Verify the element exist or not * * @author Aaron.ffp * @ ...

  4. 记录：在老XPS1330上安装CentOS7

    下图是设置时的图片,注意分区设置. 下图是安装成功的画面. 下图是在Gnome桌面环境打开Firefox上本博客的画面. 注意点: 1.安装时没啥特殊的,就两点,一是要分区设置好,图省事就让自动分区: ...

  5. SSH验证原理

    http://www.tuicool.com/articles/qyiyim 下面会讲解ssh的密码登陆和免密码登陆.无论是密码登陆还是免密码登陆,安全使用的都是RSA非对称加密. SSH之所以能够保 ...

  6. asp.net中session的原理及应用

    Session简介丶特性 1.Session是一种Web会话中的常用状态之一. 2.Session提供了一种把信息保存在服务器内存中的方式.他能储存任何数据类型,包含自定义对象. 3.每个客户端的Se ...

  7. attr属性

    1.切换图片 $(".tip").hover(        function () {            $(this).attr("src"," ...

  8. Linux就这个范儿 第9章 特种文件系统

    Linux就这个范儿 第9章 特种文件系统 http://book.douban.com/reading/32081222/ P326 有一种文件系统,根本不在磁盘上.这种文件系统就是大名顶顶的ram ...

  9. python_列表

    1.  列表的定义 (1) 用[]包含的元素,就是列表 (2)可以用list函数定义列表 2.  基本的列表操作(可参考示例) (1)元素赋值 (2)删除元素 (3)分片赋值 3. 列表方法 (1) ...

  10. storm安装

    官方安装地址:http://storm.apache.org/releases/1.0.2/Setting-up-a-Storm-cluster.html storm集群的三个角色 Nimbus.Su ...