ajax使用心得

前端之家收集整理的这篇文章主要介绍了ajax使用心得前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

使用ajax技术编写网页就像编写winform应用程序一样具有及时性,个人认为跟ado.net十分相似,下面举例说明:

对比 ajax ado.net
是否需要刷新
使用对象 XMLHttpRequest sqlconnection&Command等
访问地址 URL connectionstring
访问方式 get|post CommandType.StoredProcedure|text
数据位置 服务器 服务器数据库
数据类型 HTML|txt|json|XML 数据库里的任何格式
状态判断 ajax.onreadeystatechange connection.status

下面是具体的demo

<!--ajax.htm文件-->
<!DOCTYPE html>
<html>
    <head>
        <Meta charset="UTF-8">
        <title>Ajax</title>
    </head>
    <body>
        <div id="new"></div>

        <script src="js/getHttpObject.js"></script>
        <script src="js/getNewContent.js" ></script>
    </body>
</html>
//getHttpObject.js文件
function getHTTPObject(){//创建ajax对象
    if(typeof XMLHttpRequest=="undefined")
    XMLHttpRequest=function(){
        try{
            return new ActiveXObject("Msxml2.XMLHTTP.6.0");
        }catch(e){
            //TODO handle the exception
        }
        try{
            return new ActiveXObject("Msxml2.XMLHTTP.3.0");
        }catch(e){
            //TODO handle the exception
        }
        try{
            return new ActiveXObject("Msxml2.XMLHTTP");

        }catch(e){
            //TODO handle the exception
        }
        return false;
    }
    return new XMLHttpRequest();
}
//getNewContent.js文件
function getNewContent(){
    var request=getHTTPObject();//获取对象
    if (request) {
        request.open("get","example.txt",true);//跟读地址来打开文件,true表示异步
        request.onreadystatechange=function(){
            if(request.readyState==4){//当请求完成,响应就绪的时候,执行操作
                var para=document.createElement("p");
                var txt=document.createTextNode(request.responseText);
                para.appendChild(txt);
                document.getElementById("new").appendChild(para);
            }
        };
        request.send(null);
    }else{
        alert('Sorry,your browser doesn\'t suport XMLHttpRequest');
    }
}
function addLoadEvent(func){
//为窗体加载完成事件添加操作
    var oldonload=window.onload;
    if(typeof window.onload!='function'){
        window.onload=func;
    }else{
        window.onload=function(){
            oldonload();
            func();
        }
    }
}
addLoadEvent(getNewContent);
\\这是ajax要访问的文件example.txt
this is a example!

总结:多想自己以前会的知识,每次学习知识都有似曾相识的感觉,这可能就是老师说的编制知识网吧!学会多角度看自己学到的知识,发现计算机有很多约定俗成但是不成文的设计规则,慢慢体会就会发现都是相同的!

原文链接:https://www.f2er.com/ajax/160962.html

猜你在找的Ajax相关文章