首先举个例子
一个登录界面上有注册界面，输入用户名和密码，点击注册按钮，如果用户名重复则提示失败。
需要写一个form表单，里面有需要用到的input和button


action:设置请求地址url
method:设置请求方式
form表单发送请求会刷新页面，如果用preventDefault（）也会把添加数据这一默认事件阻止,所以使用Ajax来操作
get请求 将参数拼接在url后面（也就是路径中），有大小限制，4K左右的大小。
请求参数可以在地址栏看到，不安全。
post请求 将参数放在请求体中，没有大小限制。相对安全。

  1. <!-- 
  2.         action:设置请求地址url
  3.         method:设置请求方式
  5.         localhost: 本机地址的域名  对应的ip：127.0.0.1
  6.         8080:端口号
  8.         form表单发送请求会刷新页面
  10.         get请求 将参数拼接在url后面，有大小限制，4K左右的大小。
  11.         请求参数可以在地址栏看到，不安全。
  13.         post请求 将参数放在请求体中，没有大小限制。相对安全。
  15.      -->
  16.      <form action="" method=""></form>
  17.     <form action="http://localhost:8080/register" method="get" id="myform">
  18.         <input type="text" name="username">
  19.         <input type="text" name="password">
  20.         <input type="submit" value="注册">
  21.     </form>
  22.     <script>
  23.         myform.onsubmit = function(e){
  24.             // e.preventDefault()
  25.         }
  26.     </script>

网址的构成：

(1)协议： http https ，超文本传输协议，规定了网络上传输数据的格式。
请求：请求行(请求方式 get post)
请求头
请求体（post请求参数，放在请求体中）
响应：响应行 ：状态码
响应头
响应体 ：存放的是服务端返回的数据
(2)域名： 每个域名对应的都有一个ip
DNS 解析器：将域名解析为对应的ip
(3)端口号: 代表不同的服务
(4)资源路径
(5)查询字符串：请求参数 放在?后面，参数之间用&链接

Ajax发送get请求需要以下几个步骤：

1.创建请求对象 var x = new XMLHttpRequeat()
2.设置请求方式和请求路径 x.open(‘get或post’,[http://localhost:8080/register?username=${uname.value}&password=${psw.value}](http://localhost:8080/register?username=${uname.value}&password=${psw.value}))
3.发送请求 x.send()
4.接收服务器返回的数据
x.onreadystatechange=function(){
if (x.readyState == 4 && x.status == 200) {

responseText:获取到的服务器的数据，response Text是获得字符串形式的响应数据
responseXML:获取到的服务器的数据，responseXML是获得XML形式的响应数据
var data = JSON.parse(x.responseText);
if (data.status == XXX) {
// 注册成功
// 跳转到登录页面
location.href = ‘./login.html’
}else{
// 用户名已存在
error.innerHTML = data.msg;
}
}
}
// 接口文档：
// 请求方式： get
// 请求路径： http://localhost:8080/register
// 请求参数： 必填参数 username，password
// 返回的数据：status 值为1，表述注册成功；值为0，表示用户名已存在
// msg: 说明注册的状态信息

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：

属性 描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
status 200: “OK”
404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <form action="" id="myform">
  13.         <input type="text" name="username" id="uname">
  14.         <span id="error"></span><br>
  15.         <input type="password" name="password" id="psw"><br>
  16.         <input type="submit" value="注册">
  17.     </form>
  19.     <script>
  20.         // 接口文档：
  21.         // 请求方式： get
  22.         // 请求路径： http://localhost:8080/register
  23.         // 请求参数： 必填参数 username，password
  24.         // 返回的数据：status 值为1，表述注册成功；值为0，表示用户名已存在
  25.         //            msg: 说明注册的状态信息
  27.         myform.onsubmit = function(e){
  28.             e.preventDefault(); //阻止页面刷新的默认行为
  29.             // 使用 ajax 发送get请求
  30.             // 1.创建请求对象
  31.             var xhr = new XMLHttpRequest();
  32.             // 2.设置请求方式和请求路径
  33.             xhr.open('GET',`http://localhost:8080/register?username=${uname.value}&password=${psw.value}`);
  34.             // 3.发送请求
  35.             xhr.send();
  36.             // 4.接收服务端返回的数据 
  37.             xhr.onreadystatechange = function(){
  38.                 if (xhr.readyState == 4 && xhr.status == 200) {
  39.                     // console.log(xhr.responseText);
  40.                     var data = JSON.parse(xhr.responseText);
  41.                     if (data.status == 1) {
  42.                         // 注册成功
  43.                         // 跳转到登录页面 
  44.                         location.href = './login.html'
  45.                     }else{
  46.                         // 用户名已存在
  47.                         error.innerHTML = data.msg;
  48.                     }
  49.                 }
  50.             }
  51.         }
  52.     </script>
  53. </body>
  54. </html>

post请求例子

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9. </head>
  11. <body>
  12.     <form action="" id="myform">
  13.         <input type="text" name="username" id="uname">
  14.         <span id="error"></span><br>
  15.         <input type="password" name="password" id="psw"><br>
  16.         <input type="submit" value="注册">
  17.     </form>
  18.     <script>
  19.         // 接口文档
  20.         // 请求方式：get
  21.         // 请求路径：http://localhost:8080/register
  22.         // 请求参数：必填参数username，password
  23.         // 返回的数据：status值为1表示注册成功，0表示失败，用户名已存在；msg:说明注册的状态信息
  25.         myform.onsubmit = function (e) {
  26.             e.oreventDefault();
  27.             // 使用Ajax发送post请求
  28.             // 1.创建请求对象
  29.             var xhr = new XMLHttpRequest()
  30.             // 2.设置请求方式  请求路径
  31.             xhr.open('post', 'http://localhost:8080/register')
  33.             // 3.设置参数
  35.             // 方式一
  36.             // var param = `username=${uname.value}&password=${psw.value}`
  37.             // // 定义请求头中参数的格式类型
  38.             // xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
  40.             // 方式二
  41.             var param={
  42.                 username:uname.value,
  43.                 password:psw.value
  44.             }
  45.             param=JSON.stringify(param)
  46.             xhr.setRequestHeader('Content-type','application/json')
  48.             // 4.发送请求
  49.             xhr.send(param)
  50.             // 5.接收服务端返回的数据
  51.             xhr.onreadystatechange = function () {
  52.                 if (xhr.readyState == 4 && xhr.status == 200) {
  53.                     var data = JSON.parse(xhr.responseText)
  55.                     if (data.status == 1) {
  56.                         alert('注册成功')
  57.                         // 跳转到登录页面
  58.                         location.href = './login.html'
  59.                     } else {
  60.                         // alert('该用户名已存在')
  61.                         error.innerHTML = data.msg
  62.                     }
  63.                 }
  64.             }
  65.         }
  66.     </script>
  67. </body>
  69. </html>