Ajax

Posted 2020-12-05 呐呐呐那

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax相关的知识，希望对你有一定的参考价值。

什么是同步异步？

同步：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态，比如当我百度搜索时，会有一个短时间的灰色膜，那时候不可以对其进行操作，

就是结果未出来时，不可以进行操作。

异步：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死，比如当在点击搜索的时候，我还可以对网页进行别的操作不会点不动等操作，点击别的地方会有相应。

ajax运行原理：当页面发起请求时，会请求到游览器的ajax内核引擎，然后去请求服务器，这段时间知道服务器返回给ajax引擎，都可以进行操作，数据返回给ajax引擎再触发你所设置的js事件。所有的异步访问都是ajax引擎

json数据格式

作用：前后端交换数据，移动端与服务器端交换数据

Json的格式与解析

json有两种格式：

1）对象格式：{"key1":obj,"key2":obj,"key3":obj...}

2）数组/集合格式：[obj,obj,obj...]

常用的json格式转换工具：jsonlib，Gson

jquery的ajx技术

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" 
src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
<script type="text/javascript">
    function f1() {
        //请求的url，json内容，回调函数，格式.
        $.get("/Web0717/Ajax02Servlet",{"name":"张三","age":12},
            function(data){
            alert(data.name);
        },"json"    
        );
    }
    function f2(){
        $.post("/Web0717/Ajax02Servlet",{"name":"王2","age":14},
            function(data){
            alert(data.name);
        },"json"        
        )
    }
    function f3(){
        $.ajax({type:"post",   //请求方式
                url:"/Web0717/Ajax02Servlet",   //地址
                async:true,                   //是否异步
                data:{"name":"wrc","age":18},  //传递给服务器的参数
                dataType:"text",              //返回参数的解析类型
                success:function(data){      //如果请求成功的回调函数
                    alert(data);
                },
                error:function(){            //如果请求失败的回调函数
                    alert("请求失败");
                }
                })
    }
    
    


</script>
</head>
<body>
    <input type="button" value="get异步请求服务器" onclick="f1()">
    <input type="button" value="post异步请求服务器" onclick="f2()">
    <input type="button" value="ajax异步请求服务器" onclick="f3()">
</body>
</html>

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

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

其中：

url：代表请求的服务器端地址

data：代表请求服务器端的数据（可以是key=value形式也可以是json格式）

callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）

type：表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换）

常用的返回类型：text、json、html等

3）$.ajax( { option1:value1,option2:value2... } ); ---- 以后在掌握

常用的option有如下：

async：是否异步，默认是true代表异步

data：发送到服务器的参数，建议使用json格式

dataType：服务器端返回的数据类型，常用text和json

success：成功响应执行的函数，对应的类型是function类型

type：请求方式，POST/GET

url：请求服务器端地址

做一个对注册用户名的检测

dao层

//判断用户名是否存在
    public Users getUsername(String username) throws SQLException{
        QueryRunner qr = new QueryRunner(DBUTils.getDataSource());
        String sql = "select * from users where username=?";
        Users user =qr.query(sql, new BeanHandler<Users>(Users.class),username);
        return user;
    }
    
}

service层

package com.oracle.service;

import java.sql.SQLException;

import com.oracle.domain.Users;
import com.oracle.dao.RegisterDao;
public class UsersServlet {
    RegisterDao RegisterDao = new RegisterDao();
    public boolean getUsername(String username) {
        Users users =new Users();
        try {
            users =RegisterDao.getUsername(username);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } 
　　　　//判断sql查询语句是不是空
        return users==null?true:false;
    }
}

servlet

package com.oracle.Web;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.oracle.service.UsersServlet;

public class UserCheckServlet extends HttpServlet {
    UsersServlet UsersServlet = new UsersServlet();
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        String username = request.getParameter("username");  //获取值
        boolean isExist = UsersServlet.getUsername(username);   //判断结果
        response.getWriter().write("{"isExist":"+isExist+"}");   //以json形式写到页面上
        
    }

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

jquery

<script type="text/javascript">
    $(function(){
        $("#username").blur(function(){   //找到username，当他失去焦点时，获取输入值
            var username = $("#username").val();
            $.post(
                "${pageContext.request.contextPath}/UserCheckServlet" ,  //路径
                {"username":username},        //返回参数
                function(data){    //回调函数
                    var userInfo ="";  
                    var isExist = data.isExist;  //接收后台返回的函数，true和false
                    if(isExist){      //判断返回参数的对错，并提示
                        userInfo = "该用户名可以使用";
                        $("#userInfo").css("color","green");  //给提示的字加颜色
                    }else{
                        userInfo = "该用户名已被占用";
                        $("#userInfo").css("color","red");
                    }
                    $("#userInfo").html(userInfo);   //获取属性显示出来
                },"json"    //参数格式
            )
        })
    })

</script>

以上是关于Ajax的主要内容，如果未能解决你的问题，请参考以下文章

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

Ajax 片段元标记 - Googlebot 未读取页面内容

执行AJAX返回HTML片段中的JavaScript脚本

javascript AJAX片段

Spring MVC 3.2 Thymeleaf Ajax 片段