當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【Notes6】ajaxjson，校验用户名，自动提示，CORS，/swagger开发rest，Websocket，DNS

發(fā)布時間：2024/4/24 编程问答 101 豆豆

生活随笔收集整理的這篇文章主要介紹了【Notes6】ajaxjson，校验用户名，自动提示，CORS，/swagger开发rest，Websocket，DNS 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

1.ajax/fetch/axios：xhr對象，$.，瀏覽器輸入框加載腳本
- 1.1 fetch&axios：fetch大部分瀏覽器都自帶了，除了ie
2.json：new ObjectMapper()
- 2.1 json在前端和后端中表達：json在js中的表達.html（前端）
- 2.2 jar包：如上手動轉換麻煩，如下用jar包將java對象或集合轉為json格式字符串
3 ajax和json綜合：ajax_json_union.html
4.案例_校驗用戶名是否可用：this.value
5.案例_自動提示：$(result).each
6.跨域請求CORS：接口是在一臺服務器或一個端口上，前端的頁面服務在另一個服務器或端口上，從前端獲取接口里數據時會存在跨域問題
7.swagger：用來規(guī)范前端和后端統一接口管理
8.Websocket保證前端實時性：socket通常指tcp的socket，上來建立雙向連接，有通道隨意先后發(fā)送
9.DNS原理與域名的配置：域名作用是方便記憶，dns作用是將域名解析成ip

1.ajax/fetch/axios：xhr對象，$.，瀏覽器輸入框加載腳本

同步加載：1.當前頁面直接跳轉到另一個頁面（覆蓋），url發(fā)生變化。2.直接新開一個頁面，url發(fā)生變化。
同步注冊：所有信息填完了，點提交等待服務器響應是同步請求（有順序，等服務器響應結果，不是同步比異步差，之前寫的都是同步請求，一個一個發(fā)，B覆蓋A頁面。前端沒有線程，下面線程是比喻）。

如上四個箭頭就是四次變化。要實現異步請求，必須借助ajax，不然都是同步請求。ajax（Asychronous異步 Javascript And XML）應用：1.搜索內容自動補全，2.注冊頁面自動檢測用戶名是否存在。

//01_js中的ajax請求.html <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>function method01() {//1.創(chuàng)建一個xhr對象(瀏覽器內核/引擎支持)var xhr = new XMLHttpRequest(); //2.設置一個監(jiān)聽事件 //5個狀態(tài)4次改變, 當請求狀態(tài)改變（點擊前端發(fā)請求按鈕）的時候被觸發(fā)xhr.onreadystatechange = function (ev) {// console.log(xhr.readyState) //1 2 3 4 if(xhr.readyState == 4){ // 前端可以拿到服務器響應后的數據，只4對于我們才有意義if(xhr.status == 200){ alert(xhr.responseText) //響應成功，拿到后臺發(fā)來的“hello boy”}else{alert("響應失敗了~~")}}}//3.設置請求數據，如上的2相當于最后一步/* method：請求的類型；GET 或 POST //GET請求發(fā)送參數拼接在url中如下url：文件在服務器上的位置async：true（異步）或 false（同步），一般默認true */xhr.open("get","/AjaxServlet?name=hehe",true) //4.發(fā)送請求 xhr.send() //將請求發(fā)送到服務器。send里參數string：僅用于POST請求，用來放請求體，Get參數放在上行url中。}</script> <script>function method02() {var xhr = new XMLHttpRequest();xhr.onreadystatechange = function (ev) {if(xhr.readyState == 4 && xhr.status == 200){alert(xhr.responseText)}}xhr.open("post","/AjaxServlet",true) xhr.setRequestHeader("content-type","application/x-www-form-urlencoded") //一般編碼解碼由瀏覽器完成，但ajax的post請求url編碼要上行手動設置。xhr.send("name=haha")}</script> </head> <body><input type="button" value="js中的ajax(get)請求" onclick="method01()"> <br> <br><input type="button" value="js中的ajax(post)請求" onclick="method02()"> <br> <br> </body> </html>

