简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > AJAX与FormData
Blogger Information
Blog 43
fans 1
comment 0
visits 33808
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
AJAX与FormData
蔚蓝世纪
Original
728 people have browsed it

一、什么是AJAX

  1. AJAX = Asynchronous JavaScript And XML.
  2. AJAX 并不是编程语言。
  3. AJAX 是一种从网页访问 Web 服务器的技术。
  4. AJAX 代表异步 JavaScript 和 XML。

二、AJAX工作原理

三、AJAX的核心

Ajax 的核心是 XMLHttpRequest 对象。所有现代浏览器都支持 XMLHttpRequest 对象。

创建 XMLHttpRequest 的语法是：
  1. variable = new XMLHttpRequest();

四、AJAX实例

  1. //1.创建Ajax对象
  2.   var xhr = new XMLHttpRequest();
  4. //2.监听请求状态的变化情况
  5.    xhr.onreadystatechange = function () {
  6.         if (xhr.readyState === 4 && xhr.status === 200) {
  7.           console.log(xhr.responseText);
  8.         }
  9.     };
  11. //3.初始化请求参数
  12. // xhr.open("请求类型","请求URL",是否异步);
  13.    xhr.open("POST", "test3.php", true);
  15. //4.设置请求头，模拟表单类型的数据进行发送,application/x-www-form-urlencoded默认值，要记住
  16.       xhr.setRequestHeader("content-type", "application/json;charset=utf-8");
  18.       var user = {
  19.         emial: "admin@php.cn",
  20.         password: "123456",
  21.       };
  22. // 将js对象转为json
  23. var data = JSON.stringify(user);
  24. //4.发送请求
  25. xhr.send(data);
输出效果：

上例可以有另一种更简洁优雅的写法
  1. //FormData
  2. //可以直接序列化表单数据
  3. //可直接被Ajax识别，所以可以不设置请求头
  4. //除了表单数据外，也可用于普通数据
  5. //1.创建Ajax对象
  6. var xhr = new XMLHttpRequest();
  8. //2.监听请求状态的变化情况
  9. xhr.onreadystatechange = function () {
  10.    if (xhr.readyState === 4 && xhr.status === 200) {
  11.           console.log(xhr.responseText);
  12.         }
  13.     };
  15. //3.初始化请求参数
  16. // xhr.open("请求类型","请求URL",是否异步);
  17. xhr.open("POST", "test4.php", true);
  19. //FormData
  20.   var data = new FormData();
  21.   data.append("username", "admin");
  22.   data.append("password", "admin888");
  24. //4.发送请求
  25.   xhr.send(data);

六、使用FormData制作一个响应表单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Ajax-POST-FormData</title>
  7.   </head>
  8.   <body>
  9.     <p>请登录</p>
  10.     <!-- onsubmit="return false": 禁用表单的默认提交,改为自定义的Ajax提交 -->
  11.     <form
  12.       action=""
  13.       method="POST"
  14.       style="display: grid; gap: 15px;"
  15.       onsubmit="return false"
  16.     >
  17.       <input
  18.         type="email"
  19.         name="email"
  20.         placeholder="exam@email.com"
  21.         required
  22.         autofocus
  23.       />
  24.       <input type="password" name="password" placeholder="******" required />
  25.       <button>提交</button>
  26.     </form>
  27.     <script>
  28. // 1. 获取表单和按钮
  29. var form = document.querySelector("form");
  30. var btn = document.querySelector("form button");
  32. // 2. 给按钮绑定点击事件,进行Ajax请求
  33.    btn.onclick = function () {
  34. // 1. 创建Ajax对象
  35.     var xhr = new XMLHttpRequest();
  37. // 2. 监听请求
  38.      xhr.onreadystatechange = function () {
  39.           if (xhr.readyState === 4 && xhr.status === 200) {
  40.     console.log(xhr.responseText);
  42. // 将jsonl转js对象
  43. var res = JSON.parse(xhr.responseText);
  44. console.log(res);
  46. switch (res.status) {
  47. case 0:
  48. case 1:
  49. error = res.message;
  50. break;
  51. default:
  52. error = "未知错误";
  53.      }
  55. // 将提示显示到表单中
  56. var span = document.createElement("span");
  57.       span.innerHTML = error;
  58.       span.style.color = "red";
  59.       form.appendChild(span);
  60.       }
  61.    };
  63. // 3. 初始化请求参数
  64.         xhr.open("POST", "test4.php", true);
  66. // FormData
  67.  var data = new FormData(form);
  68. data.append("login_time", new Date().getTime());
  70. // 5. 发送请求
  71. xhr.send(data);
  72. };
  74. // 清除提示信息
  75. var inputs = document.querySelectorAll("input");
  77. for (var i = 0; i < inputs.length; i++) {
  78.         inputs[i].oninput = function () {
  79.           if (btn.nextElementSibling !== null)
  80.             form.removeChild(btn.nextElementSibling);
  81.         };
  82.       }
  83.     </script>
  84.   </body>
  85. </html>
输出效果：


七、总结

1.向服务器发送请求时用GET 比 POST 更简单响应速度更快，可用于大多数情况下。但是，如果遇到以下情况要始终使用 POST：缓存文件不是选项时（更新服务器上的文件或数据库）;向服务器发送大量数据时（POST 无大小限制）;发送用户输入时（可包含未知字符），POST 比 GET 更强大更安全。
2.通过异步发送，JavaScript 不必等待服务器响应，而是可以：在等待服务器响应时执行其他脚本或者当响应就绪时处理响应。解决了在服务器上执行许多任务时非常耗时，且因此操作可能会导致应用程序挂起或停止的问题。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：get/post只是使用场景不同, 并无快慢之分, 如果服务器响应太慢, get也会非常非常慢的
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！