标签:ajax
ajax=>Asynchronous JavaScript and XML异步传输 ,是指一种创建交互式网页应用的网页开发技术。
通过在前端脚本(js)与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新;传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页面(f5)。
ajax执行原理:一个Ajax交互从一个称为 XMLHttpRequest 的JavaScript对象开始。如同名字所暗示的,它允许一个客户端脚本(JS)来执行HTTP请求,且将会解析一个XML格式的服务器响应。Ajax处理过程中的第一步是创建一个XMLHttpRequest实例。使用HTTP方法(GET或POST)来处理请求,并将目标URL设置到XMLHttpRequest对象上
2、开始准备将要发送的数据
发送一个http请求的时候需要:正确URL,需要传给服务器的处理的数据,数据的传输方式(get|post)
ajax.open("get|post",url+data,true|false);
参数1:数据传输方式 get|post
参数2:请求的URL和数据user.php?参数=值&参数=值.
参数3:ajax请求同步还是异步
false: 同步
true : 异步
一个页面中有3个AJAX同时执行
Ajax可以通过两种方法访问服务器,
同步(脚本会停留并等待服务器发送回复然后再继续)
异步(脚本允许页面继续其他进程并处理可能的回复)
同步需要等待返回结果才能继续,异步不必等待,一般需要监听异步的结果,设置监听函数
同步是在一条直线上的队列,异步不在一个队列上各走各的
其中async是一个布尔值。如果是异步通信方式(true),客户机就不等待服务器的响应;如果是同步方式(false),客户机就要等到服务器返回消息后才去执行其他操作。我们需要根据实际需要来指定同步方式,在某些页面中,可能会发出多个请求,甚至是有组织有计划有队形大规模的高强度的request,如果异步:true 后一个是会覆盖前一个的,这个时候当然要指定同步方式:Flase
3. 发送数据
ajax.send(string|null);
get: null
post: string
3.1 服务器端处理数据的php代码正常用 $_GET|$_POST|$_REQUEST获取数据 然后处理
3.2 服务器端返回数据是以页面输出流的形式 返回数据
ajax捕获的是服务器端文件的 输出流
4. ajax.readyState 属性 监听ajax执行的过程执行到哪一步
0: ajax对象还没有创建
1: 对象已经创,还没有准备发送数据
2: 准备发送的数据已经准备完毕,还没有发送
3: 数据已经发送,还没有完全接收
4: 数据已经发送、接收完毕
5. 设置监视的函数 监听ajax在数据传输过程中状态
ajax.onreadystatechange = 函数名();
ajax.status :监测ajax操作过程是否有错误报出
200:发送和接收没有错误
400:发送或者接收中出现了错误;
6. ajax得到服务器中返回的数据
ajax.responseText;
php页面的数据是怎么返回:
数据必须在php代码输出状态
也就是说ajax捕获服务脚本页面的 输出流
reg.html
<!DOCTYPE HTML> <html> <head> <title> ajax </title> <meta charset="utf-8"/> <script type="text/javascript"> //第一步创建ajax对象 var httpAjax = new XMLHttpRequest(); //定义一个函数来检查输入的用户名是否为空,为空则返回错误,不继续往下执行代码 function checkUser(uname){ if(uname == ""){ return false; } //第四步 设置监听函数,监听ajax在数据传输过程中状态,但是要放到前面 httpAjax.onreadystatechange = function(){ //4: 数据已经发送、接收完毕,200:发送和接收没有错误 if(httpAjax.readyState == 4 && httpAjax.status == 200){ var res = httpAjax.responseText; var sp = document.getElementById("sp"); if(res == "true"){ sp.innerHTML = "<font color=‘red‘>已注册</font>"; }else{ sp.innerHTML = "<font color=‘green‘>可以注册</font>" } } } //第二步准备发送数据 httpAjax.open("get","user.php?uname="+uname,true); //uname是个变量,所以和字符串连接用个+符号 //第三步发送数据,get传值方式send值为null httpAjax.send(null); } </script> </head> <body> <input type="text" id="username" class="username" name="username" onchange="checkUser(this.value)"/><span id="sp"></span> </body> </html>
user.php
<?php header("content-type:text/html;charset=utf-8"); $pdo = new PDO("mysql:host=localhost;dbname=test","root","123456"); $pdo->exec("set names utf8"); $uname = $_GET["uname"]; $sql = "select * from stu_info where sname=‘".$uname."‘"; $data = $pdo->query($sql)->fetch(PDO::FETCH_ASSOC); if($data){ echo "true"; }else{ echo "false"; } ?>
数据库中的表stu_info
本文出自 “IT5808” 博客,请务必保留此出处http://it5808.blog.51cto.com/10842703/1713365
标签:ajax
原文地址:http://it5808.blog.51cto.com/10842703/1713365