post請求參數(“name=haha”)需要url編碼才能傳到服務器。

//02_jquery中的ajax請求.html <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.3.1.js"></script><script>/*GET請求：$.get(url, [data], [callback], [type]) // []表示可有可無1. url : 請求地址2. data : 請求參數 (text,json)3. callback : 響應成功的回調4. type : 響應數據的類型(text 默認值,json)*/function method01() { //name= 可以用?拼在前面/AjaxServlet的后面 //$是全局對象$.get("/AjaxServlet","name=xixi",function (result) {alert(result) //result是服務器傳來的"hello boy"},"text")}function method02() { //不可拼在/AjaxServlet后 //不用考慮url編碼和post請求參數放哪里問題$.post("/AjaxServlet","name=huhu",function (result) {alert(result)},"text")}function method03() {/*AJAX完整請求: $.ajax([settings]) 考慮請求失敗的情況用完整請求，上面兩個方法沒有失敗上行settings = object如下{n1 : v1,n2 : v2...}*/$.ajax({url:"/AjaxServlet",async:true,data:"name=tom",type:"GET", // 請求方式dataType:"text", // 響應數據的類型success:function(data){ // 成功的回調alert(data);},error:function(){ // 失敗的回調alert("數據沒有成功返回!")}});}function method04() {$.post({url:"/AjaxServlet",async:true,data:"name=tom",dataType:"text", // 響應數據的類型success:function(data){ // 成功的回調alert(data);},error:function(){ // 失敗的回調alert("數據沒有成功返回!")}});}</script> </head> <body><input type="button" value="jquery中的ajax(get)請求" onclick="method01()"> <br> <br><input type="button" value="jquery中的ajax(post)請求" onclick="method02()"> <br> <br><input type="button" value="jquery中的ajax完整請求" onclick="method03()"> <br> <br><input type="button" value="jquery3.0中的ajax簽名方式請求" onclick="method04()"> <br> <br> </body> </html> package com.itheima01.ajax; 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(urlPatterns = "/AjaxServlet") public class AjaxServlet extends HttpServlet { //服務端@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String name = request.getParameter("name");System.out.println(name);System.out.println("服務器被訪問了!");response.getWriter().print("hello boy");} }

如下jquary里內置了ajax請求函數即$ajax，現在瀏覽器流行的不是ajax了，畢竟jquary出現很多年了，現在用的是fetch和axios，這兩者用法很像。

瀏覽器輸入框輸入：data:text/html,<h1>hello<h1>，頁面自動顯示hello。data:text/html,<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>，F12 Network中刷新頁面顯示如下，這時就可在console中使用jquery了。

監(jiān)聽99號端口的小程序，直接雙擊打開：鏈接：https://pan.baidu.com/s/1nHhdf7Qerq3bEkOfXr8FXw 提取碼：eipc。

如上在console中回車發(fā)送后，如下Network中會多一條localhost請求。

1.1 fetch&axios：fetch大部分瀏覽器都自帶了，除了ie

2.json：new ObjectMapper()

JSON：JavaScript對象簡單表示法（JavaScript Object Notation），與js對象區(qū)別是JSON只有屬性沒有方法，比XML小快（因為json不需要標簽）。中括號：一個表即一個數組。大括號：一行記錄即一個對象。

如下右邊java中l(wèi)ist集合，前端看不懂無法解析，變成xml后，前端可以解析。任意數組皆為json，上面為混合模式。

