Web学习历程记录（十四）——ajax&json

最新推荐文章于 2024-03-28 23:58:10 发布

萝北大芋头

最新推荐文章于 2024-03-28 23:58:10 发布

阅读量170

点赞数

分类专栏：笔记文章标签： ajax

本文链接：https://blog.youkuaiyun.com/qq_49658603/article/details/108941031

版权

笔记专栏收录该内容

33 篇文章

订阅专栏

本文介绍了AJAX技术的基本概念，包括其工作原理、应用场景，并详细展示了如何使用原生JS及jQuery库来实现AJAX请求，同时提供了用户名异步校验的实际案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ajax

概述

ajax是指一种创建交互式网页应用并开发技术
ajax是一种用于创建快速动态网页的技术
可以使网页实现异步更新，意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

应用

步骤

创建异步请求对象
打开连接
发送请求
设置监听对象改变所触发的函数，处理结果

js的ajax

get请求方式的入门

<body>
<input type="button" value="跳转get" onclick="ajaxDemo()">
</body>
<script>
    function ajaxDemo(){
        var xmlHttp = null;
        if(window.XMLHttpRequest){
            xmlHttp = new XMLHttpRequest();
        }
        else if(window.ActiveXObject){
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlHttp.open("GET","../servletDemo?username = zs")
        xmlHttp.send();
        xmlHttp.onreadystatechange = function(){
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                var result = xmlHttp.responseText;
                alert(result);
            }
        };
    }
</script>

post请求方式的入门

<body>
<input type="button" value="跳转post" onclick="ajaxdemo2">
</body>
<script>
    function ajaxdemo2() {
        var xmlHttp = null;
        if(window.XMLHttpRequest){
            xmlHttp = new XMLHttpRequest();
        }
        else if(window.ActiveXObject){
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlHttp.open("POST","../servletDemo")
        xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xmlHttp.send("username=zs&&password=123456");
        xmlHttp.onreadystatechange = function () {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                var result = xmlHttp.responseText;
                alert(result);
            }
        };
    }
</script>

异步请求的对象XMLHttpRequest

不同的浏览器对该对象的创建的方式不一样，较早的浏览器创建这个对象的时候将这个对象封装到ActiveXObject额插件中，新的浏览器则直接new出来

<script>
function createXmlHttp() {
    var xmlHttp;
    try {
        xmlHttp = new XMLHttpRequest();
    }
    catch (e) {
        try {
            xmlHttp = new ActiveXObject("Msxml12.XMLHTTP");
        }
        catch (e) {
            try{
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e){}
        }
    }
    return xmlHttp;
}
</script>

API
open(): 打开连接。传递三个参数。第一个是请求方式(get/post),第二个是请求路径，第三个是是否是异步的(默认是异步，所以一般不需要特地标明)
send([post请求的参数]): 发送请求
setRequestHeader(): 解决post请求参数的问题，key和值content-type

属性
onreadystatechange：监听该对象的状态的改变，需要一个函数相应它
readyState：该属性就记录这个对象的状态

0	对象已建立，但是尚未初始化，还没有调用open方法
1	对象已建立，尚未调用send方法
2	send方法已调用，但是当前的状态及http头未知
3	已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误
4	数据接收完毕，此时可以通过responseBody和responseText获取完整的数据

status:状态码
responseText：获得字符串形式的响应数据(响应体)
responseXML：获得XML形式的响应数据(响应体)

使用js实现用户名异步校验
页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<center>
<h1>用户注册页面</h1>
<table border="1px" width="500px">
    <tr>
        <td>用户名:</td>
        <td><input type="text" id="username" onblur="checkUserName(this)"  />
            <span id="usernamespan"></span>
        </td>
    </tr>

    <tr>
        <td>密码:</td>
        <td><input type="password" />
        </td>
    </tr>

    <tr>
        <td>邮箱:</td>
        <td><input type="password" />
        </td>
    </tr>

    <tr>
        <td>电话:</td>
        <td><input type="password" />
        </td>
    </tr>

    <tr>
        <td><input id="submitId" type="button" value="注册"/></td>
    </tr>

</table>
</center>
</body>
<script>
    function checkUserName(obj) {
        var username = obj.value;
        var xmlHttp = null;
        if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }


        xmlHttp.open("get","../userServlet?username = " + username);
        xmlHttp.send();
        xmlHttp.onreadystatechange = function(){
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                var flag = xmlHttp.responseText;
                if(flag){
                    document.getElementById("usernamespan").innerHTML = "<font color='green'>用户名可用</font>";
                }
                else {
                    document.getElementById("usernamespan").innerHTML = "<font color='red'>用户名已经被占用</font>";
                }
            }
        }
    }
