AJAX 的操作和调用
Posted Shuo_128
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AJAX 的操作和调用相关的知识,希望对你有一定的参考价值。
AJAX(异步数据处理): Asynchronous (异步)的javascript And XML ( 局部刷新技术 )
ajax能做什么:
页面实现的效果是局部刷新,这种效果都是ajax操作的
用户名在线监测,搜索提示等等
无刷新分页,滚动分页加载,微博异步数据发布
ajax聊天室
ajax优点:
速度快:ajax引擎缓存了重复提交的数据
体验好
减少了服务器和数据库的读写压力
ajax数据处理流程:
服务器端: php+mysql+EMAIL(.net,java....) m=news
中间:xmlhttp协议
浏览器端:JavaScript + CSS +html
ajax数据处理流程:
JavaScript 得到表单中的数据,将需要提交的数据传递给ajax引擎(xmlhttp协议的解析器)ajax引擎会缓存用户提交的数据,并且将需要提交的数据进行提交。
数据提交服务器,服务器处理完毕后,会将数据通过xmlhttp协议对象返回到浏览器中,ajax引擎会将返回的数据和提交的数据匹配,然后缓存到ajax引擎中,然后js从ajax引擎中获取数据.
数据第二次提交时,如果提交的数据已经提交过,ajax引擎有匹配的返回数据,那么ajax引擎则不会再向服务器提交数据,而会从ajax引擎直接将原来缓存的数据直接返回。
ajax操作步骤:
创建xmlhttp协议对象:
IE: activeXobject插件 IE8上用的是FF系列的xmlhttprequest对象
FF: xmlhttprequest对象(类)
var http_request= false; if(window.XMLHttpRequest) { //FF Chrome 浏览器 http_request = new XMLHttpRequest(); }else if (window.ActiveXObject) { // IE浏览器 IE9 以下 try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (es) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (es) {} } } IETester
设置监视句柄:监控整个的ajax数据处理流程
readyState: 获取当前ajax的处理状态
不同的浏览器状态不同,有的是1,4有的是1234
0 未创建ajax对象
1 ajax对象创建成功,还没有准备发送的数据
2 ajax发送的数据已经准备完毕,还没有发送
3 ajax已经发送数据,还没有接受完数据
4 ajax接受完毕数据
readyState的状态数值,每更改一次,都会触发一次的onreadystatechange
ajax对象.onreadystatechange = 方法名;
准备发送的数据:
ajax对象.open(“提交的方式”,”提交页面和数据”,同步/异步)
提交方式: GET/POST
提交的页面和数据:
GET: 比如 index.php?m=news&username=tom
POST: 提交的页面
同步/异步: true:异步 false:同步
同步:数据一次性提交,一次性接收(多个ajax挨个提交接收)
异步:数据一边提交,一边接收(多个ajax可能一起提交)
发送数据:
ajax对象.send([数据]);
GET: send无参数
POST: send中放置的时post提交的数据,并且提交的是字符串
监视代码中:
发送和接受过程中不能有错误
ajax对象.status = 200
200:数据发送和接受无错误
接受数据:
ajax对象.responseText; #返回的是服务器返回的数据#
【user.html】 #用户名在线监测user.html user.php user表 pdo操作数据库#
<html> <head> <script> // ajax封装函数 function ajax(method,url,data,asyc,success){ // 创建xmlhttp协议对象 var http_request= false; if(window.XMLHttpRequest) { //Mozilla 浏览器 http_request = new XMLHttpRequest(); }else if (window.ActiveXObject) { // IE浏览器 try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (es) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (es) {} } } http_request.onreadystatechange = check; // GET方式提交 if(method.toUpperCase() == "GET"){ http_request.open(method,url+"?random="+Math.random()+"&"+data,asyc); http_request.send(); } // POST方式提交 if(method.toUpperCase() == "POST"){ http_request.open(method,url,asyc); // 设置xmlhttp请求的头信息 变量=值&变量=值 http_request.setRequestHeader("content-Type","application/x-www-form-urlencoded"); http_request.send("random="+Math.random()+"&"+data); } function check(){ if(http_request.readyState == 4 && http_request.status ==200){ var text = http_request.responseText; if(text == "1"){ var text = "用户名已存在"; var color = "red"; }else{ var text = "用户名可用"; var color = "green"; } info.innerHTML = text; info.style.color = color; } } } </script> </head> <body> </body> </html>
【user.php】
<?php echo $_GET[‘uname‘]?>
以上是关于AJAX 的操作和调用的主要内容,如果未能解决你的问题,请参考以下文章