2.1 json在前端和后端中表達：json在js中的表達.html（前端）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script>var jsonObj = {"name" : "張三" , "age" : 18 , "married" : true} //name必須string格式，value無所謂var jsonObj2 = {"name" : "李四" , "age" : 19 , "married" : false}console.log(jsonObj.name + "," + jsonObj.age + "," + jsonObj.married) //對象.屬性名var jsonArray = ["哈哈", 1 , true] //也是json對象console.log(jsonArray[0])var jsonArray2 = [jsonObj,jsonObj2] //[0,1]console.log(jsonArray2[1].name)//jsonComplex.list指的是jsonArray2數組，0索引位是jsonObjvar jsonComplex = {"list" : jsonArray2, "count" : 2}console.log(jsonComplex.list[0].married) // jsonObj.married</script> </head> <body> </body> </html>

//JsonDemo.java（后端） package com.itheima02.json; import org.junit.Test; import java.util.ArrayList; /* * Json在java中就是普通string （java不識別json,xml,sql,正則表達式，都認為是字符串） * Json Java * 1. 對象 : javaBean * 2. 數組 : List * 3. 混合 : Map<Key, List> */ public class JsonDemo { //Java數據（javaBean）變成 Json@Testpublic void method01(){Friend f = new Friend("張三", 18, true);//System.out.println(f.toString()); //.toString()可以不寫，默認調用.toString() //Friend{name='張三'，age=18，..}System.out.println(f.toJson()); // {"name":"張三"，"age":18，"married":true} }@Testpublic void method02(){ArrayList<Friend> list = new ArrayList<>();Friend f1 = new Friend("張三", 18, true);Friend f2 = new Friend("李四", 19, false);list.add(f1);list.add(f2);System.out.println(list); //打印如下，默認調用.toString() //[Friend{name='張三', age=18, married=true}, Friend{name='李四', age=19, married=false}]StringBuilder sb = new StringBuilder(); //如下將上面list轉化為json的數組sb.append("[");for (int i = 0; i < list.size(); i++) { //i最多=2個對象String s = list.get(i).toJson();if(i == list.size() - 1){ //這行意思為最后一個sb.append(s); //不加逗號}else{sb.append(s + ","); //中間加一個逗號}}sb.append("]");System.out.println(sb.toString());} }

package com.itheima02.json;public class Friend {private String name;private Integer age;private Boolean married;public Friend() {}public Friend(String name, Integer age, Boolean married) {this.name = name;this.age = age;this.married = married;}@Overridepublic String toString() {return "Friend{" +"name='" + name + '\'' +", age=" + age +", married=" + married +'}';}public String toJson() {return "{\"name\" : \""+name+"\",\"age\":"+age+",\"married\":"+married+"}";}public String getName() {return name;}public void setName(String name) {this.name = name;}public Integer getAge() {return age;}public void setAge(Integer age) {this.age = age;}public Boolean getMarried() {return married;}public void setMarried(Boolean married) {this.married = married;} }

2.2 jar包：如上手動轉換麻煩，如下用jar包將java對象或集合轉為json格式字符串

如下右擊add as library。

