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>密码： <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调用时，返回整页信息，需要从中找到错误提示
