Ajax基础和登录教程

Ajax是异步JavaScript和XML的缩写。

Ajax的优势：

优点：减轻服务器负担，根据需要获取数据，并最大限度地减少冗余请求

本地刷新页面减少了用户的心理和实际等待时间，带来了更好的用户体验

基于xml标准化，它得到了广泛支持，无需安装插件等

进一步促进页面和数据的分离

Ajax包括以下技术：

基于web标准表示的Xhtml CSS表示：

使用DOM(文档对象模型)进行动态显示和交互；

使用XML和XSLT进行数据交换和相关操作；

使用XMLHttpRequest进行异步数据查询和检索；

使用JavaScript将所有东西绑定在一起。

也就是说，Ajax最大的特点就是可以实现动态不刷新

使用Ajax:

示例：

数据库中的一个表：

单击查看用户名是否可用：

主页代码：

！DOCTYPE html html Head meta charset=' UTF-8 ' title/title script src=' http : jquery-1 . 11 . 2 . min . js '/script/Head body输入用户名：输入类型=' text ' id=' Zhang '/span id=' tishi '/span/body/html script//添加事件$ ('# Zhang ')。blur (function () {//1取内容var zhang=$(this)。val () //val获取表单元素，给出变量//2验证获取内容的内容区数据库//调用Ajax $。ajax({ type:'POST '，//submission method URL 3360 ' chuli . php '，//请求哪个PHP文件(请求地址)data: { yhm:zhang })。//名字叫张yhm，是一个JSON。//是否需要将数据传输到处理页面，不需要传输或写入datatype :‘text’。//处理页面返回的类型：TEXT字符串为JSON、JSON、XML。success:function(data)只有三种类型{ //callback function //data是成功后要调用的if函数的返回值//(data==0){//如果是0 $('#tishi ')。文本('用户名为0；“可用！”);$('#tishi ')。css('color '，' green ')；} else { $(' # tishi ')；文本('用户名已经存在；“不可用！”);$('#tishi ')。css('color '，' brown ')；} } });//3给出提示})/脚本接下来，做处理页面：

？PHP $ Zhang=$ _ POST[' yhm ']；//取值include(' db . class . PHP ')；$db=新db()；$sql='从mydb中选择count(*)，其中zhang=' { $ zhang }$ arr=$ db-Query($ SQL)；echo $ arr[0][0]；//直接输出相当于返回？图：

输入现有用户名：

输入不存在的用户名：

写另一个登录：

登录页面代码：

！doctype html head metaharset=' utf-8 ' title/title script src=' http : jquery-1 . 11 . 2 . min . js '/script/headsdyh1登录页面/H1div帐户输入类型=' text ' id=' Zhang '/div密码输入类型=' text ' id=' mi '/div输入类型=' button ' id=' BTN ' value=' log in '/body/html script $(' # BTN ')。单击(function () var mi=$('#mi ')。val()；//2验证数据$。Ajax ({URL :' drcl.php '，data: {Zhang : Zhang，mi : mi}，type:' post '，datatype 3360' text '，success : function(data){///回调function//确定返回值if(data=' ok '){ window . location . href=' zym . PHP '；} else {alert('错误的用户名或密码')；} } });//提示})/脚本接下来，登录处理页面：

？phpinclude(' db . class . PHP ')；$db=新db()；$ Zhang=$ _ POST[' Zhang ']；$ mi=$ _ POST[' mi ']；//value $ SQL='从mydb中选择mi，其中Zhang=' { $ Zhang }$ arr=$ db-Query($ SQL)；if($arr[0][0]==$mi！empty($ mi)){ echo ' ok '；} else { echo ' no}?看看这幅画。如果输入不正确，将在此页面上直接提示您：

输入要跳转的权限：

用Ajax编写登录的好处是在提示错误时不必跳转到其他页面。

以上是边肖介绍的Ajax基础和登录教程，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！