Ajax是结合了访问数据库，数据访问，Jquery 可以做页面局部刷新或者说是页面不刷新，我可以让页面不刷新，仅仅是数据的刷新，没有频繁的刷页面，是现在比较常用的一种方式做页面
那么它是怎么实现页面无刷新的呢？接下来我们一起看下原理

先看下之前我们刷新页面的方式原理

再看下Ajax的原理

Ajax最大的特点就是这个页面整体上全部使用的是JS 脚本语言或者是Jquery都行，这俩都是前端的语言，运行的时候不需要到服务器端运行，只要在浏览器下就可以执行，所以Ajax就利用了这一点，使用Jquery，JS来操作前端页面的数据。

比如说：做一个查询，我需要先取出用户给的数据，我JS取出来，然后发送到一个地方去，让另外一个地方去处理，处理完后返回给我。然后JS拿这个数据把内容替换掉，所以所有的工作都是拿JS完成的

这种模式执行的时候就不会有页面的刷新，因为这个页面没有重新请求，这个页面里仅仅变的是数据

接下来我们看一下Ajax怎么来实现

举例：判断用户名是否在数据库里面存在

一般ajax是用Jquery来写，首先我们先给Uid这个文本框加一个事件blur（失去焦点触发），接着取用户名，从数据库查，看是否能查到。取到用户名后下一步我们就要查数据库，JS不能直接查，所以调ajax！！$.ajax()这是一个方法！！

调这个方法的时候需要传一个参数，这个参数需要是JSON数据格式

JSON里面用逗号分割，不是分号

第一个参数就是url代表的是把数据传到哪个页面处理，页面的地址是什么

第二个参数就是data代表的是我调用testchuli.php的时候我要传递什么数据给它，要求也是一个JSON格式，花括号里你传几条数据就写几个值，现在我们要传一个

{名字 u : 传哪个值 uid}冒号前面的就是个名字，冒号后边的会解析变量

第三个参数就是type代表的是传值的方式

第四个参数就是dataType 注意 T 要大写代表是返回数据的格式，

如果写XML返回数据类型必须是XML，如果写JSON返回数据类型必须是JSON

如果写TEXT返回数据必须是字符串 都是大写

第五个参数就是success代表的是成功，当处理页面执行成功之后，必须跟个匿名函数

匿名函数里面必须有个参数，这个方法有个名词叫 回调函数

<script src="jquery-1.11.2.min.js"></script>

<style type="text/css">

</style>

</head>

<body>

<input type="text" id="uid"/>

<span id="tishi"></span>

</body>

<script type="text/javascript">

$("#uid").blur(function(){

         //取用户名

         var uid = $(this).val();

         //查数据库，调ajax

         $.ajax({

                 url:"testchuli.php",//处理页面地址

                 data:{u:uid},//要传递的数据(提交)

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

                 dataType:"TEXT", //返回数据格式

                 success:function(data){   //回调函数

                           var str = "";

                           if(data=="OK")

                           {

                              str = "该用户名可用";

                              $("#tishi").css("color","green");

                           }

                           else

                           {

                               str = "该用户名存在";

                               $("#tishi").css("color","red");

                           }

                           $("#tishi").text(str);

                     }

             })

    })

</script>

 接下来我们做一下处理页面

<?php

include("FZL.class.php");

$db = new FZL();

$uid = $_POST["u"];

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

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

if($attr[0][0]>0)

{

    echo "NO";

}

else

{

    echo "OK";

}

再做一个登录的练习：

<script src="jquery-1.11.2.min.js"></script>

<style type="text/css">

</style>

</head>

<body>

<div>账号：<input type="text" id="uid"/></div>

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

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

</body>

<script type="text/javascript">

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

        //取用户名和密码

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

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

        //调ajax

        $.ajax({

              url:"logincl.php",

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

              type:"POST",

              dataType:"TEXT",

              success: function(data){

                      if(data.trim()=="OK")

                      {

                          window.location.href="test.php";

                      }

                      else

                      {

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

                      }

                  }

            });

    })

</script>

再做一下处理页面

<?php

include("FZL.class.php");

$db = new FZL();

$uid = $_POST["u"];

$pwd = $_POST["p"];

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

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

if(!empty($pwd) && !empty($attr) && $attr[0][0]==$pwd)

{

    echo "OK";

}

else

{

    echo "NO";

}

通过最近的练习大家好出错的地方除了字母拼写，字母大小写，空格，符号容易出现错误，重要的还有文件路径，所以养成良好的整理文件路径也很重要

