ajax

 

ajax

   ajax全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分。不是新的编程语言，而是一种使用现有标准的新方法。

同步请求和异步请求

异步请求

        通过js代码发起异步请求，属于局部更新（页面只有部分内容重新加载）。

同步请求

         每次从浏览器中发送请求（点击超链接的都是同步请求）。属于全局更新。        

注意

       对于ajax来说，就可以异步请求也可以同步请求，通过设置async即可。如果是异步请求，如果后台有延迟，很可能造成接收不到返回的数据。

     

jQuery中的ajax函数

       格式如下：ajax里面包含一个或多个键值对形式

$.ajax({name:value, name:value, ...});

      有如下键值对：

名称	值/描述
async	布尔值，表示请求是否异步处理。默认是 true。true表示异步请求，false表示同步请求。
beforeSend	发送请求前运行的函数。
cache	布尔值，表示浏览器是否缓存被请求页面。默认是 true。
complete	请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。
contentType	发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
context	为所有 AJAX 相关的回调函数规定 "this" 值。
data	规定要发送到服务器的数据。
dataType	预期的服务器响应的数据类型。
error	如果请求失败要运行的函数。
global	布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。
ifModified	布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。
jsonp	在一个 jsonp 中重写回调函数的字符串。
jsonpCallback	在一个 jsonp 中规定回调函数的名称。
password	规定在 HTTP 访问认证请求中使用的密码。
processData	布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
scriptCharset	规定请求的字符集。
success	当请求成功时运行的函数。
timeout	设置本地的请求超时时间（以毫秒计）。
traditional	布尔值，规定是否使用参数序列化的传统样式。
type	规定请求的类型（GET 或 POST），默认为GET
url	规定发送请求的 URL。默认是当前页面。
username	规定在 HTTP 访问认证请求中使用的用户名。
xhr	用于创建 XMLHttpRequest 对象的函数。

一个简单的案例

<script type="text/javascript">
    $(".disSC").click(function(){
        //设置要分配的人员信息
        $.ajax({
            url:"${pageContext.request.contextPath}/user/ajaxAllUserByRoleId.do?rId=3",
            type:"get",
            success:function(data){
                //data是返回的数据，是字符串类型,将字符串转换为JSON对象
                data = JSON.parse(data);
                var strHtml="";
                for(var i = 0; i < data.length; i++){
                    var uName = data[i].uName;
                    var uId = data[i].uId;
                    var uAccount = data[i].uAccount;
                    //拼接，设置用户id和用户名称
                    strHtml+="<option value='"+uId+"'>账户"+uAccount+"："+uName+"</option>";
                }
                $(".form-control").html(strHtml);
            }
        });
    });
</script>

请求数据类型

• 请求数据为form表单提交数据的格式

           使用$("form").serialize()，将表单中所有数据序列化为key=value&key=value&key=value...的形式。如下所示：

$("#submit").click(function(){
    //获取到表单提交的数据
    var str = $("form").serialize(); // serialize()只能是form表单才有的方法
    $.ajax({
        url:"login.do?"+str,
        ...
    })
});

• 请求参数是JSON对象

          请求参数如：{"name":"admin", "password":"123"}JSON形式，使用如下：

 $("#submit").click(function(){
    //获取到表单提交的用户名和密码数据
    var uName = $("#login_msg input").eq(0).val();
    var uPassword = $("#login_msg input").eq(1).val();
    //创建JSON数据对象
    var str = {"uName":uName, "uPassword":uPassword,"remember":remember};
    $.ajax({
        url:"login.do",
        data:str,
        ...
    })
});

• 请求参数是JSON格式的字符串

         使用JSON.stringify(xxx)将JSON对象转换为JSON格式的字符串。请求参数是JSON格式字符串如下所示：

 $("#submit").click(function(){
    //获取到表单提交的用户名和密码数据
    var uName = $("#login_msg input").eq(0).val();
    var uPassword = $("#login_msg input").eq(1).val();
    //创建JSON数据对象
    var str = {"uName":uName, "uPassword":uPassword,"remember":remember};
    $.ajax({
        url:"login.do",
        data:JSON.stringify(str),
        ...
    })
});

      在 controller中获取数据的方式, 需要使用注解@RequestBody，如下所示：

@RequestMapping("login.do")
public String login(@RequestBody User user ) {
    ...
}

响应请求返回数据

       后端Controller类响应请求返回数据有两种形式：

• 返回值是List和Object

         会自动将返回值转换为JSON格式的字符串，如下所示：

@RequestMapping("allUserAjax.do")
@ResponseBody
public List<User> getAllUsers(int roleId){
    return uService.getUsers(roleId);
}

• 返回值是String

       需要拼出一个JSON格式的字符串，如下所示：

@RequestMapping("update.do")
@ResponseBody
public String update(){
    //说明，可以返回多个key-value格式的数据，返回的是{"update":true}
    return  "{\"update\":true}" ;   
}
               
@RequestMapping("update.do")
@ResponseBody
public String update(){
    //返回的就是一个字符串
    return  "abc";  
}

 

遍历JSON对象数据

      jQuery的ajax得到的响应数据是JSON格式的字符串数据，需要将其转换为JSON对象。如下所示：

$("xx").click(function(){
    //调用发送异步请求的函数
    $.ajax({
        url:"xxx",   //请求地址
        data:{...},   //请求参数
        type:post/get,
        dataType:"json",
        //请求成功（返回状态码为200）后执行的函数。data就是响应的数据
        success:function(data){  
            //data是字符串形式的JSON数据，将其转换为JSON对象
            data = JSON.parse(data);
        }    
    })
});