Java基础入门day62

day62

AJAX

概念

AJAX： Asynchronous Javascript And XML

• AJAX是一种无需重新加载整个网页的情况下，能够更新部分网页的技术

• AJAX是一种用于创建快速动态网页的技术

• 通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新

• 传统的网页如果需要更新内容，必须要重新加载整个网页，而AJAX不需要

工作原理

工作原理图

AJAX案例

使用AJAX来实现一个判断用户名是否存在的案例

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/5/31
  Time: 9:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    



​
  username: 

​
  password: 

​
  

​

其中open方法中的三个参数：

1. 请求方式，一般是get或者post

2. 请求的url，这个url将交给后端进行处理

3. 是否是异步，使用AJAX一般都是期望使用异步，所以传递的参数为true

该open方法中的第二个参数url的值为checkUser，那么会将请求交给checkUser所对应的servlet，还有问号传参

只有真正指向了XMLHttpRequest对象的send方法才真正将请求交给了后端

后端将执行checkUser所对应的Servlet

package com.saas.day62;
​
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
​
@WebServlet("/checkUser")
public class CheckUserServlet extends HttpServlet {
​
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
​
​
        String username = req.getParameter("username");
​
        if("admin".equalsIgnoreCase(username)){
            resp.getWriter().write("1");
        }else{
            resp.getWriter().write("0");
        }
    }
}

该Servlet中动态拿到用户从前端传递过来的username，拿到username与后台数据库进行比对（当前案例是模拟）

如果用户名存在则使用HttpServletResponse对象的getWriter方法的write方法将1写给前端，如果不存在则将0写给前端

这样就又回到了Registry.jsp页面

来到的AJAX的第四部，解释XMLHttpRequest对象的responseText可以获取到这个1或者0

通过获取到的1或者0动态更新当前页面的span内容，让它正确显示用户的提示信息

XMLHttpRequest

创建对象

XMLHttpRequest对象是AJAX的基础

所有的现代浏览器都支持该对象，新版本直接new关键字可以创建，老版本（IE5或者IE6）需要使用ActiveObject

该对象用于在后台与服务器交换数据。

var xhr = new XMLHttpRequest();                     //  主流浏览器都支持
var xhr = new ActiveXObject("Microsoft.XMLHTTP");   //  ie5或者ie6

    var xhr ;
​
    if(window.XMLHttpRequest){          //  主流浏览器
        xhr = new XMLHttpRequest();
    } else{                             //  ie5或者ie6
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

XMLHttpRequest请求

如需将请求发送到服务器，我们使用XMLHttpRequest对象的open()和send()方法

xhr.open(method, url, async);
xhr.send();

open方法

参数	描述
method	GET或者POST，代表请求方式
url	请求在服务器上的位置
async	是否是异步，true为异步，false为同步

send（）方法将请求发送到服务器

readyState

• 每当readyState改变时，就会触发onreadystatechange事件

• 在onreadystatechange事件中，我们规定当服务器响应已做好处理的准备是所执行的任务

• readyState属性存有XMLHttpRequest对象的状态信息

• 当readyState值为4时status为200时，表示响应已就绪

status的值的对照表

响应码	描述
200	交易成功
404	请求资源未找到
500	服务器内部错误
405	请求方式不正确

readyState

readyState值	描述
0	请求未初始化
1	服务器连接已建立
2	请求已接收
3	请求处理中
4	请求已完成且响应已就绪

XMLHttpRequest响应

如需获取来自服务器的响应，可以使用XMLHttpRequest对象的responseText或者responseXML属性

属性	描述
responseText	获取字符串形式的响应数据
responseXML	获取XML格式的响应数据

回调函数

回调函数时一种以参数形式传递给另一个函数的函数

该函数调用包含URL以及发生onreadystatechange事件时执行的任务

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/5/31
  Time: 9:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    



​
  username: 

​
  password: 

​
  

​

JSON

简介

JSON： JavaScript Object notation，js的对象标记，是一种轻量级的数据交换格式。

完全独立于编程语言的文本格式来存储和表示数据

简洁、清晰的层次结构使得JSON成为理想的数据交换语言

易于阅读和编写，同时也易于机器解析和生成，并有效地提高网络传输效率

相对于xml格式会显得更加简单

    
        9527
        zhouxingxing
        99
        
            1999
            11
            11
        
    
    
        9527
        zhouxingxing
        99
    
    
        9527
        zhouxingxing
        99
    
    
        9527
        zhouxingxing
        99
    
    
        9527
        zhouxingxing
        99
    

相较于以上的xml格式的数据，如果使用JSON，将以如下方式呈现：

[
    {sid: 9527, name: "zhouxingxing", score:99, birth:{year: 1999, month: 11, day: 11}},
    {sid: 9527, name: "zhouxingxing", score:99, birth:{year: 1999, month: 11, day: 11}},
    {sid: 9527, name: "zhouxingxing", score:99, birth:{year: 1999, month: 11, day: 11}},
    {sid: 9527, name: "zhouxingxing", score:99, birth:{year: 1999, month: 11, day: 11}},
    {sid: 9527, name: "zhouxingxing", score:99, birth:{year: 1999, month: 11, day: 11}}
]

语法

• []代表的时JSON数组

• {}代表的时JSON对象

• ""表示属性名或者字符串类型的值

• ：表示属性和属性值之间的间隔符

• ，代表多个属性的间隔或者时多个元素的间隔

FastJSON

FastJSON是一个Java库，可以将Java对象转换成JSON格式，也可以将JSON格式的字符串转换为Java对象

该类库提供了toJSONString（）和parseObject（）方法将Java对象与JSON对象相互转换

package com.saas.test;
​
import com.alibaba.fastjson.JSON;
import com.saas.entity.Birth;
import com.saas.entity.Student;
​
import java.util.ArrayList;
import java.util.List;
​
public class TestJSON01 {
​
    public static void main(String[] args) {
        Student s = new Student();
​
        s.setSid(1);
        s.setName("张三");
//        s.setAge(20);
        s.setSex("男");
        s.setAddress("北京");
        s.setPhone("123456789");
​
        Birth birth = new Birth();
        birth.setMonth(1);
        birth.setDay(1);
        birth.setYear(2000);
​
        s.setBirth(birth);
​
        System.out.println(s);
​
        System.out.println("==============================");
​
        String stuJson = JSON.toJSONString(s);
        System.out.println(stuJson);
​
        System.out.println("==============================");
​
        Student s2 = JSON.parseObject(stuJson, Student.class);
        System.out.println(s2);
​
        System.out.println("==============================");
​
        List stus = new ArrayList<>();
​
        stus.add(s);
        stus.add(s2);
​
        String stusJson = JSON.toJSONString(stus);
        System.out.println(stusJson);
​
        System.out.println("==============================");
​
        List stus2 = JSON.parseArray(stusJson, Student.class);
        System.out.println(stus2);
    }
}

该FastJSON的实现需要依赖于fastjson的第三方jar