AJAX

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

练习：

1.输入用户名，看是否可用

主页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.11.2.min.js"></script>  <!--若要引用jQuery和外部JS，jQuery一定放在最前面，外部JS放在后面-->
</head>

<body>
<div><input type="text" id="uid" /><span id="xinxi"></span></div>  <!--AJAX不用提交，所以不用写name，但必须写id-->
</body>

<script type="text/javascript">
$(document).ready(function(e) {

    //AJAX   局部刷新技术,页面整体不刷新
    //输入用户名，看是否可用
    
    $("#uid").blur(function(){     //失去焦点时触发事件        
        //把文本框的值取出来
        var uid = $(this).val();
        //调用AJAX   ajax是一种方法，所以要加括号，括号里的参数是json数据，所以用花括号，注意最后面有分号
        $.ajax({            
            //牢记各个参数及其格式   *****
            async:false,              //AJAX同步
            url:"ChuLi.php",          //处理页面
            data:{u:uid},             //传递的数据，JSON数据，若传递多个数据，中间用逗号隔开
            type:"POST",              //提交方式，注意加引号
            dataType:"TEXT",          //返回数据类型，注意dataType的T要大写，三种数据类型：TEXT,JSON,XML,注意均为大写
            success:function(data){   //回调函数，data返回值，为形参    success是指AJAX调用成功后，返回过来执行这个方法
            
                if(data.trim()=="OK") //trim()去掉前后空格
                {
                    var str = "该用户名可以使用！";
                    $("#xinxi").html(str);  //将str字符串添加到<sapn></sapn>标签中
                }
                else
                {
                    var str = "<span style='color:red'>该用户名已经存在！</span>";    
                    $("#xinxi").html(str);
                }   
                
               }
            
            });            
        })        
});

</script>
</html>

注意：在调用AJAX返回数据判断时可用trim()方法去掉前后空格，以防出错

处理页面

<?php
//接收传递过来的参数
$uid = $_POST["u"];
//查数据库
include("../DB.class.php");
$db = new DB();
$sql = "select count(*) from Users where Uid = '{$uid}'";
$attr = $db->Query($sql,0,"weixin");
if($attr[0][0]==1)
{
    echo "NO";    //输出数据类型由dataType决定，本例中dataType为TEXT，所以输出的是字符串
}
else
{
    echo "OK";    
}

2.输入用户名和密码，看能否登录

主页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.11.2.min.js"></script>

</head>

<body>
<h1>登录</h1>  <!--AJAX不用提交，所以不用<form></form>-->
<div>用户名： <input type="text" id="uid" /></div><br />

<div>密码： &nbsp; <input type="password" id="pwd" /></div><br />

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

</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {
    /*
    数据传输：同步：传输必须等到接收方接收到，才能传下一个；
            异步：传输不用等到对方接收就可以继续传输
            
    AJAX： 同步：AJAX必须处理完才能继续向下执行；
    ··       异步：AJAX在处理数据的同时代码继续向下执行
    
    
    */
    
    $("#btn").click(function()
    {  
        var uid = $("#uid").val();
        var pwd = $("#pwd").val();
        
        $.ajax(
        {
            async:false,     
            url:"LoginChuLi.php",
            data:{u:uid,p:pwd},
            type:"POST",
            dataType:"TEXT",
            success: function(data)
            {                
                if(data.trim()=="OK")
                {
                    window.location = "test.php";    //跳转页面
                }
                else
                {
                    alert("用户名或密码错误！");    
                }            
                
            },    
            /*error: function(){}执行失败时调用，一般不常用*/                
            
        });        
    })  
});

处理页面

<?php
$uid = $_POST["u"];
$pwd = $_POST["p"];
include("../DB.class.php");
$db= new DB();
$sql = "select count(*) from Users where Uid = '{$uid}' and Pwd = '{$pwd}'";

$attr = $db->Query($sql,0,"weixin");
if($attr[0][0]==1)
{
    echo "OK";
}
else
{
    echo "NO";    
}

AJAX异步的问题，例如

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.11.2.min.js"></script>
<style>
#test{ width:100px; height:100px; background-color:#F60;}
</style>
</head>
<body>
<div id="test"></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {
$("#test").click(function()
    {
        $("#test").html("");  //清空原有数据
        $.ajax(
        {
            //ajax默认是异步的，因为在调用处理页面的时间，下面代码继续执行，而alert的执行时间较短，所以#shuju这个div还没有返回，alert就已经执行完毕，
解决方法：变为同步即可:async:false   
            async:false,
            url:"TestCL.php",            
            dataType:"TEXT",
            success: function(data)
            {
                $("#test").html(data);                
            }                
        });            
        alert($("#shuju").html());            
    })
});
</script>

<?php
echo "<div id='shuju' style='color:red'>hello world!</div>";

AJAX异步时

AJAX同步时

报错：

当错误信息提示中有fetch_all()或fetch_row()时一定是SQL语句出错了，解决方法：输出SQL语句，进行输出调错

AJAX调用时，返回整页信息，需要从中找到错误提示

posted @ 2016-05-21 08:29 魅影星魂阅读(190) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

魅影星魂

经不住似水流年，逃不过此间少年。

AJAX

公告