【AJAX学习笔记（一）】Ajax的使用

最新推荐文章于 2024-05-01 10:24:31 发布

Esmeralda_cai

最新推荐文章于 2024-05-01 10:24:31 发布

阅读量103

点赞数

文章标签： ajax javascript java

本文链接：https://blog.csdn.net/Esmeralda_dsj/article/details/116264747

版权

前言

本文主要记录第一次使用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即可打开)

<!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>

//ajax_get.txt（也可以是asp,php类型的文件）

<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=成功

以上为学习笔记，仅供参考，如有错误，欢迎指正，谢谢～

Esmeralda_cai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【AJAX学习笔记（一）】Ajax的使用

前言本文主要记录第一次使用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
复制链接

扫一扫