AJAX学习之路(四)

jQuery常用AJAX-API
目的:简化客户端与服务端进行局部刷新的异步通讯

  1. load函数
简单形式:(请求体无参数发送的话,load方法采用GET方式提交)
jQuery对象.load(url)
返回结果自动添加到jQuery对象代表的标签中间
如果是Servlet的话,采用的是GET方式
  复杂形式1:(如果请求体有参数发送的话,load方法采用POST方式提交)
$jQuery.load(url,sendData)
//sendData 是发送的参数,以JSON格式文本方式发送,使用POST方式发送,服务端能收到数据
 sendData = {key:value,key:value}; 
  复杂形式2:(如果请求体有参数发送的话,load方法采用POST方式提交)
$jQuery.load(url,sendData,function(backData,textStatus,ajax){... ...})
//function回调函数:当服务器传回数据将调用此函数
//其中参数三为function处理函数最多可以接收三个参数,含义如下
        第一个参数:服务端返回的数据,例如:backData               //是一个js对象
        第二个参数:服务端状态码的文本描述,例如:success、error、
        第三个参数:ajax异步对象,即XMLHttpRequest对象
        以上所有参数的名字可以任意,但必须按顺序书写,尽量做到见名知意
项目中一般只需要:backData               

ps:使用load方法时,自动进行编码,无需手工编码

2.指定方式使用ajax传输方式:.get.post

$.get(url,sendData,function(backData,textStatus,ajax){... ...})          
$.post(url,sendData,function(backData,textStatus,ajax){... ...})         
//backDate:
                //如果服务器返回html,即backDate就是string,不要解析
                //如果服务器返回json,即backDate就是object,要解析(js对象)   
                //如果服务器返回xml,即backDate就是object,要解析(js对象)    
注意:使用get或post方法时,自动进行编码,无需手工编码
$.post方法提交的数据直接类似表单提交,提交的数据量比$.get更大。一般推荐post提交

注意:在异步提交的方式下,form标签的action和method属性没有意义

3.使用 jQuery.ajax(url,[settings])
返回值:XMLHttpRequest

 $.ajax(
            {
              type:"POST",
              url:"${pageContext.request.contextPath}/findCityByProvinceRequest?id="+new Date().getTime(),
              data:{"key":value},                              //json格式数据
              success:function(backData,textStatus,ajax){}     //回调函数
            }
        );

回调函数中:
第一个参数:服务端返回的数据,例如:backData               //是一个js对象
第二个参数:服务端状态码的文本描述,例如:success、error、
第三个参数:ajax异步对象,即XMLHttpRequest对象

附1: jQuery对象.serialize()

    作用:自动生成JSON格式的文本
    使用:将form中包含的name属性提取出来,自动生成json文本
    var sendData = $("form").serialize();
    注意:为每个jQuery对象设置一个name属性,因为name属性会被认为请求参数名
    注意:必须用<form>标签元素
    适用:如果属性过多,强烈推荐采用这个API 

附2:jQuery解析XML

展开阅读全文

没有更多推荐了,返回首页