zoukankan      html  css  js  c++  java
  • AJAX的写法

    AJAX可以说是前端开发必须要会的技术。AJAX是异步的javascript and xml。是他们技术的合称。

    1.原生写ajax。很多小伙伴在会了jQuery后,将原生都忘记了,所以原生我还是要在这里写一下。

    <script>
    function ajax(url,fnSucc)
    {
    // 第一步-创建ajax对象
    if(window.XMLHttpRequest)
    {
    var oAjax = new XMLHttpRequest(); //标准浏览器
    }
    else
    {
    var oAjax = new ActiveXObject("Microsoft.XMLHTTP");//IE6浏览器创建ajax对象
    }
    // 第二部-连接服务
    oAjax.open("GET",url,true);//把要读取的参数的传过来。
    // 第三部-发送请求
    oAjax.send();
    // 第四部-接收返回
    oAjax.onreadystatechange=function()
    {
    if(oAjax.readyState==4)
    {
    if(oAjax.status==200)
    {
    fnSucc(oAjax.responseText);//成功的时候调用这个方法
    }
    else
    {
    if(fnfiled)
    {
    fnField(oAjax.status);//失败
    }
    }
    }
    };
    }
    </script>

    可以将它封装在一个js文件里,方便使用。使用方法如下:

    <script src="ajax.js"></script>//引用封装的ajax文件
    <script>
    window.onload=function()
    {
        var oBtn = document.getElementById("btn1");
        oBtn.onclick = function()
        {
            ajax('a.txt',function(str){//读取a.txt文件里面的内容
                    alert(str);//将读取的内容输出
                })            
        }
    };
    
    </script>

    2.jQuery写ajax。
    1.  $.ajax({  
    2.                     type : "POST",  //提交方式  
    3.                     url : "${pageContext.request.contextPath}/org/doDelete.action",//路径  
    4.                     data : {  
    5.                         "org.id" : "${org.id}"  
    6.                     },//数据,这里使用的是Json格式进行传输  
    7.                     success : function(result) {//返回数据根据结果进行相应的处理  
    8.                         if ( result.success ) {  
    9.                             $("#tipMsg").text("删除数据成功");  
    10.                             tree.deleteItem("${org.id}", true);  
    11.                         } else {  
    12.                             $("#tipMsg").text("删除数据失败");  
    13.                         }  
    14.                     }  
    15.                 });  

      这是在实际项目中的一段代码,type 是方式,默认是get;url是路径;data是你要发送的数据;success是成功回调;

    注意:这里我还是要强调,跨域运用的不是AJAX技术,而是jsonp.为什么有那么多人弄混淆?就是因为jQuery团队将jsonp的使用封装在了ajax里,所以,很多人搞错了,人俩其实并不认识的。。。

    
    
  • 相关阅读:
    jquery的动画函数animate()讲解一
    用js来实现页面的换肤功能(带cookie记忆)
    Extjs换肤+cookie皮肤记忆功能
    jquery换肤
    bootstrap的alert提示框的关闭后再显示问题
    jquery.cookie中的操作
    CSS中设置margin:0 auto; 水平居中无效的原因分析
    jQuery 遍历 json 方法大全
    jquery.min.map 404 (Not Found)出错的原因及解决办法
    AJAX 跨域请求的解决办法:使用 JSONP获取JSON数据
  • 原文地址:https://www.cnblogs.com/lichunjing/p/6549042.html
Copyright © 2011-2022 走看看