Ajax 概念 分析 举例
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 概念 分析 举例的更多相关文章
- gpgj - 06.估值分析举例
06.估值分析举例 1.举个栗子-贵州茅台的护城河 品牌效益高 只有高档产品 不卖中低档,不会拉低公司收入 { "question": "我们来复习一下护城河要如何分 ...
- jQuery源码 Ajax模块分析
写在前面: 先讲讲ajax中的相关函数,然后结合函数功能来具体分析源代码. 相关函数: >>ajax全局事件处理程序 .ajaxStart(handler) 注册一个ajaxStart事件 ...
- AJAX 概念 优势 发展前景 工作原理 底层技术 状态 缺点 框架
1. 概念 Ajax asynchronous JavaScript and XML , 异步js和xml. 这种解释已经过时了, 现在ajax就是, 允许浏览器和服务器通信, 而无需刷新当前页面的技 ...
- $.ajax用法与举例
下面是一段比较常用到的 $.ajax 方法: $.ajax({ type:'GET', url:'http://www.phpernote.com/jquery.php', data:{usernam ...
- Ajax的分析
I.what is Ajax? Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术. A ...
- PDO概念 分析 练习
PDO 翻译过来叫做数据访问抽象层 它是一个数据访问的层面,实际上是一个类,也就是说所有操作数据库的代码,都是通过这个层面完成的 该图好理解大概就是这样一种模式 现在考虑的是能不能使用同一个类,上层代 ...
- CSS line-height概念与举例
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/37 定义 两行文字基线之间的距离. 基线的大体位置 基线的位置可 ...
- 黑马学习Ajax 概念和基本使用
- AJAX 步骤分析
HTML 步骤: 1. 创建异步对象 2. 设置请求行 3. 设置请求头(get请求可以省略) 4. 注册状态改变事件 4.1. 判断状态&请求是否成功并使用数据 5. 发送请求 PH ...
随机推荐
- 你必须知道的EF知识和经验
注意:以下内容如果没有特别申明,默认使用的EF6.0版本,code first模式. 推荐MiniProfiler插件 工欲善其事,必先利其器. 我们使用EF和在很大程度提高了开发速度,不过随之带来的 ...
- 前端开发中SEO的十二条总结
一. 合理使用title, description, keywords二. 合理使用h1 - h6, h1标签的权重很高, 注意使用频率三. 列表代码使用ul, 重要文字使用strong标签四. 图片 ...
- 如何一步一步用DDD设计一个电商网站（一）—— 先理解核心概念
一.前言 DDD(领域驱动设计)的一些介绍网上资料很多,这里就不继续描述了.自己使用领域驱动设计摸滚打爬也有2年多的时间,出于对知识的总结和分享,也是对自我理解的一个公开检验,介于博客园这个平 ...
- Oracle 数据库知识汇总篇
Oracle 数据库知识汇总篇(更新中..) 1.安装部署篇 2.管理维护篇 3.数据迁移篇 4.故障处理篇 5.性能调优篇 6.SQL PL/SQL篇 7.考试认证篇 8.原理体系篇 9.架构设计篇 ...
- PHP代码优化
1 代码优化 1 尽量静态化 如果一个方法能被静态,那就声明它为静态的,速度可提高1/4,甚至我测试的时候,这个提高了近三倍. 当然了,这个测试方法需要在十万级以上次执行,效果才明显. 其实静态方法和 ...
- 2Sum
用哈希表(unordered_map)使得时间复杂度从O(n*n)降到O(n),空间复杂度从O(1)增到O(n):一边找一边插入哈希表 注意 在C++11以前要使用unordered_map需要 #i ...
- MATLAB中绘制质点轨迹动图并保存成GIF
工作需要在MATLAB中绘制质点轨迹并保存成GIF以便展示. 绘制质点轨迹动图可用comet和comet3命令,使用例子如下: t = 0:.01:2*pi;x = cos(2*t).*(cos(t) ...
- 为什么你SQL Server的数据库文件的Date modified没有变化呢？
在SQL Server数据库中,数据文件与事务日志文件的修改日期(Date Modified)是会变化的,但是有时候你会发现你的数据文件或日志文件的修改日期(Date Modified)几个月甚至是半 ...
- IIS启动失败，启动Windows Process Activation Service时，出现错误13：数据无效 ;HTTP 错误 401.2 - Unauthorized 由于身份验证头无效，您无权查看此页
因为修改过管理员账号的密码后重启服务器导致IIS无法启动,出现已下异常 1.解决:"启动Windows Process Activation Service时,出现错误13:数据无效&quo ...
- java中判断字符串是否为只包含数字
1.用Java自带的函数 public static boolean isNumeric(String str){ for(int i=str.length();--i>=0;){ if (!C ...