关于ajax的一个学习例子

页面：

<form method=""  action="ajax.php">

　　hehe:<input type="text" size=20 name="hehe" id="hehe">

　　　　　<input type="button" value="提交" id="btn1">

</form>

<div id="div1"></div>

 

js代码：

<script type="text/javascript">

　　window.onload=function(){

　　　　var oBtn1=document.getElementById('btn1');

　　　　var oInput=document.getElementById('hehe');

　　　　var oDiv=document.getElementById("div1");

　　　　

　　　　oBtn1.onclick=function(){

　　　　　　var sValue=oInput.value;

                 //创建ajax对象，只兼容非IE浏览器

　　　　　　if(window.XMLHttpRequest){

　　　　　　　　var oAjax=new XMLHttpRequest();

　　　　　　}else{

　　　　　　　　//ie6

　　　　　　　　var oAjax=new ActiveXObject('Microsoft.XMLHTTP');

　　　　　　}

　　　　　　//2链接服务器，默认是异步

　　　　　　oAjax.open('get','ajax.php?hehe='+sValue,true);

　　　　　　//3.发送请求

　　　　　　oAjax.send();

　　　　　　//4.接受返回

　　　　　　oAjax.onreadystatechange=function(){

　　　　　　　　//oAjax.readyState   记录步骤

　　　　　　　　if(oAjax.readyState==4){

　　　　　　　　　　　if(oAjax.status==200){

　　　　　　　　　　　　　　oDiv.innerHTML = oAjax.responseText;

　　　　　　　　　　　}

　　　　　　　　　　　else

　　　　　　　　　　　{

　　　　　　　　　　　　　alert("fail");　

　　　　　　　　　　　}

　　　　　　　　　　}

　　　　　　　　　　else{

                             　　alert(oAjax.readyState);//记录步骤

                             }

}

}

}

</script>

 

ajax.php:

<?php

　　$hehe=$_GET['hehe'];

　　echo $hehe;

?>

=====================================================================

另一种方式：

$.ajax({
                        url : webroot+url,
                        data : {
                            ids : ids,
                        },
                        type : 'POST',
                        success : function(backdata) {
                            if($.trim(backdata)=="00"){
                                jqAlert("删除成功！","提示",function(){
                                    $('#flexgrid').flexReload();// 表格重载
                                });
                            }
                        }
                    });

 

Ajax的给我们带来的好处大家基本上都深有体会，在这里我只简单的讲几点：

    1、最大的一点是页面无刷新，在页面内与服务器通信，给用户的体验非常好。

　 2、使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。

　 3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成 本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

    4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

 

ajax常见的问题：

1.js脚本缓存问题：因为修改了js内容调试的时候并不能显示新写的代码的结果，是因为js为了加速页面执行，当前页面会使用缓存保持当前调用的相同链接，为了开发时调试方便可以在链接地址的后面增加一个随机函数。