ajax和json

Ajax

同步和異步:
	a標籤是同步,調用完形成新的頁面,頁面會刷新.原頁面在a標籤後面的代碼將不執行處於等待狀態.	  而異步請求不會.異步此頁面的其他代碼會繼續執行
應用場景:
	用戶名是否存在的校驗,百度自動補全功能,商品查找,搜索圖片
注意:
	ajax不能跨函數,不能跨頁面

異步:強大之處服務器處理不影響瀏覽器的其他操作,增強用戶體驗度

原生ajax

入門案例:
	1:創建一個核心對象(XMLHttPRequest)
      該對象稱之爲ajax引擎
    2:編寫onreadystatechange事件所調用的函數
    	回到函數
    3:確定請求方式和請求路徑
	4:發送請求
    5:處理返回結果

原生ajax案例:

index.jsp

<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2020/5/14
  Time: 13:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
<h3>原生ajax</h3>
  <a href="js_01.jsp">原生ajax入門</a>
  </body>
</html>

js_01.jsp

<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2020/5/14
  Time: 13:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="/day07/js/jquery-3.3.1.js"></script>
    <script>
        function sendAjax() {
            //發送sjax請求
            //1:創建ajax核心對象(xmlhttprequest)ajax引擎
            var xmlhttp;
            if(window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2:編寫onreaystatechange事件所調用的函數
            xmlhttp.onreadystatechange=function () {
                //1:監聽ajax引擎的狀態
                //5:處理結果
                if(xmlhttp.readyState==4 && xmlhttp.status==200){
                    $("#spId").html(xmlhttp.responseText);
                }

            }
            //3:編寫ajax請求的方式和地址
            xmlhttp.open("post","demo1");
            //4:發送請求
            xmlhttp.send();

            
        }
    </script>
</head>
<body>
<input type="button" value="發送ajax請求" onclick="sendAjax()"/><br>
<span id="spId"></span>
</body>
</html>

Demo1Servlet.java

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(name = "Demo1Servlet", urlPatterns = "/demo1")
public class Demo1Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("demo1servlet執行了");
        response.getWriter().print("hello ajax 你好");
    }

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

原生ajax的屬性

onreadystatechange事件
	在ajax對象狀態發生改變時,就會出發該時間
	對象.onreadystatechange=function(){}
redaystate
	存在XMLHTTPRequest的狀態
		0:請求未初始化(見不到的就相當於還沒創建對象)
		1:服務器連接已建立
		2:請求已接收
		3:請求處理中
		4:請求已完後,且響應已就緒
status
	響應狀態碼:
		if(xmlhttp.readystate==4&&xmlhttp.status==200){
  			//執行的代碼片段
		}
responseText
	獲取服務器響應回來的文本信息

原生ajax的方法

open(method,url,[async]);
	設置請求的類型,請求地址以及是否異步處理請求
	method:請求的類型;get或post
	url:文件在服務器上的位置
	async:true(異步)或false(同步)
send([string]);
	將請求發送到服務器
		string:存放post請求攜帶的參數
在post請求時要設置請求參數的mime類型
	xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

jQuery中的Ajax

$.post(url,[params],fn,[type])

發送post請求

url:請求的路徑

params:請求的參數

格式1:字符串key1=value1&key2=value2

格式2:json格式:

{“key1”:“value1”,“key2”:“value2”}

fn:回調函數

function(data){

//data:響應回來的數據(xmlHttp.responseText)

}

type:返回內容的格式 text xml json

默認返回的是text類型的數據,一般不需要自己設置,設置的話一般設置爲json

ajax的post請求案例:

index.jsp


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
<h3>原生ajax</h3>
  <a href="js_01.jsp">原生ajax入門</a>
<h3>jQuery的ajax</h3>
<a href="js_02.jsp">jQuery的ajax</a>
  </body>
</html>

js_02.jsp

