JavaEE基础(六)Ajax

Java基础（六）Ajax

Ajax简介

在之前使用form进行提交，经过servlet返回数据后才会刷新。这会使整个页面刷新，这在某些方面会很不好，所以使用Ajax进行局部刷新（也就是整个页面的其他部分不变，页面也不会跳转，只对局部进行更新）

Ajax用于局部刷新，Ajax的实现方式有两种：js的实现方式，jQuery的实现方式。

Ajax的JS实现方式

Ajax的实现通过js中类XMLHttpRequest的对象实现对于局部的访问servlet、得到响应并执行响应成功后的回调函数。

XMLHttpRequest对象的方法：

• open（提交方式，服务器地址，true）准备建立与服务器那个地址的连接。

  提交方式就是：get、post。服务器地址是：服务器地址中url。true是执行局部刷新，false就不进行局部刷新。

• setRequestHeader（key，value）设置头信息。

  • get方式的头信息：不需要设置。
  • post方式的头信息：
    • 请求中包含文件上传：setRequestHeader(“Content-Type”, “mutipart/form-data”);
    • 请求中不包含文件上传：setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

• send（参数）发送请求，并将参数值拼接到open中的url中。

  • get方式：send（null），参数值写在url中。
  • post方式：send（参数），参数是键值对等号形式例如："sno=1&sname=‘zs’"

发送过去后在servlet中获取参数值使用getParameter。

XMLHttpRequeset对象的属性：

• readyState：请求状态。
  • 0：XMLHttpRequest对象没有初始化
  • 1：对象开始发送请求完成了open及相关资源的准备
  • 2：对象请求发送完，完成了send，但没有收到响应
  • 3：对象收到响应，但是没有接受完响应
  • 4：对象接受完响应，直到4才是一次完整的访问。
• status：响应状态。
  • 200：服务器正常
  • 400：无法找到请求的资源
  • 403：没有访问权限
  • 404：访问资源不存在
  • 500：代码错误
• onreadystatechange：响应完成后调用的回调函数（只用写函数名即可）。
• responseXML：响应完成后接受的数据是xml格式。
• responseText：响应完成后接受的数据是text格式。

例如：

手机号：<input type="text" id="mobile"/><br/>
<input type="button" value="点击查看是否有此手机号" onclick="check()"/>

<script>
	function check(){
        var mobile = document.getElementByID("mobile").value;
        xml = new XMLHttpRequest();
        xml.open("post", "MyServlet", "true");
        xml.onreadystatechange = callBack;
        xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xml.send("mobile=" + mobile);
    }
    function callBack(){
        //检查状态，在请求响应没有完成（也就是说在请求响应过程中）会一直进行请求响应，但是我们只需要的是请求状态是4，响应状态是200的完成时刻。
        if(xml.readyState == 4 && xml.status == 200){
            var isExists = xml.responseText;
            alert(isExists);
        }
    }
</script>

值得注意的是：在请求响应过程中会一直进行客户端服务端之间的请求响应，而不是在客户端send后就只有一个响应，这点切记！！！

@WebServlet(name = "MyServlet", urlPatterns = "/MyServlet")
public class MyServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        String mobile = request.getParameter("mobile");
        PrintWriter out = response.getWriter();
        if("12345678910".equals(mobile)){
            //write()、print()都可以。println才是进行页面显示的函数
            out.write("true");
        }
        else{
            out.write("false");
        }
        //可以进行close，因为这是客户端服务端之间进行的数据交换（数据已经备份到网络中进行发送）如果要是都在服务端进行返回out难么就不可以使用close（因为用的是一个out对象）
        out.close();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

Ajax的jQuery实现方式

在工程上一般使用jQuery的Ajax，便捷。

jQuery需要在jsp中导入jQuery包。

第一种方式（既可以是get、也可以是post）

