您的位置：首页 > 编程语言

Ajax入门示例完整代码

2008-03-24 21:28 344 查看
Ajax入门完整示例代码！

我添加了十分详尽的注释，同时在IDE中调试运行成功，大家可以直接拿去学习和使用

我相信代码是最好的学习工具，呵呵

 


<html xmlns="http://www.w3.org/1999/xhtml">


<head> <title>Ajax入门示例</title> </head>




<script type="text/jscript">...


    var xmlhttp;


    function createHTTP()




    ...{


        if(window.ActiveXObject)




        ...{


            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE浏览器中创建异步调用对象


        }


        else if(window.XMLHttpRequest)




        ...{


            xmlhttp=new XMLHttpRequest(); //Firefox中创建异步调用对象


        }


    }


    function startHTTP()




    ...{


        //第一步：根据不同的浏览器创建异步调用对象（XMLHttpRequest）


        createHTTP();


        //第二步：加载数据所在的服务器，Ajax可以从其他网站获取数据，也可以从本地的XML文件中获取


                //语法如下：xmlhttp.open(method,url,bool)


                //method：表示HTTP的请求方法，一共有get、post、head、put、delete五种方法；get是将参数追加到URL中发送，而post是将参数串放在请求体中发送。如果数据处理不改变数据的状态（比如获取数据），就用get；如果编辑、更新数据等改变了数据，则用post。


               //URL：表示数据的地址；bool：表示是否使用异步获取，true表示异步，false表示同步


        xmlhttp.open("GET","XMLFile.xml",true);


        //第三步：异步调用服务器状态的变化：状态变化与事件挂钩，注意方法后面不带括号


        xmlhttp.onreadystatechange=StateDO;   


        //第四步：发出一个HTTP请求。可以通过在发送请求时设置的参数有选择的挑选数据。如果发送请求时，参数已经放在了请求的URL中，则send方法中，参数可以设置为null或者不写。如果希望把参数放在send方法中，则语法如下：xmlhttp.Send(“id=cgjun”); 由于用Send方法发送参数时，需要考虑很多环境变量，如HTTP Method和服务器的一些设置，所以建议将参数放在请求的URL中


        xmlhttp.send(null);


    }


    function StateDO()




    ...{


        //判断是否完成状态(异步调用完成时，状态编号为4)；返回的状态代码=200，表示调用成功；返回的状态代码=400，表示没有找到


        if(xmlhttp.readystate==4 && xmlhttp.status==200)




        ...{


            document.getElementById("mytext").innerHTML=xmlhttp.responsetext;


        }


    }


</script>


<body>


<div style="" id="mytext">这是旧数据</div><input type="button" value="更新DIV" onclick="startHTTP()" /></body></html>



 

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  ajax xmlhttprequest function url 服务器 浏览器
相关文章推荐
新的分享
章节导航