<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2020/5/14
  Time: 13:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script>
        function sendAjax() {
            var url = "demo2";
            var params ={"username":"湯姆","password":"123"};
            function fun(data) {
                alert(data);
            }
            $ .post(url, params, fun,"text");
        }
    </script>
</head>
<body>
<input type="button" value="發送ajax請求" onclick="sendAjax()"/><br>
<span id="spId"></span>
</body>
</html>

Demo02Servlet.java


@WebServlet(name = "Demo3Servlet", urlPatterns = "/demo2")
public class Demo3Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //解決亂碼
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().print(request.getParameter("username")+":"+request.getParameter("password"));
    }

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

如果換爲get請求則 $.get(url,[params],fn,[type])即可

$.ajax寫法想發post或者get都可以

$.ajax({url,[settings]})
  url:請求路徑
  type:請求方式
  data:請求參數
  success:請求成功後的回調函數
  error:請求失敗後調用的函數
  dateType:服務器返回的數據類型
  	一般不需要自己設置,要設置的話一般設置爲json
  async:設置是否爲異步提交,默認爲true(異步提交)
eg:
$.ajax({
  url:url,
  data:params,
  type:"post",
  success:f,
  error:ef,
  async:true
})

json

概述:
	JavaScript對象表示法,是存儲和交換文本信息的語法,類似xml,	比xml更小,更快,更衣解析.

格式:
	格式1:json對象
		{"key":"value","key2":"value2"}//key爲String類			型,value任意類型
	格式2:json數組
		["aa","bb"]
	格式3:混合json
		[{"name":"張三","age":"11"},{"name":"張三2","age":"21"}]
		{"student":["張三","李四"]}
獲取json對象格式的值直接:對象.key

java對象轉換爲json數據

常見的工具類:
	jsonlib
	fastjson(阿里巴巴的)
	gson(谷歌的)
    Jackjson(爲springmvc默認的轉換方式)

案例一:檢測用戶名是否被註冊

需求分析:
	再註冊頁面上,當用戶在用戶名的輸入框輸入完成後,也就是失去焦點事件發送ajax請求,檢驗用戶名是否存在
	該用戶名已存在:
		提示:"該用戶名已被佔用"
    該用戶名不存在:
		提示:"√"
技術分析:
	blur:失去焦點事件
	ajax:
	$.ajax({
  		url:"",
      	data:"",
      	type:"",
      	success:f,
      	error:f,
      	dataType:"text",
      	async:true
	})
步驟分析:
	前臺:
		提供註冊頁面,給用戶名的輸入框添加失去焦點事件
        輸入框對象.blur(function(){
        	//發送ajax請求
        })

demo1.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script>
        //頁面加載成功事件
        $(function () {
            //用戶名輸入框的失去焦點事件
            $("input[name='username']").on("blur",function () {
                //獲取用戶輸入的name值
               var username=$(this).val();
               //使用ajax異步處理
                $.ajax({
                    url:"user",
                    data:{"username":username},
                    type:"post",
                    success:function (data) {
                        $("#nameMsg").html(data);
                    },
                    dataType:"text",
                    async:true
                })
            })
        })
    </script>
</head>
<body>
<form action="">
    <table align="center" border="1px solid red" width="300px" height="100px">
        <tr>
            <th colspan="2" align="center">
                用戶表單
            </th>
        </tr>
        <tr>
            <td>用戶名:</td>
            <td>
                <input type="text" name="username">
                <span id="nameMsg"></span>
            </td>
        </tr>
        <tr>
            <td>密碼:</td>
            <td>
                <input type="password" name="pwd">
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" id="subId" value="提交"/>
            </td>
        </tr>
    </table>

    <br>

</form>
</body>
</html>

UserServlet.java


@WebServlet(name = "UserServlet", urlPatterns = "/user")
public class UserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        //獲取前端傳來的userName
        String username = request.getParameter("username");
        //調用service查看此用戶名是否存在
        UserService userService = new UserService();
        User exist = userService.exist(username);
        if (exist==null) {
            response.getWriter().print("√");
        }else{
            response.getWriter().print("用戶名已存在");
        }
    }

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