$.ajax({
    //相当于配置xmlHttpRequest的一些参数,open(method, url, true),send(data)
    url:服务器地址,
    请求方式:get|post,
    data:请求数据,
        
    //下面两个相当于回调函数
    seccess:function(result, testStatus){
        //请求成功
        //result是请求成功后服务端响应给客户端的数据，相当于xmlHttpRequest.responseText
        //testStatus是状态
    },
    error:function(xhr, errorMessage, e){
        //请求失败
    }
})

实例：

$.ajax({
    url:"TestAjax",
    type:"post",
    data:"mobile="+$mobile,
    
    success:function(result, testStatus){
        if(result == "true")
            alert("注册成功");
        else
            alert("注册失败");
    },
    error:function(){
        alert("服务端异常");
    }
})

第二种方式：$.get()、$.post()（确定了是get还是post）

与第一种方式的区别：

1. 没有大括号，直接在小括号中写代码。
2. 没有键值对代码。（例如第一种方式在写代码的时候是url:xxxx这样的键值对）没有键值对会造成混乱，所以这种方式严格要求顺序不能乱。
3. 没有error处理函数。

$.get(
	服务器地址,
    请求方式,
    success的function(){
    
    },
	预期返回值类型（string\xml）
)

$.post(
	服务器地址,
    请求方式,
    success的function(){
    
    },
	预期返回值类型（xml\text）
)

实例：

$.get(
	"TestAjax",
    "mobile="+$mobile,
    function(result, testStatus){
        if(result == "true")
            alert("注册成功");
        else
            alert("注册失败");
    },
    "text"
)

Ajax处理JSON数据

JSON

JSON是一种数据格式（与关系型数据库类似，只不过关系型数据库的数据是以行列形式组织的，JSON的数据是以键值对组织的。）。

{key1:value1, 
 key2:value2, 
 key3:value3}

key是字符串形式。

JSON在语言中的表示

JavaScript可以直接解析JSON数据，但是Java不行（需要引入jar包创建JSON对象）。

六个包：

• commons-beanutils-1.7.0.jar
• commons-collections-3.2.1.jar
• commons-lang-2.6.jar
• commons-logging-1.1.3.jar
• ezmorph-1.0.6.jar
• json-lib-2.4-jdk15.jar

在Java中一般是以字符串形式表示JSON数据。

String json = "{\"key\":\"value\"}";//值为字符串
String json = "{\"key\":value}";//值为对象或数

在JavaScript中JSON数据可以直接表示

var json = {"name":"zs", "age":23};

处理（JSON数据是服务端给客户端传的数据）

为什么需要JSON？

因为在使用out输出流对象传给客户端的数据只能有一个，客户端在responseText时也只能或取一个数据，局限性太大。（由此可以想到传一个对象其中包含许多数据，所以使用JSON对象传输不同类型的数据。）

客户端：

<script>
	function testJSON(){
        //这是另一个get的提交方式，会解析JSON
        $.getJSON(
            "MyServlet",
            function(result){
                //以流的方式传递到客户端的，传递的是以java形式存在的JSON。js不一定可以接受所以需要转换成一个js可以识别的JSON）。使用eval进行转换。
                var json = eval(result);
                for(var key in json){
                    alter(key);//下标，也就是key
                    alter(json[key]);//值
                }
                /*或用each
                $.each(json, function(i){
                    alter(i);//下标，也就是key
                    alter(json[i]);//值
                })
                */
            }
        )
    }
</script>

服务端：

response的PrintWriter out.write（）与PrintWriter out.print（）都具有作为流对象传输数据的功能。但是print可以传输Object对象，write不可以。

值得注意的时：**不要将out.print()与out.println()混淆！！！。**前者是传输，后者是显示。

@WebServlet(name = "MyServlet", urlPatterns = "/MyServlet")
public class MyServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        
        //也可以不使用json对象。可以使用json字符串，因为JavaScript会自动解析json字符串
        JSONObject json = new JSONObject();
        json.put("sno", 1);
        json.put("sname", "zs");
        
        out.print(json);
        out.close();
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}