Ajax 概念 分析 举例的更多相关文章

  1. gpgj - 06.估值分析举例

    06.估值分析举例 1.举个栗子-贵州茅台的护城河 品牌效益高 只有高档产品 不卖中低档,不会拉低公司收入 {   "question": "我们来复习一下护城河要如何分 ...

  2. jQuery源码 Ajax模块分析

    写在前面: 先讲讲ajax中的相关函数,然后结合函数功能来具体分析源代码. 相关函数: >>ajax全局事件处理程序 .ajaxStart(handler) 注册一个ajaxStart事件 ...

  3. AJAX 概念 优势 发展前景 工作原理 底层技术 状态 缺点 框架

    1. 概念 Ajax asynchronous JavaScript and XML , 异步js和xml. 这种解释已经过时了, 现在ajax就是, 允许浏览器和服务器通信, 而无需刷新当前页面的技 ...

  4. $.ajax用法与举例

    下面是一段比较常用到的 $.ajax 方法: $.ajax({ type:'GET', url:'http://www.phpernote.com/jquery.php', data:{usernam ...

  5. Ajax的分析

    I.what is Ajax? Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术. A ...

  6. PDO概念 分析 练习

    PDO 翻译过来叫做数据访问抽象层 它是一个数据访问的层面,实际上是一个类,也就是说所有操作数据库的代码,都是通过这个层面完成的 该图好理解大概就是这样一种模式 现在考虑的是能不能使用同一个类,上层代 ...

  7. CSS line-height概念与举例

    本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/37 定义 两行文字基线之间的距离. 基线的大体位置 基线的位置可 ...

  8. 黑马学习Ajax 概念和基本使用

  9. AJAX 步骤分析

    HTML 步骤: 1. 创建异步对象 2. 设置请求行 3. 设置请求头(get请求可以省略) 4. 注册状态改变事件 4.1. 判断状态&请求是否成功并使用数据   5. 发送请求   PH ...

随机推荐

  1. 【AR实验室】mulberryAR : ORBSLAM2+VVSION

    本文转载请注明出处 —— polobymulberry-博客园 0x00 - 前言 mulberryAR是我业余时间弄的一个AR引擎,目前主要支持单目视觉SLAM+3D渲染,并且支持iOS端,但是该引 ...

  2. 如何一步一步用DDD设计一个电商网站（四）—— 把商品卖给用户

    阅读目录 前言 怎么卖 领域服务的使用 回到现实 结语 一.前言 上篇中我们讲述了“把商品卖给用户”中的商品和用户的初步设计.现在把剩余的“卖”这个动作给做了.这里提醒一下,正常情况下,我们的每一步业 ...

  3. 为C# as 类型转换及Assembly.LoadFrom埋坑！

    背景: 不久前,我发布了一个调试工具:发布:.NET开发人员必备的可视化调试工具(你值的拥有) 效果是这样的: 之后,有小部分用户反映,工具用不了(没反应或有异常)~~~ 然后,建议小部分用户换个电脑 ...

  4. 转：聊聊mavenCenter和JCenter

    Gradle支持从maven中央仓库和JCenter上获取构件,那这两者有什么区别呢? maven中央仓库(http://repo1.maven.org/maven2/)是由Sonatype公司提供的 ...

  5. MFC中如何画带实心箭头的直线

    工作中遇到话流程图的项目,需要画带箭头的直线,经过摸索,解决:思路如下: (1) 两个点(p1,p2)确定一个直线,以直线的一个端点(假设p2)为原点,设定一个角度 (2)以P2为原点得到向量P2P1 ...

  6. android studio 使用 jni 编译 opencv 完整实例 之 图像边缘检测！从此在andrid中自由使用 图像匹配、识别、检测

    目录: 1,过程感慨: 2,运行环境: 3,准备工作: 4,编译 .so 5,遇到的关键问题及其解决方法 6,实现效果截图. (原创:转载声明出处:http://www.cnblogs.com/lin ...

  7. RabbitMq应用一

    RabbitMq应用一 RabbitMQ的具体概念,百度百科一下,我这里说一下我的理解,如果有少或者不对的地方,欢迎纠正和补充. 一个项目架构,小的时候,一般都是传统的单一网站系统,或者项目,三层架构 ...

  8. JavaScript 常量定义

    相信同学们在看见这个标题的时候就一脸懵逼了,什么?JS能常量定义?别逗我好吗?确切的说,JS当中确实没有常量(ES6中好像有了常量定义的关键字),但是深入一下我们可以发现JS很多不为人知的性质,好好利 ...

  9. Android studio使用git教程

    ①下载Git工具,配置到Android studio中 http://git-scm.com/downloads ------------------------------------------- ...

  10. PC虚拟现实应用的性能分析与优化：从CPU角度切入

    如今,虚拟现实 (VR) 技术正日益受到欢迎,这主要得益于遵循摩尔定律的技术进步让这一全新体验在技术上成为可能.尽管虚拟现实能给用户带来身临其境般的超凡体验,但相比传统应用,其具有双目渲染.低延迟.高 ...