1. 云栖社区>
  2. >
  3. 正文

总结jquery中的六种Ajax数据交互应用

作者:用户 来源:互联网 时间:2016-12-29 10:54:21

ajax数据函数xmlhttprequest参数格式

总结jquery中的六种Ajax数据交互应用 - 摘要: 本文讲的是总结jquery中的六种Ajax数据交互应用, jquery中的几种ajax请求,包括最底层的方法$.ajax(),第二层的load()、$.post()、$.ajax(),第三层的$.getJSON()、$.getScript()。  代码如下 复制代码 &

jquery中的几种ajax请求,包括最底层的方法$.ajax(),第二层的load()、$.post()、$.ajax(),第三层的$.getJSON()、$.getScript()。

 代码如下 复制代码
<script type="text/javascript">
//jquery中的几种ajax请求
function ajaxRequest(){

    /*
       $.ajax();最底层的方法
       load()、$.post()、$.ajax();第二层
       $.getJSON(); $.getScript();//第三层
     /*
/*******************************load方法********************************/
        //url地址/data发送数据json格式键值对/回调函数 load通常用
        //来获取web上静态数据文件,并不能体现ajax的全部价值
       load(url,[data(key/value)],[callback]);     
       //1.load能将远程html代码添加到dom中   
       $("#text").load("test.html");
       //2.load 筛选载入html文档
       $("#text").load("test.html .para");
       //3.传递方式get
       $("#text").load("test.php",function(){
        //...
       });
       //传递方式post
       $("#text").load("test.php",{name:"rain",age:"22"},function(){
       //...
       });
       //4.回调函数
       $("#text").load("test.html",function(responseText,textStatus,XMLHttpRequest){
       //responsetText 请求返回内容
       //textStatus 请求状态,success、error、notmodified、timeout 4种
       //XMLHttpRequest对象
       });
      
/********************************************get方法************************************************/
        //$.get();方法使用GET异步请求
        /*url地址/data发送数据json格式键值对/calback回调函数/type返回类型()
          回调函数有两个 function(data,textStatus)data返回来的可以是xml、json文件、html片段
         textStatus请求状态:success、error、notmodified、timeout 4种
         textStatus返回success才会被调用 这一点跟load不同
        */
        $.get(url,[.data],[.calback],[.type]);
        $.get("test.action",{name:"zhangsan",age:"10"},function(data,textStatus){
           
        /*...最后一个参数表示返回的是json格式
            json、格式非常严格{"name":"张三","age","20"} 必须是这种格式而不是
            {name:"zhangsan",age:"10"}任何一个{}不匹配获取缺少逗号,都会导致页面上的脚本终止运行
                                       甚至带来其他更严重的负面影响当然在不就的将来javascript
            xml跟json一样容易解析,并且解析的xml将会成为主流的数据交换格式,不过在它之前json
                                       依然有很强的生命力
        */
        },"json");
/********************************************post方法************************************************/  
        /*
       
        $.post()请求 他与get之间的区别
        1、GET会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容
        发送给WEB服务器。当然,在Ajax请求中,这种区别对用户是可见的。
       
        2、GET方式对传输的数据大小限制(通常不能大于2KB),而使用POST方式传递
        数据量要比GET方式大的多(理论上不受限制)

        3、GET方式请求的数据会被浏览器缓存起来,因此其他人可以从浏览器的历史记录
        中读取到这些数据,例如账号、密码等,在某种情况下,GET方式会带来严重的安全
        性问题,而POST方式相对来说可以避免这些问题

        4、GET方式和POST方式传递的数据在服务器上获取也是不相同。在PHP中,GET方式
        的数据可以用$_GET[]获取,而POST方式可以用$_POST[]获取,两种方式都可以用
        $_REQUEST[]来获取。
       
        $.post(url,[.data],[.calback],[.type]);
        */

        $.post("test.action",{name:"zhangsan",age:"10"},function(data,textStatus){
        //...........另外load方法有参数传递时,会使用post请求发送请求
        },"json");

/********************************************ajax方法************************************************/ 
        /*
         使用load $.get() $.post() 方法完成一些常规的Ajax程序,要编写一些复杂的Ajax程序,
        那么就的用到$.ajax();不仅能同时实现与load、get、post方法实现同样的的功能,而且
        还可以设定beforeSend(提交前回调函数)、error(请求失败处理)、success(请求成功
        后处理)以及complete(请求完成后处理)回调函数,通过这些回调函数,可以给用户更多
        的Ajax提示信息。另外,还有一些参数,可以设置Ajax请求的超时时间或者页面的最后更改状态
        等。
       
        ajax中的参数详解
        url:(默认为当前网页地址)发送请求的地址
        type:请求的方式 post、get默认为get,注意http请求的方法,例如PUT和DELETE也可以使用,
        但仅有部分浏览器支持
        timeout:设置请求超时间(毫秒),此设置将覆盖$.ajaxSetup()方法的全局变量
        data:发送到服务器的数据可以在URL后面也可以使用json格式key/value对
        dataType:返回数据类型 xml、html、script、json、jsonp、text
        beforeSend:发送请求修改XMLHttpRequest对象的函数,例如添加自定义HTTP头、
        在beforeSend中如果返回false中取消本次ajax请求、XmLHttpRequest对象唯一的参数、
        function(XMLHttpRequest){
        this;//调用贝齿Ajax请求传递的options参数
        }
        complete:请求完成红调用的回调函数(请求成功失败均调用)
        success:请求成功调用的回调回调函数,有两个参数。1.由服务器返回,并更具dataType参数进行
        处理后的数据。2.描述状态的字符串
        function(data,textStatus){
        //data可能是xmlDac、jsonObj、html、text等等
        this;//调用本次ajax请求传递的options参数
        }
       
        error:请求失败时调用的函数,该函数有3个参数,即XMLHttpRequest对象、错误信息、捕获的错误
        对象(可选)。Ajax时间函数如下:
        function(XMLHttpRequest,textStatus,errorThrown){
        //通常情况下textStatus河errorThown只有其中一个包含信息,
        this;调用本次Ajax请求是传递的options参数
       
        }
        global:默认为true,表示是否触发全局Ajax事件。设置为false将不会触发全局Ajax事件,AjaxStart或者
        AjaxStop可用控制各种Ajax事件
        */
        $.ajax({
            type:"POST",//请求方式
            url:"test.html",//url访问地址
            data:{name:"战三",age:"11"}//传递参数
            dataType:"json",//返回值类型
            success:function(data){//成功数据处理
            //data...数据处理
           
            },
            error:function(msg){//失败处理
                alert(msg);
            }
           
        });
/********************************************ajax方法************************************************/         
        /*
        只用用post,get 传递参数 如果一个表单中的数据多了 就有点麻烦了
        序列化元素serialize();他将dom对象序列化成一个字符串
        $("#form1").serizlize();
        $.post("this.html",$("#form1").serizlize(),function(data){
        //处理...
        })
   
        serizlizeArray方法返回不是一个字符串,而是将dom元素序列化后返回一个就送格式的数据,
        $.param()方法:他是serizlize()方法的核心,用来对一个数组或对象按照kay/value进行序列化
        var obj={a:1,b:2,c:3};
        var k=$.param(obj);
        alert(k);//输出a=1&b=2&c3
        */
/********************************************getScript方法************************************************/

        /*
        有时候 在页面上初次加载时没有必要将所有的js文件都加出来 可以动态的创建加载js文件
        可以使用$.getScript();
        */
        $("#send").click(function(){
            $.getScript("js.js");
        });
/********************************************getJSON方法************************************************/

        /*
            $.getJSON()用于加载JSON文件 跟getScript()用法一样
        */
        $("#send").click(function(){
            $.getJSON("js.json");
        });           
        $("#send").click(function(){
            $.getJSON("js.json",function(data){
                //data数据处理
            });
        });   

    }
}
</script>

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索ajax , 数据 , 函数 , xmlhttprequest , 参数 格式 jquery ajax数据交互、jquery ajax与php交互、jquery ajax 与c 交互、jquery ajax交互、jquery ajax应用实例,以便于您获取更多的相关知识。

弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

现在注册,免费体验40+云产品,及域名优惠!

云服务器9.9元/月,大学必备