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 <!DOCTYPEHTML>
<html>
<head>
<title>ajax</title>
<metacharset="utf-8"/>
<scripttype="text/javascript">
//第一步创建ajax对象
varhttpAjax=newXMLHttpRequest();
//定义一个函数来检查输入的用户名是否为空，为空则返回错误，不继续往下执行代码
functioncheckUser(uname){
if(uname==""){
returnfalse;
}
//第四步设置监听函数,监听ajax在数据传输过程中状态,但是要放到前面
httpAjax.onreadystatechange=function(){
//4:数据已经发送、接收完毕,200:发送和接收没有错误
if(httpAjax.readyState==4&&httpAjax.status==200){
varres=httpAjax.responseText;
varsp=document.getElementById("sp");
if(res=="true"){
sp.innerHTML="<fontcolor='red'>已注册</font>";
}else{
sp.innerHTML="<fontcolor='green'>可以注册</font>"
}
}
}
//第二步准备发送数据
httpAjax.open("get","user.php?uname="+uname,true);
//uname是个变量，所以和字符串连接用个+符号
//第三步发送数据,get传值方式send值为null
httpAjax.send(null);
}
</script>
</head>
<body>
<inputtype="text"id="username"class="username"name="username"onchange="checkUser(this.value)"/><spanid="sp"></span>
</body>
</html>
user.php <?php
header("content-type:text/html;charset=utf-8");
$pdo=newPDO("mysql:host=localhost;dbname=test","root","123456");
$pdo->exec("setnamesutf8");
$uname=$_GET["uname"];
$sql="select*fromstu_infowheresname='".$uname."'";
$data=$pdo->query($sql)->fetch(PDO::FETCH_ASSOC);
if($data){
echo"true";
}else{
echo"false";
}
?>
数据库中的表stu_info
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
