ajax解读--java

ゞ浴缸里的玫瑰 2022-02-26 05:11 175阅读 0赞

学习过程中遇到了ajax，顺带着学习了一番，接触ajax也比较晚了，之前一直对ajax部分刷新页面的“神奇功能”心向往之，接触之后发现这也并不是什么神奇的划时代类的技术，只是伴随着前端知识体系的逐步完善应运而生的结果......

如其本名（Asynchronous Javascript and XML:异步的Javascript和XML），ajax的基本原理就是异步的Javascript，而后边的两个单词就可以直接忽略了，实际过程中其与XML的关系并不是那么Strong。

XML是我们向服务器发起请求之后所接受到的反馈文件，但实际上我们可以把反馈文件改为XML 、HTML 、CSS 、JavaScript 中的任何一种。

也就是说，ajax的核心就是异步的JavaScript了，也就是说ajax还是JavaScript，那同步和异步的JavaScript又有啥区别？看图：

![aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi1kOTE5MDRkZDU1YzEyZjNlNGZhNmY3YWY3ZjExOGIwYl9oZC5qcGc][]

这个是同步的页面请求，情况是这样的，比如当我们点击淘宝的注册按钮时，客户端浏览器向服务器发出request，服务器接收到我们的请求后，经过业务逻辑处理后反馈给我们一个注册页面，我们再进入注册页面进行操作，在我们发出request和接受server反馈结果的过程中，我们除了等页面刷新啥也干不了，而异步后就不一样了：

![aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi1lYWJiZTRiNDdlMTFhNWRjNzYxNzI5MTg2NjE4YWVkOV9oZC5qcGc][]

上图对没接触过ajax的人来说可能有点小复杂，先看解释：

接着我们上一个例子，当我们进入淘宝注册页面后，在淘宝账号栏写了一个名字，然后我们又去输入下一栏的密码，这时，当我们的鼠标聚焦离开上一个账户栏的时候，上边弹出了一个小提示“该用户名已经被使用！”

可我们没有刷新页面啊？重点来了，我们触发了form表单中input标签的“onblur”事件！这个JavaScript事件的处理方法就是，向Ajax engine发出了一个请求，放在了Ajax消息列队里，Ajax再向Server发出Request，Server处理过请求之后向browser返回了一个文件（XML或cass或HTML或...）而接收到这个文件之后，browser再用JavaScript处理反馈的数据...而关键就是:

在这个过程中，browser该干嘛干嘛，不用再像以前一样傻傻的盼星星盼月亮等着server反馈，它只用把东西交给Ajax engine就行了，它才不用管反馈结果什么时候回来。这就是异步。

具体在淘宝注册页面的体现就是，我们输入一个账户名，按下table开始输入下一栏，注册页面的form表单中name为“账户”input标签（我瞎掰的）失去聚焦触发“onblur”事件，new出来一个新的XMLHTTPRequest对象（ajax的在各个浏览器中的内置对象），把我们输入的账号发给Server，

Server查过数据库以后反馈说：这个账户名已经已经存在啦！反馈结果经过JavaScript的处理最终在页面上显示了：该用户名已存在！ 这就是ajax技术。

[aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi1kOTE5MDRkZDU1YzEyZjNlNGZhNmY3YWY3ZjExOGIwYl9oZC5qcGc]: /images/20220226/029b3ded0ad44058a9e1c1256afa2529.png
[aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi1lYWJiZTRiNDdlMTFhNWRjNzYxNzI5MTg2NjE4YWVkOV9oZC5qcGc]: /images/20220226/948d6676488b43608a522ec69c286b47.png