项目第五天-ajax

为什么要学习ajax?
1、登录的时候登录失败，一般网站是不会跳转页面的。
2、新增数据的时候，需要从数据库校验邮箱和手机号是否存在
一、什么是ajax?
ajax 页面局部刷新技术—>在不刷新整个页面的条件下，发送请求给后台，后台将结果返回给页面的技术。
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
二、使用最传统（js）的方式进行ajax请求

// 第一步：先创建对象
                var xmlhttp;
                if (window.XMLHttpRequest)
                {
                    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                    xmlhttp=new XMLHttpRequest();
                }
                else
                {
                    // IE6, IE5 浏览器执行代码
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                //第二步：发送请求
                xmlhttp.open("GET","/AjaxDemo/validatePhone?phone="+phone.value,true);
                xmlhttp.send();
                //第三步：响应返回回来的数据
                xmlhttp.onreadystatechange=function(){
                    if (xmlhttp.readyState==4 && xmlhttp.status==200){
                        alert(xmlhttp.responseText);
                    }
                }

之前A页面发送请求，请求要么跳转页面，要么打卡一个新的页面展示一个白板。Ajax页面局部刷新技术，A页面发送的请求，将来数据还会返还给A页面，不会打开一个新的页面。

三、使用jQuery发送ajax请求，使用最多。
1、使用$.get 发送get请求的ajax请求
$.get(url,回调函数) 回调函数：回头自动被调用的函数
function(data){
}
data 将来接收服务端返回回来的数据。

$.get("/AjaxDemo/validatePhone?phone="+phone,function(data){
                    //alert(data);
                    if(data=="1"){
                        $("#msg").html("<font color='red'>该手机号码已经存在</font>");
                    }else{
                        $("#msg").html("<font color='green'>该手机号码不存在，可用</font>");
                    }
                });

2、$.post
语法：$.post(URL,data,callback);
其中第二个参数是要传递给后天的数据，传递方式是json数据
{ key:value},一定要注意：后台一定要有doPost方法。

var data = {phone:phone};
                $.post("/AjaxDemo/validatePhone",data,function(data){
                    //alert(data);
                    if(data=="1"){
                        $("#msg").html("<font color='red'>该手机号码已经存在</font>");
                    }else{
                        $("#msg").html("<font color='green'>该手机号码不存在，可用</font>");
                    }
                });

3、$.ajax 发送ajax请求— 用的不是特别多，但是也有使用的场景
语法：jQuery.ajax([settings])
括号里面是一个数组，里面有很多的参数，我们不必知道所有的用法

$.ajax({
                    url:"/AjaxDemo/validatePhone",
                    type:"POST",
                    data:{"phone":phone},
                    success:function (data) {
                        if(data=="1"){
                            $("#msg").html("<font color='red'>该手机号码已经存在</font>");
                        }else{
                            $("#msg").html("<font color='green'>该手机号码不存在，可用</font>");
                        }
                    },
                    error:function(){
                        alert("但凡有失败的，都会展示我这个回调方法");
                    }
                });

$.ajax 虽然用法和$.get 以及$.post 相比要复杂，但是因为它里面有很多的其他参数，所以适应性更强。

四、JSON
JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法，类似 XML。—>传递数据
浏览器 服务器
———-》
《————-
在json出现之前，我们一般使用的都是xml xml非常不便于阅读，解析起来也很困难。
ajax 异步的js和xml
简单的数据，可以使用文本内容，但是复杂的数据
JSON 比 XML 更小、更快，更易解析。
JSON现在已经成为一个浏览器和服务器之间传递数据的必然选择，xml已经退出历史舞台。
语法格式：
JSON 语法是 JavaScript 对象表示语法的子集。

• 数据在名称/值对中
• 数据由逗号分隔
• 大括号 {} 保存对象
• 中括号 [] 保存数组，数组可以包含多个对象

代码演示：

    var stu={"name":"张三","age":19,"gender":true};
    var arr=[{"name":"张三","age":19,"gender":true},{"name":"李四","age":20,"gender":false}];
    console.log(stu.name);
    console.log(arr[1].name);
    for (var i = 0; i < arr.length; i++) {
        console.log(arr[i].age);
    }

有什么用？
ajax html 给 Servlet 传递json数据
Servlet 也可以给html传递 json数据。

Java代码如何编写JSON？ 难点
java编写json数据，需要使用第三方技术—-> fastjson/ jackson/ jsonlib 等技术都可以完成
java对象/list集合 —》 JSON字符串 jSON字符串—》java对象/list集合

Jackson的用法：
1、导入三个jar包

2、代码演示

package com.qfedu.servlet;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.qfedu.pojo.Student;
import org.junit.Test;
import java.util.ArrayList;
/**
 * 此类通过单元测试的方式给大家演示jackson的用法
 */
public class JsonTest {
    @Test
    public void testA() throws JsonProcessingException {
        ObjectMapper objectMapper = new ObjectMapper();
        //将一个对象转换为json字符串
        Student stu = new Student("老邢", 50, false);
        //   {"name":"老邢","age":50,"gender":false}
        // 使用jackson将一个对象转换为json
        String json = objectMapper.writeValueAsString(stu);
        System.out.println(json);
    }
    @Test
    public void testB() throws JsonProcessingException {
        ObjectMapper objectMapper = new ObjectMapper();
        //将一个list集合转换为json字符串
        ArrayList<Student> list = new ArrayList<>();
        list.add(new Student("老邢", 50, false));
        list.add(new Student("老闫", 22, true));
        list.add(new Student("老刘", 21, false));
        //  [{"name":"老邢","age":50,"gender":false},{"name":"老闫","age":22,"gender":true},{"name":"老刘","age":21,"gender":false}]
        // 使用jackson将一个对象转换为json
        String json = objectMapper.writeValueAsString(list);
        System.out.println(json);
    }
    // 演示将一个字符串转换为对象
    @Test
    public void testC() throws Exception {
        ObjectMapper objectMapper = new ObjectMapper();
        String json="{\"name\":\"老邢\",\"age\":50,\"gender\":false}";
        Student student = objectMapper.readValue(json, Student.class);
        System.out.println(student.getName());
    }
}

举例：
页面发送ajax请求，后台给页面传递json数据
我们后台给页面传递数据的时候：
resp.setContentType(“text/html;charset=utf-8”);
resp.getWriter().write(json);
将json字符串传递给浏览器，并且告诉浏览器，数据格式是text/html, 浏览器拿到数据之后，就会按照文本内容进行处理。
所以我们的ajax拿到的数据是字符串，所以我们需要将字符串转换为json才可以使用。

$.get("/AjaxDemo/getData",function(data){
                    //{"name":"老邢","age":50,"gender":false}
                    alert(data);
                    alert(typeof(data)); // 服务器传递过来的数据没有问题，但是类型是 string  ，json对象的话 object
                    // {"name":"老邢","age":50,"gender":false}
                    // "{"name":"老邢","age":50,"gender":false}"
                    var stu = eval("("+data+")");// 通过eval将字符串转化为json对象
                    $("#name").text(stu.name);
                    $("#age").text(stu.age);
                    $("#gender").text(stu.gender);
                });

另外一种处理方法：
告诉浏览器，我给你传递的是json数据。
resp.setContentType(“application/json;charset=utf-8”);
这样的话，我们在页面上拿到的数据就是json,可以直接获取里面的值。

五、使用ajax改造我们的登录功能
1、将之前的提交form表单的方式，修改为ajax

function ajaxLogin(){
            var username=$("#username").val();
            var password=$("#password").val();
            $.get("${pageContext.request.contextPath}/loginAjax?username="+username+"&password="+password,function (data) {
                if(data=='1'){
                    location.href="${pageContext.request.contextPath}/customer/show";
                }else{
                    $("#msg").text("登录失败，请检查账号密码是否正确");
                    //alert();
                }
            });
            return false;// 阻止默认提交行为
        }

2、修改我们的后台，将之前的跳转页面，修改为返回0还是1

@Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        System.out.println(username+","+password);

        boolean result = adminService.validateLogin(username,password);

        resp.getWriter().write(result?"1":"0");

    }

3、如果登录失败，需要有一个地方存放我们给用户的提示信息
<p style=”position: relative;“>
<span id=”msg” style=”color:red”></span>
</p>

4、需要注意的点：提交表单的按钮， 一定要返回false,否则ajax执行完毕之后，还会执行表单的提交，表单提交现在已经修改为了ajax提交，所以二者选最后即可，不可重复提交。
onclick=”return ajaxLogin()“

作业：
新增客户的时候，校验邮箱不能重复。