</script>
</html>

bean

package bean;

public class User {
    private int id;
    private String username;
    private String password;
    private String email;
    private String phone;

    public User() {
    }

    public User(int id, String username, String password, String email, String phone) {
        this.id = id;
        this.username = username;
        this.password = password;
        this.email = email;
        this.phone = phone;
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", email='" + email + '\'' +
                ", phone='" + phone + '\'' +
                '}';
    }
}

dao

public User findByUserName(String username){
    try {
        JdbcTemplate jdbcTemplate = new JdbcTemplate(C3p0Utils.getDataSource());
        String sql = "select * from user where username = ?";
        User user = jdbcTemplate.queryForObject(sql, new BeanPropertyRowMapper<>(User.class), username);
        return user;
    }catch (Exception e){
        e.printStackTrace();
        return null;
    }
}

service

public boolean checkUserName(String username){
    UserDao userDao = new UserDao();
    User user = userDao.findByUserName(username);
    if (user != null){
        return true;
    }
    else
        return false;
}

web

@WebServlet("/userServlet")
public class UserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        UserService userService = new UserService();
        boolean isExit = userService.checkUserName(username);
        if (isExit){
            response.getWriter().print(true);
        }
        else{
            response.getWriter().print(false);
        }
    }
}

jq的ajax

API

请求方式	语法
GET请求	$.get(url,[data],[callback],[type])
POST请求	$.post(url,[data],[callback],[type])
AJAX请求	$.ajax([settings])
GET请求	$.get([settings])
POST请求	$.post([settings])

应用

get()
$.get(url,[data],[callback],[type])

参数名称	解释
url	请求的服务器端url地址
data	发送给服务器端的请求参数，格式可以是key = value，也可以是js对象
callback	当请求成功后的回调函数，可以在函数体中编写我们的逻辑代码
type	预期的返回数据的类型，取值可以是xml，html，script，json，text，_defaul等

<script>
//发送请求:$.get(url,[params],[function(result){}])
    $.get("{pageContext.request.contextPath}/demo01",{"username":"zs","password":"123456"},function (result) {
        alert(result);
    })
</script>

post()
$.post(url,[data],[callback],[type])

<script>
    //发送请求:$.post(url,[params],[function(result){}])
    $.post("{pageContext.request.contextPath}/demo01",{"username":"zs","password":"123456"},function (result) {
        alert(result);
    })
</script>

ajax()
$.ajax([settings])
settings是一个js字面量形式的对象
格式是{name:value,name:value… …}
常用的name属性名如下

属性名称	解释
url	请求的服务器端url地址
async	默认设置下，所有的请求均为异步请求。如果需要发送同步信息，设置成false
data	发送到服务器的数据，可以是键值对形式，也可以是js对象形式
type	(默认:“GET”)请求方式("POST"或“GET”，默认是“GET”)
datatType	预期的返回数据的类型，取值可以是xml,html,script,json,text,_defaul等
success	请求成功后的回调函数
error	请求失败时调用函数

<script>
    function sendRequest() {
        $.ajax({
            url: "/AjaxDemo/ajaxServlet",
            async: true,
            data: "name = haohao&age = 33",
            type: "GET",
            dataType: ("text"),
            success: function () {
                alert("数据没有成功返回")
            }
        });
    }
</script>

新特性

$.get({
    url:"../servletDemo01",
    async:true,
    data:"name = haohao$ age = 13",
    type:"GET",
    dataType:"text",
    success:function () {
        alert("...")
    }
})

$.post({
    url:"../servletDemo01",
    async:true,
    data:"name = haohao$ age = 13",
    type:"GET",
    dataType:"text",
    success:function () {
        alert("...")
    }
    error:functiong(){
        alert("...")
        }
})

案例

<script>
    $("#username").blur(function () {
        var usernameValue = this.value;
        $.post("../userServlet",{username:usernameValue},function (result) {
            if(result){
                $("#usernamespan").html = "<font color='green'>用户名可用</font>";
            }
            else {
                $("#usernamespan").html = "<font color='red'>用户名已经被占用</font>";
            }
        })
    })
</script>

JSON

json就是一个容易生成和解析的数据格式

数据格式

类型	语法	解释
JSON对象	{name:value,name:value…}	name是字符串类型，value是任意类型
JSON数组	[value,value,value]	其中value是任意类型
混合类型	[{},{}… …] 或 {key:[]… …}	合理包裹嵌套对象类型和数组类

json转换工具
是通过java封装好的一些jar工具包，直接将java对象或集合转换成json格式的字符串