Ajax编程详解

1.传统请求和异步请求

传统请求：基于超级链接、地址栏、form表单、location.href 发起的请求全部是传统请求。

特点：请求之后，刷新整张页面。

缺点：由于刷新了整张页面，用户操作被中断，造成大量网络流量的浪费。

异步请求：基于ajax发起的请求都是异步请求。

特点：多个请求并行发生，请求之间互不影响，请求之后页面不动，刷新页面的局部

2.什么是Ajax

Ajax即 Asynchronous Javascript And XML（异步JavaScript和XML）。他不是一种新的编程语言，而是一种通过异步实现网页的局部刷新技术。

3.Ajax的核心对象

XML HttpRequest对象是一个javascript对象，存在着浏览器差异，简称xhr对象

1） IE（内核）  new ActiveXObject("Microsoft.XMLHTTP")

2） Webkit（内核） new XMLHttpRequest()

4.Ajax的编程思路

1.创建xhr对象

var xhr;
if(window.XMLHttpRequest){
    //true  Webkit内核
    xhr = new XMLHttpRequest();
}else{
    //false  IE内核
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

2.发送请求并传递参数

xhr.open("GET|POST","url?参数"); 
xhr.send(null);

3.处理响应并渲染页面

xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){
    console.log(xhr.resonseText);
    }
}

5.发送GET方式请求

        //1. 创建xhr对象
        var xhr ;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        }else{
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.发送请求,并传递参数
        xhr.open("GET", "/ajax_day2/test?name=zhangsan");
        xhr.send();
        //3.处理响应
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4 && xhr.status==200){
                console.log(xhr.responseText);
            }
        }

6.发送POST方式请求

        //1. 创建xhr对象
        var xhr;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.发送请求,并传递参数
        xhr.open("POST", "/ajax_day2/test");
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        xhr.send("name=zhangsan");
        //3.处理响应
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log(xhr.reponseText);
            }
        }

7.Ajax的数据交换机制

JSON （JavaScript Object Notation，JS对象标记）是一种轻量级的数据交换格式。

1.如果服务端响应的不再是字符串而是对象或者是集合类型时，无法直接将对象响应给客户端。

     如：User   List<User>   Map<String,User> 此时需要将对象转为json格式字符串响应给ajax。

2.如何将对象转为json格式的字符串

User user = new User("21","chenyn",23,123.0);
String userJson = JSONObject.toJSONString(user); // 需要导入阿里的fastjson依赖 json
response.setContentType("application/json;charset=UTf-8");
PrintWriter writer = response.getWriter();
writer.out(userJson);

3.前端的ajax函数中应该如何处理json格式的字符串

xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var json = xhr.responseText;// json
        var userObj = eval("(" + xhr.responseText + ")"); //转为js对象" 
        console.log(userObj.id);//
        console.log(userObj.name);
    }
}

4.处理json字符串中的日期格式问题

var userJson = JSONObject.toJsonStringWithDateFormat(user,"yyyy-MM-dd");

8.JQuery对Ajax的封装

前提是先引入对应JQuery的核心JS文件

1.JQuery提供了一个全局函数

$.ajax({
    type: "POST|GET",
    url: "",
    data: "name=张三|{key:value}",
    dataType: "JSON",
    success: function (result) {
        console.log(result);
    }
});

2.发送GET方式的异步请求

$.get(url,data,function(result){},"JSON"); 发送请求、传递参数、处理响应并指定相应的数据类型 
$.get(url);  发送get方式请求、不传递参数、不处理响应
$.get(url,data);  发送get方式请求、传递参数、不处理响应
$.get(url,function (result) {});  发送get方式请求、不传递参数、处理响应
或者：$.getJSON(url,function(result){ });

3.发送POST方式的异步请求

$.post(url,data,function(result){},"JSON")；
其他的与GET方式类似

9. 案例

        $(function () {

            $("#loginButtonId").click(function () {

                var username = $("#form-username").val();
                var password = $("#form-password").val();
                var code = $("#form-code").val();

                $.ajax({

                    type: "post",
                    //dataType: "json",
                    data: {username:username,password:password,code:code},
                    url: "${pageContext.request.contextPath}/admin/login",
                    success:function (data) {
                        if('登录成功'  == data){
                            window.location.href = "${pageContext.request.contextPath}/index.jsp"
                        }else{
                            //empty是将标签内的值清除，标签还在，remove标签就不在了
                            $("#msgDiv").empty();
                            $("#msgDiv").append(data);
                        }
                    },
                    error:function () {
                        alert("出错了");
                    }
                });

            });

        });

注意：

1.当后台响应json格式数据时如果指定了响应类型为application/json时，jquery封装的ajax会自动转为js对象|数组。

2.如果在前台发送ajax请求时明确指定dataType属性为JSON时，即使后台不设置响应类型结果也会自动转为js对象|数组。

3.推荐前台设置响应类型，服务器端同样设置响应类型，结果一定为js对象|数组。

4.如果发送的请求没有响应结果void，或者响应结果不是JSON类型数据，是String或者其他类型数据，则前台一定不要指定 dateType为JSON，否则会报错,会进入error function()中，不会进入success function()中。

5.ajax可以发送同步请求：同步请求发送之后，在请求响应完毕之前浏览器处于锁定状态。