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>

 

posted @ 2018-07-21 09:27  鲁系大厨  阅读(147)  评论(0编辑  收藏  举报