AJAX-原理解析

来源：互联网发布：2000数据库置疑修复编辑：程序博客网时间：2024/05/29 11:51

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）AJAX 不是新的编程语言，而是一种使用现有标准的新方法。是7种技术的综合,它包含了七个技术( javascript xml xstl xhtml dom xmlhttprequest , css), ajax 是一个粘合剂。 AJAX 是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的艺术。

以上是我个人对AJAX的理解图解；ajax流程中，1，2，4为前端进行的操作，3则是后台的数据响应；

下面通过几个简单例子来说明一下AJAX的基本原理；（用户名验证）

1.get方式：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload=function(){function $(id){return document.getElementById(id);}function getXHR(){  //ajax的兼容处理//1号线：创建ajax对象var oAjax;if(window.XMLHttpRequest){//IE7+, Firefox, Chrome, Opera, SafarioAjax=new XMLHttpRequest();}else{//IE7以下oAjax=new ActiveXObject("Microsoft.XMLHTTP")}return oAjax;}//验证ajax对象是否创建成功$('username').onkeyup=function(){   //onkeyup（），键盘按键松开时触发事件var xhr=getXHR();//2号线：发送请求(准备资料，真正的发送，将请求发送至服务器)//open(get,url,true)//第一个参数：数据传输方式 get  post//第二个参数：处理文件  xx.php xx.txt ,要数据：直接写路径就好；提交数据：在地址那里写数据（get方式）//第三个参数：同步或者异步方式，默认是异步truevar url='/checkName.php?time='+new Date()+'&name='+$('username').value;xhr.open('GET',url,true);//send() 如果是get方式，写null或者为空//如果是post，参数那就直接写要传输的内容xhr.send(null);//4号线：接收3号线传来的数据，进行处理xhr.onreadystatechange=function(){//alert('现在的状态是：'+xhr.readyState);if(xhr.readyState==4){//alert(xhr.responseText);if(xhr.status==200){$('inf').innerHTML=xhr.responseText;}}}}}</script></head><body><form action="checkName.php" method="post">用户名：<input type="text" id="username" /><span id="inf"></span><br />密码：<input type="password" /><br /><input type="submit" value="注册"/></form></body></html>

在这里我们自建一个php文件来模仿与后台的交互；

<?php//3号线：获取ajax传来的信息，做处理，再返回给ajax：后台做，或者后台协作$userName=$_GET['name'];if($userName=='admin'){ //把内容拿到，进行判断，输出信息返回给ajaxecho '该用户名不能使用'; }else{echo '该用户名能使用';}?>

2.post方式：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload=function(){function $(id){return document.getElementById(id);}function getXHR(){//1号线：创建ajax对象var oAjax;if(window.XMLHttpRequest){//IE7+, Firefox, Chrome, Opera, SafarioAjax=new XMLHttpRequest();}else{//IE7以下oAjax=new ActiveXObject("Microsoft.XMLHTTP")}return oAjax;}//验证ajax对象是否创建成功$('username').onkeyup=function(){ //onkeyup（），键盘按键松开时触发事件var xhr=getXHR();//2号线：发送请求(准备资料，真正的发送)//open(get,url,true)//第一个参数：数据传输方式 get  post//第二个参数：处理文件  xx.php xx.txt ,要数据：直接写路径就好；提交数据：在地址那里写数据（get方式）//第三个参数：同步或者异步方式，默认是异步truevar url='/checkName2.php';var data='name='+$('username').value;console.log(url+data);xhr.open('POST',url,true);//创建头文件信息xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//send() 如果是get方式，写null或者为空//如果是post，参数那就直接写要传输的内容xhr.send(data);//4号线：接收3号线传来的数据，进行处理xhr.onreadystatechange=function(){//alert('现在的状态是：'+xhr.readyState);if(xhr.readyState==4){//alert(xhr.responseText);if(xhr.status==200){$('inf').innerHTML=xhr.responseText;}}}}}</script></head><body><form action="checkName.php" method="post">用户名：<input type="text" id="username" /><span id="inf"></span><br />密码：<input type="password" /><br /><input type="submit" value="注册"/></form></body></html>

<?php//3号线：获取ajax传来的信息，做处理，再返回给ajax：后台做，或者后台协作//这里两句话很重要,第一讲话告诉浏览器返回的数据是xml格式header("Content-Type: text/text;charset=utf-8");//告诉浏览器不要缓存数据header("Cache-Control: no-cache");$userName=$_POST['name'];if($userName=='admin'){ //把内容拿到，进行判断，输出信息返回给ajaxecho '该用户名不能使用'; }else{echo '该用户名能使用';}?>

这两个例子实现的效果就是ajax的基本运用之一，在用户注册时将输入的用户名与后台数据进行对比验证，确定唯一性，如果使用传统方式进行的交互，则只有在用户提交注册信息时才能反馈错误，用户体验极为不佳，同时重复请求与提交整个页面也会占用过多的带宽，传输中容易出现问题。

下面再来将get方式与post方式整合封装，方便使用:

//传输方式，路径，数据，回调函数（DOM操作）function ajax(method,url,data,fnsuccess){var xhr;if(window.XMLHttpRequest){  //兼容处理xhr=new XMLHttpRequest;}else{xhr=new ActiveXObject('Microsoft.XMLHTTP');}if(method=='GET' && data){ //判断传输方式如果为  get并且有数据  则路径为url+数据内容url=url+'?'+data;}xhr.open(method,url,true);if(method=='GET'){  //判断传输方式如果为get，send（）写null；xhr.send(null);}else{  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//创建头文件，实际上我还不明白这段代码的含义，但是一定要写。。。xhr.send(data);  //post方式则在send（）中直接写要传输的数据；}xhr.onreadystatechange=function(){if(xhr.readyState==4){  //对象状态为4：即已完成if(xhr.status==200){ //且数据正确if(fnsuccess){ fnsuccess(xhr.responseText);}}}}}

1 0