AJAX请求步骤

AJAX请求四步：

1、创建AJAX核心对象

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  	xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

2、注册回调函数

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    	console.log("kkkkkkkkk");
    }
  }

3、开启通道

1. 第一种方式：使用GET请求checkusername

   xmlhttp.open("GET","checkusername",true);
   

   方法	描述
   open(method: string, url: string)	规定请求的类型、URL ,默认使用异步处理请求。
   open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步）或 false（同步）

2. 第二种方式：使用POST请求（需要添加请求头）

   xmlhttp.open("POST","checkusername",true);
   xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   

   Content-type通常设置为下面的字段：

   -	-	-	-	-
   Accept-Encoding	Access-Control-Request-Headers	Access-Control-Request-Method	Connection	Content-Length
   Cookie	Cookie2	Date	DNT	Expect
   Host	Keep-Alive	Origin	Referer	TE
   Trailer	Transfer-Encoding	Upgrade	User-Agent	Via

   在响应中，Content-Type标头告诉客户端实际返回的内容的内容类型。浏览器会在某些情况下进行MIME查找，并不一定遵循此标题的值;

   MIME的组成结构非常简单；由类型与子类型两个字符串中间用'/'分隔而组成。不允许空格存在。

   通用结构为：

   type/subtype
   

   type 表示可以被分多个子类的独立类别。subtype 表示细分后的每个类型。

   独立类型表明了对文件的分类，可以是如下之一：

   类型	描述	典型示例
   text	表明文件是普通文本，理论上是人类可读	text/plain, text/html, text/css, text/javascript
   image	表明是某种图像。不包括视频，但是动态图（比如动态gif）也使用image类型	image/gif, image/png, image/jpeg, image/bmp, image/webp, image/x-icon, image/vnd.microsoft.icon
   audio	表明是某种音频文件	audio/midi, audio/mpeg, audio/webm, audio/ogg, audio/wav
   video	表明是某种视频文件	video/webm, video/ogg
   application	表明是某种二进制数据	application/octet-stream, application/pkcs12, application/vnd.mspowerpoint, application/xhtml+xml, application/xml, application/pdf

4、发送请求

xmlhttp.send(null);

方法	描述
send(string)	将请求发送到服务器。string：仅用于 POST 请求

当你使用 async=false 时，请不要编写 onreadystatechange 函数，把代码放到 send() 语句后面即可

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send(null);
document.getElementById("username").innerHTML=xmlhttp.responseText;

5、Ajax代码

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        $("input[id='username']").blur(function () {
            $(this).addClass("checkUsername");
            xmlHTTP = new XMLHttpRequest(); //全局变量
            xmlHTTP.onreadystatechange = checkUsername;  //回调函数：服务器响应以后，调用该函数
            xmlHTTP.open("GET","checkusername?username="+$(this).val());  //开启连接
            xmlHTTP.send(null);
            //xmlHTTP.open("POST","checkusername");
            //xmlHTTP.send("username="+$(this).val());
            //xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        })
    });
    function checkUsername() {
        if (xmlHTTP.readyState == 4) {
            if (xmlHTTP.status == 200) {
                console.log(xmlHTTP.responseText);
            }
        }
    }
</script>

想测试ajax可以点击这个连接

参考文献

https://www.w3school.com.cn/ajax/ajax_xmlhttprequest_send.asp
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types