前言
本文主要记录第一次使用AJAX的过程以及遇到的问题和解决办法。以下链接是学习AJAX参考的几个资料,搞清楚AJAX原理之后,下面来一起使用AJAX吧!
AJAX技术学习参考:
- https://www.w3school.com.cn/ajax/index.asp
- https://blog.csdn.net/weixin_37580235/article/details/81459282
- https://segmentfault.com/a/1190000017396192
第一个AJAX程序
编写程序
- 创建两个文件如下,index.txt写我们的主网页,ajax_get.txt充当服务器上面的文件,等会我们要通过ajax获取这里面的内容,然后渲染到主页面中。
//index.txt(写完将后缀名改为html即可打开)
//ajax_get.txt(也可以是asp,php类型的文件)<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function loadXMLDoc(){ //创建XHR对象 var xmlhttp; if(window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //alert(1); //调试用 //创建回调函数 xmlhttp.onreadystatechange = function() { //alert("readyState="+xmlhttp.readyState+","+"status="+xmlhttp.status); //调试用 //alert(xmlhttp.responseText);//调试用 //if(xmlhttp.readyState==4 && xmlhttp.status==0) {//用这句代替下面的 if(xmlhttp.readyState==4 && xmlhttp.status==200) { //alert(1); document.getElementById("myDiv").innerHTML = xmlhttp.responseText; } } //alert(2);//调试用 url="ajax_get.txt"; xmlhttp.open("GET",url,true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div> <button type="button" onclick="loadXMLDoc()">修改内容</button> </body> </html>
<p>Hello, this is data by ajax from server.</p> <p>这两行数据来自ajax_get.txt中</p>
运行调试
跨域访问问题
- 双击index.html打开页面(Chrome浏览器),如下:
- 但是点击修改内容按钮,页面没有任何变化。预期效果应该是页面上的文本内容有变化。
F12打开调试工具,console页签显示有报错,cross origin…跨域访问问题,需要设置浏览器允许跨域访问。
- 打开终端窗口,输入:
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/dong/MyChromeDevUserData/
(注意修改成自己的本地路径)
这是通过命令方式打开浏览器,而且是禁用安全性设置,就是允许跨域访问了,然后之前浏览器的地址复制到新打开的浏览器地址栏中,进行访问。(如果向打开禁用跨域,就关掉浏览器重新打开就可以了) - 这次我们点击按钮,发现没有报错了。但是页面的现实效果并没有任何变化,说明程序还是有问题。
状态码status问题
- 我们先把这段代码贴着前面,方便查看。
//创建回调函数 xmlhttp.onreadystatechange = function() { //alert("readyState="+xmlhttp.readyState+","+"status="+xmlhttp.status); //[调试1] //alert(xmlhttp.responseText);//[调试2] //if(xmlhttp.readyState==4 && xmlhttp.status==0){ //[调试3] if(xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; }
- 我们尝试在javascript代码段中添加
alert()
方法进行简单的问题定位和调试(具体可以看【编写程序】步骤代码的注释部分)。
最后定位到是这句代码if(xmlhttp.readyState==4 && xmlhttp.status==200)
一直为false,也就是状态值readyState和状态码status有误,但是程序也没报错,现在也不知道为啥这两个值不对。 - 继续调试,通过
[调试1]
显示这两个值的变化,发现readyState
是从1变到4的(具体可以查看readyState的含义),最后一次是4(表示完成),没有问题,是我们想要的。但是status
的值一直是0(http状状态码中是没有0的,都是三个数字的状态码,比如404表示没找到文件),而我们期待的值是200(表示交易成功)。
- 到这里我知道了,if方法体里面执行不到原因了。先不管,先看看服务器到底有没返回响应数据,通过
[调试2]
发现最后一次显示的数据就是ajaxt_get.txt中的内容,就是我们向浏览器请求的内容。 - 到目前为止,我们已经知道了,想要得到预期效果,就把if语句换成
[调试3]
即可。也就是说,当readyState==4
且status==0
时就说明服务器已完成响应,可以获取响应的数据了。 - 现在我们来解释下为什么status的值一直说0而不是我们预期的200。参考博客
总结
AJAX技术的核心就是XMLHttpRequest对象。通过学习主要理解AJAX原理、使用以及XHR的属性含义等。
ps:其实还有一个问题我没解决,就是苹果的safari浏览器设置跨域访问,我按照网上的教程操作了几下没成功,就换Chrome浏览器操作了。
AJAX编程步骤
- 创建XRH(XMLHttpRequest)对象(注意检查浏览器兼容性)
- 设置请求方式
- 调用回调函数
- 发送请求
XHR的常用属性
onreadystatechange
状态改变的事件触发器,每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数。readyState
状态值(0-4):0=未初始化,1=正在加载,2=已加载,3=交互中,4=完成status
状态码(服务器HTTP状态码):404=文件未找到,202=成功
以上为学习笔记,仅供参考,如有错误,欢迎指正,谢谢~