今天呐,咱来聊聊这个 onreadystatechange。一开始我也不懂这是个啥玩意儿,就知道它好像跟那个什么 AJAX 有关系。那阵子我不是在搞一个网页项目嘛就想着让页面能自动更新一些数据,不用老是手动刷新,这样用户体验能好点儿。然后我就去网上搜搜,发现好多人都提到这个 onreadystatechange,说它是 AJAX 的一个关键部分。
我当时就懵,啥是 AJAX?啥又是 onreadystatechange?这一堆乱七八糟的,给我整得头都大。但有个毛病,就是不服输。我就不信,我搞不定这个小玩意儿!于是我就开始各种查资料,看教程,学得那叫一个昏天黑地。
我试着去理解它的概念。读好些资料,还是迷迷糊糊的,总觉得理解的不够透彻。我就想,光看这些干巴巴的文字也不行,还是得动手试试。然后我就找一个简单的例子,跟着人家一步一步地敲代码。
- 第一步,先创建一个 XMLHttpRequest 对象。这玩意儿就跟咱们平时用的浏览器差不多,但是它可以在后台偷偷地跟服务器通信,不影响咱们当前页面的显示。
- 第二步,设置一个回调函数给 onreadystatechange。这个回调函数就像一个“监听器”,随时注意着请求状态的变化。
- 第三步,用 open() 方法配置这个请求,告诉它你要去哪个地址,用什么方法(GET 还是 POST)等等。
- 第四步,用 send() 方法把请求发出去。
发出去之后,我就盯着那个 onreadystatechange,看看它有啥反应。刚开始,它那个 readyState 属性一直是 0 、1 、2 这样变来变去的,我也看不懂。后来我才知道,原来这个属性有五个状态:
- 0:请求还没初始化。
- 1:服务器连接已建立。
- 2:请求已接收。
- 3:请求处理中。
- 4:请求已完成,且响应已就绪。
只有当 readyState 变成 4 的时候,才说明请求彻底搞定,服务器那边也把数据啥的发回来。而且还得看看 status 属性是不是 200。这个 status 是 HTTP 的状态码,200 表示一切 OK,要是 404 或者 500,那就说明出问题。
当时我就发现,这 onreadystatechange 属性还挺有意思的,它会在状态改变的时候触发。当状态为4的时候,表示请求完成,数据也到手。我可以在回调函数里,用 responseText 或者 responseXML 属性拿到服务器返回的数据,然后更新到我的页面上。这不就实现我想要的那个页面自动更新的功能嘛
经过这一番折腾,我总算是把这个 onreadystatechange 给搞明白。过程挺曲折的,但也挺有成就感的。现在我再遇到类似的需求,就知道该怎么用 AJAX 去处理。而且我还发现,很多看似复杂的东西,只要你肯下功夫去研究,去实践,都能搞定。
通过这回实践,我是真真切切体会到“实践出真知”这句话的含义。好,今天就分享到这儿,希望能给大伙儿带来一点帮助。