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里,所以,很多人搞错了,人俩其实并不认识的。。。

    
    
  • 相关阅读:
    打造基于CentOS7的xfce最简工作环境
    Linux下C程序的编辑,编译和运行以及调试
    修正 XE6 TListView 上方 SearchBok 右边的清除钮显示
    TabControl 显示彩色的图示 (XE6 Firemonkey)
    TSwitch 中文简繁显示支持(XE6 Android)
    改变 TMemo 的背景颜色 (Firemonkey)
    修正 XE5 Android 键盘三个问题
    Delphi 收藏
    展示 Popup 的使用方法
    ListView 下拉更新 (支持 Android)
  • 原文地址:https://www.cnblogs.com/lichunjing/p/6549042.html
Copyright © 2011-2022 走看看