package com.itheima02.json; import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.ObjectMapper; import org.junit.Test; import java.util.ArrayList; import java.util.HashMap;public class JsonDemo02 {@Testpublic void method01() throws JsonProcessingException {Friend f = new Friend("張三", 18, true);// System.out.println(f.toJson()); // 沒有寫toJsonObjectMapper om = new ObjectMapper(); //1. 創(chuàng)建對象映射器String json = om.writeValueAsString(f); //2. 調用writeValueAsString (java對象 -> json格式字符串)System.out.println(json); //{"name":"張三"，"age":18，"married":true}}@Testpublic void method02() throws JsonProcessingException {ArrayList<Friend> list = new ArrayList<>();Friend f1 = new Friend("張三", 18, true);Friend f2 = new Friend("李四", 19, false);list.add(f1);list.add(f2);ObjectMapper om = new ObjectMapper();String json = om.writeValueAsString(list);System.out.println(json); //兩個如上}@Testpublic void method03() throws JsonProcessingException {ArrayList<Friend> list = new ArrayList<>();Friend f1 = new Friend("張三", 18, true);Friend f2 = new Friend("李四", 19, false);list.add(f1);list.add(f2);HashMap<String, Object> map = new HashMap<>(); //json的name必須是stringmap.put("list",list);map.put("count",2);ObjectMapper om = new ObjectMapper();String json = om.writeValueAsString(map);System.out.println(json);} }

method03如下：count和list為name。

3 ajax和json綜合：ajax_json_union.html

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.3.1.js"></script><script>function method01() {/** url : 請求地址* data : 請求參數 (text , json)* callback : 響應成功的回調函數* type : 響應數據的類型 (text , json)* 1. text : 響應回來的數據變成string* 2. json : 響應回來的數據變成json(Object)*/// var param = "name=admin&pwd=123" // text類型的參數var param = {"name" : "admin" , "pwd" : "123"} //json類型的參數$.get("/UnionServlet",param , function (result) {console.log(typeof result)console.log(result) for (var i = 0; i < result.length; i ++) { //前端解析json格式的數據console.log(result[i].name)}},"json")}</script> </head> <body><input type="button" value="發(fā)送一個異步請求" onclick="method01()"> </body> </html>

如上把$.get中json換成text，如下的object就是string。

package com.itheima03.union; import com.fasterxml.jackson.databind.ObjectMapper; import com.itheima02.json.Friend; 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; import java.util.ArrayList;@WebServlet(urlPatterns = "/UnionServlet") public class UnionServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String name = request.getParameter("name"); //后臺解析json格式的數據String pwd = request.getParameter("pwd");System.out.println(name + "," + pwd);ArrayList<Friend> list = new ArrayList<>();list.add(new Friend("癟三",18,true));list.add(new Friend("癟四",19,false));ObjectMapper om = new ObjectMapper();String json = om.writeValueAsString(list);response.setContentType("text/html;charset=utf-8"); //響應體中文亂碼問題response.getWriter().print(json);} }

如下是main方法入口，換成貓（web工程的入口在貓里）再點烏龜加載servlet。

4.案例_校驗用戶名是否可用：this.value

//05_校驗用戶名是否可用.html <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-3.3.1.js"></script><script>function method01(value) {// console.log(value)$.get("/CheckServlet",{"name" : value},function (result) { if(result == "true"){ //result為后臺發(fā)來response.getWriter().print里內容$("#myspan").text("恭喜你,用戶名可用")$("#myspan").css("color","green")}else{$("#myspan").text("不好意思,此用戶名已被使用~~")$("#myspan").css("color","red")}},"text")}</script> </head> <body><input type="text" placeholder="請輸入要注冊用戶名" onblur="method01(this.value)"><span id="myspan"></span><br><input type="text" placeholder="請輸入要注冊的密碼"> <br> </body> </html> package com.itheima04.check; 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(urlPatterns = "/CheckServlet") public class CheckServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String name = request.getParameter("name"); if("jack".equalsIgnoreCase(name)){ //假設數據庫里就一個jackresponse.getWriter().print("false"); //不要寫成println，本來是換行，但在前端中體現是多一個空格}else{response.getWriter().print("true");}} }

5.案例_自動提示：$(result).each

//search-page.jsp <%@ 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> <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{position: absolute;width: 535px;height:100px;border: 1px solid #999;border-top: 0;} </style> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> <script type="text/javascript">/*點擊onclick: 按下onkeydown + 抬起onkeyup //文本框內容輸入變化onchange不行* 1. 事件 : onkeyup (鍵盤抬起)* 2. 邏輯:* 異步請求* 請求地址: /AutoServlet* 請求參數: value = x 文本框輸入的內容* 回調(響應):* 3. 服務器* sql : select * from table where name like ? limit 4; 下拉框顯示4個* 1. 查詢數據庫 : ? = "value%" 返回list 再變成json數組再遍歷 */function method01(value) {// console.log(value)if(!value){ // value是空的，到服務器就剩下%符號，變全部查詢，所以在這阻斷$(".show").css("display","none") // if(!value)為truereturn; // 不往后執(zhí)行}$.get("/AutoServlet",{"value" : value},function (result) {// console.log(result)var content = ""$(result).each(function (index,element) { //jquary的遍歷// console.log(index + "," + element)content += element.name + "<br>" //不寫<br>，就是一行，拼接})$(".show").css("display","block") //display由隱藏改回塊級元素$(".show").html(content) //.html自動識別換行<br>標簽},"json")}function method02() {alert("xx")} </script> </head> <body><div class="content"><img alt="" src="img/logo.png"><br/><br/><input type="text" name="word" onkeyup="method01(this.value)"><input type="button" value="搜索一下" onclick="method02()"><div class="show" style="display: none"></div> </div> </body> </html>

console.log(index + “,” + element) 如下：

package com.itheima05.auto; import com.fasterxml.jackson.databind.ObjectMapper; import org.springframework.jdbc.core.BeanPropertyRowMapper; import org.springframework.jdbc.core.JdbcTemplate; 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; import java.util.List;@WebServlet(urlPatterns = "/AutoServlet") public class AutoServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(request, response);}@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String value = request.getParameter("value");String sql = "select * from user where name like ? limit 4"; //limit0,4 默認0不寫JdbcTemplate template = JdbcUtil.getTemplate();String param = value + "%";List<User> list = template.query(sql,new BeanPropertyRowMapper<>(User.class),param);ObjectMapper om = new ObjectMapper();String json = om.writeValueAsString(list);System.out.println(json); response.setContentType("text/html;charset=utf-8");response.getWriter().print(json);} }

System.out.println(json)如下：

package com.itheima05.auto; import com.mchange.v2.c3p0.ComboPooledDataSource; import org.springframework.jdbc.core.JdbcTemplate;public class JdbcUtil {private static ComboPooledDataSource ds = new ComboPooledDataSource();public static JdbcTemplate getTemplate(){ // JdbcTemplate template = new JdbcTemplate(ds); // return template;return new JdbcTemplate(ds);} } package com.itheima05.auto;public class User {private Integer id;private String name;private String password;@Overridepublic String toString() {return "User{" +"id=" + id +", name='" + name + '\'' +", password='" + password + '\'' +'}';}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;} }

6.跨域請求CORS：接口是在一臺服務器或一個端口上，前端的頁面服務在另一個服務器或端口上，從前端獲取接口里數據時會存在跨域問題

如下會產生跨域問題，瀏覽器再次訪問localhost:90時會出現和上面百度訪問淘寶一樣的CORS問題。

解決CORS有如下兩種方式：1.修改響應頭。

2.jsonp：我們通過href或src請求下來的js腳本或css文件或img或視頻都不存在跨域問題，只有通過ajax請求下來的數據才有跨域問題。

7.swagger：用來規(guī)范前端和后端統一接口管理

rest接口本身就是http的接口，只不過rest接口一般滿足一定的規(guī)范，這個規(guī)范下的http接口就叫rest接口。一般rest接口中http的get方法進行數據的查詢，post增，put改，delete刪。rest接口文檔需鄭重去維護，于是出了很多rest接口文檔標準，最有名的就是swagger。

swagger官網：https://editor.swagger.io/。在右邊界面中可直接調試，也可看接口的url以及作用是什么。但是自己去寫左邊yml文檔（YML文件是以數據為核心的，比傳統的xml方式更簡潔，可被支持YAML庫的不同的編程語言程序導入）生成右邊，不好記，推薦用工具：http://studio.restlet.com/。

在restlet官網中新建名為MYAPI接口，如下創(chuàng)建數據類型。

如下增加rest資源就是url請求相關內容。

如下為資源創(chuàng)建get方法。

如下定義返回的行頭體。

如上操作會生成yml文檔，復制粘貼進如下左邊，如下點擊后下載下來用idea打開，點擊Swagger2SpringBoot.java啟動run起來，啟動起來并監(jiān)聽了一些路徑（有一個/路徑）。

如下瀏覽器輸入localhost:8080（服務端）訪問/路徑，自動轉到服務本地啟動的一個輔助界面。

如下進行服務端配置，服務端代碼的api目錄就是controller所在的目錄，修改如下重新運行。

點擊上面GET里try it out發(fā)請求，如下Body有如上設置好的內容了。

8.Websocket保證前端實時性：socket通常指tcp的socket，上來建立雙向連接，有通道隨意先后發(fā)送

http：客戶端主動發(fā)請求到服務端，服務端處理請求并響應給客戶端，前提是客戶端先發(fā)起請求，服務端才能發(fā)起響應，非常依賴客戶端的主動性，有請求才有響應。

http 為短連接：客戶端發(fā)送請求都需要服務器端回送響應.請求結束后，主動釋放鏈接，因此為短連接。通常的做法是，不需要任何數據，也要保持每隔一段時間向服務器發(fā)送"保持連接"的請求。這樣可以保證客戶端在服務器端是"上線"狀態(tài)。

Socket：TCP 三次握手：握手過程中并不傳輸數據，在握手后服務器與客戶端才開始傳輸數據，理想狀態(tài)下，TCP 連接一旦建立，在通訊雙方中的任何一方主動斷開連接之前 TCP 連接會一直保持下去。

對 TCP/IP 協議的封裝，Socket 只是個接口不是協議，通過 Socket 我們才能使用 TCP/IP 協議，創(chuàng)建 Socket 連接的時候，可以指定傳輸層協議，可以是 TCP 或者 UDP。

我們大多數用http方式，有時想用socket方式，所以html5后websocket應運而生。如下第一行連接，第二行注冊消息事件。websocket應用場景：服務端的一些狀態(tài)變更需立即通知到客戶端實時性，原來去實現實時性的方式是客戶端輪詢（每秒鐘或幾秒鐘請求一次服務端看數據有沒有變化，數據沒變化不返回東西，數據發(fā)生變化，服務端會返回數據給客戶端）。但有了websocket，服務端可主動通知客戶端，這時候不再需要這種輪詢，因為輪詢每秒請求的話會消耗帶寬，大量運用在網頁聊天室，股票等狀態(tài)變更頻繁場景。

9.DNS原理與域名的配置：域名作用是方便記憶，dns作用是將域名解析成ip

如下根dns服務器全球只有13個，根dns服務器可能也不知道baidu.com這域名對應的ip，但它一定知道這個域名對應的ip，哪個dns服務器知道。

如下URL：https://www.baidu.com/..請求參數。CAA：證書機構相關配置。TXT：特殊場景下用，如在某個服務下進行域名配置，但這服務要先確認你是否擁有這域名（就會告訴你一個文本，你在域名控制臺下配置域名和這個文本的映射并為TXT類型。之后這個服務會到這個域下進行驗證，驗證剛好得到的文本就是自己提供的文本的話確定了你確實是這域名的擁有者）。

如果你的服務機器是在國內的話，那最好在國內的云服務商購買域名并要備案。國外購買不需要備案，購買完后需要自己配置。域名申請和購買：https://www.namecheap.com/，如下是已經購買了。

如下點擊Advanced DNS進行手動配置，點擊后如下所示：第二列Host指域名前綴，@符號指沒有前綴，TTL刷新時間即生效時間。Host列和Value列效果相同。

1.如下都跳轉到同一個頁面。

2.如下CName，跳轉到同上頁面。

3.如下URL，跳轉到百度。

總結

以上是生活随笔為你收集整理的【Notes6】ajaxjson，校验用户名，自动提示，CORS，/swagger开发rest，Websocket，DNS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【CI/CD2】actions，daoc
下一篇：【Notes7】Samba/NFS服务器