传统的表单提交方式与ajax

传统的表单提交方式

html的form标签具备一个属性action, 可以指定表单的submit事件触发时提交的后台地址。

image.png

这种方式发送的请求会使用页面地址发生改变，变成请求的后台地址（页面跳转），这会带来不好的用户体验。

image.png

Ajax技术

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
以下是一个使用ajax与后端交互的基本写法。

image.png

XMLHttpRequest

XMLHttpRequest 是 AJAX 的基础。
所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
创建 XMLHttpRequest 对象的语法：
var xhr =new XMLHttpRequest();

向服务器发送请求

如需将请求发送到服务器，需要使用 XMLHttpRequest 对象的 open() 和 send() 方法。 image.png

监听XMLHttpRequest对象的readyState改变

每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。当 readyState 等于 4 且状态为 200 时，表示请求完成且响应已就绪。

image.png

服务器响应

此时（当 readyState 等于 4 且状态为 200 时），如需获得来自服务器的响应，就需要使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。 image.png

onreadystatechange的位置

其实，只要创建了XMLHttpRequest对象后， 就可以编写onreadystatechange的事件处理函数了，放在send()后send()前或是open()前都是可以的，区别是事件处理函数触发的次数不同，如下

image.png
image.png

通常我们关心的是xhr.readyState === 4 && xhr.status === 200时的情况（此时后端响应的数据已填充到xhr.responseText中，可以取出来使用了）。

而回到一开始传统表单提交时导致页面跳转的问题，ajax解决了。 image.png
运行结果：
image.png
页面地址没有改变，数据已获取到当前页面的控制台（剩下的就是在当前页面某个区域展示数据了）。