UserService.java


public class UserService {

    public User exist(String username){
        UserDao userDao = new UserDao();
         return  userDao.exist(username);
    }

}

UserDao.java


public class UserDao {

    public User exist(String username){
        try {
            String sql = "select * from user where name = ? ";
            JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
            return template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username);
        } catch (DataAccessException e) {
            return null;
        }
    }
}

案例二:異步自動填充

demo2.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.content{
		width:643px;
		margin:200px auto;
		text-align: center;
	}
	input[type='text']{
		width:530px;
		height:40px;
		font-size: 14px;
	}
	input[type='button']{
		width:100px;
		height:46px;
		background: #38f;
		border: 0;
		color: #fff;
		font-size: 15px
	}
	.show{
		width: 535px;
		border: 1px solid #999;
		border-top: 0;
        display: none;
	}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
	//搜索框聯想詞的單擊事件
	function fn(ele) {
        $("input[name='word']").val($(ele).html());
    }
	$(function () {
        $("input[name='word']").on("keyup",function () {
            $.ajax({
				url:"demo2",
				data:{"username":$(this).val()},
				type:"post",
				success:function (data) {
					if(data!="null"&&data.length>0){
					    var str="";
                        $("div>div").empty();
					    $.each(data,function (index,ele) {
                            str += "<span οnclick='fn(this)'>"+ele+"</span><br>";
                        });
                        $("div>div").html(str);
                        $("div>div").show();
					}else{
                        $("div>div").hide();
					}
                },
				dataType:"json",
				async:true
			})
        })
    })
</script>
</head>
<body>
	<div class="content">
		<img alt="" src="img/logo.png"><br/><br/>
		<input type="text" name="word">
		<input type="button" value="搜索一下">
		<div class="show"></div>
	</div>
</body>
</html>

Demo2Servlet.java

@WebServlet(name = "Demo2Servlet", urlPatterns = "/demo2")
public class Demo2Servlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        List<String> userList = new UserService().likeName(request.getParameter("username"));
        //將list轉換爲json
        String listJson = new ObjectMapper().writeValueAsString(userList);
        System.out.println("listJson======="+listJson);
        response.getWriter().print(listJson);
    }

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

service.java

public class UserService {
    public User exist(String username){
        UserDao userDao = new UserDao();
         return  userDao.exist(username);
    }
    public List<String> likeName(String username){
        UserDao userDao = new UserDao();
        return  userDao.likeName(username);
    }
}

dao.java

public class UserDao {

    public User exist(String username){
        try {
            String sql = "select * from user where name = ? ";
            JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
            return template.queryForObject(sql, new BeanPropertyRowMapper<User>(User.class), username);
        } catch (DataAccessException e) {
            return null;
        }

    }
        public List<String> likeName(String username){
        try {
            String sql = "select name from user where name like ?  ";
            JdbcTemplate template = new JdbcTemplate(JDBCUtils.getDataSource());
            return template.queryForList(sql, String.class, username+"%");
        } catch (DataAccessException e) {
            return null;
        }
    }
}

異步處理ajax和前後端數據交互json

ajax和json

Ajax

原生ajax

index.jsp

js_01.jsp

Demo1Servlet.java

原生ajax的屬性

原生ajax的方法

jQuery中的Ajax

$.post(url,[params],fn,[type])

ajax的post請求案例:

如果換爲get請求則 $.get(url,[params],fn,[type])即可

$.ajax寫法想發post或者get都可以

json

java對象轉換爲json數據

案例一:檢測用戶名是否被註冊

案例二:異步自動填充

druid數據源 xml配置

jsp表單處理頁面點擊量統計

數據庫優化之聯合索引

TCP協議三次握手的執行流程,tcp的交互模式

微信小程序開發,微信小程序授權登錄流程

js數據類型轉換,js作用域,js創建對象的三種方式

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結