项目第五天-ajax

项目第五天-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:JavaScriptObjectNotation(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()“
作业：
新增客户的时候，校验邮箱不能重复。

JAVA共享