ajax基础-优快云博客

本文链接：https://blog.youkuaiyun.com/u014330950/article/details/72842856

本文介绍了一种利用AJAX技术实现网页局部刷新的方法。通过一个简单的示例演示了如何创建XMLHttpRequest对象来向服务器发起GET请求，并在不重新加载整个页面的情况下更新特定HTML元素的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在环境里运行比如php的

index.html

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onClick="loadXMLDoc()">try to click</button>

</body>
</html>

解释一下

1.创建 XMLHttpRequest 对象（如果是高级的浏览器就XMLHttpRequest如果是低级的就ActiveXObject）
2.当服务器响应就绪时执行函数（这个例子的函数是把收到的信息写到myDiv里）（这是响应onreadystatechange这是就绪readyState==4status==200）

readyState	
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status	
200: "OK"
404: 未找到页面

3.把请求发送到服务器上的文件open() 和 send()

test1.txt

AJAX is not a programming language.
It is just a technique for creating better and more interactive web applications.