原生ajax

最新推荐文章于 2025-04-03 21:25:56 发布

HexString

最新推荐文章于 2025-04-03 21:25:56 发布

阅读量184

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/HexString/article/details/105217336

一直以来，每次需要使用ajax就又去学习一下，但是每次都是这次学会，下次使用的时候又忘了，所以我这些想要做一个总结，以下的内容都是来自W3C中的内容

这是一个完整的ajax

<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("POST","/ajax/demo_post2.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//如果POST需要发送数据，就把这一行加上，否则其他情况不需要
xmlhttp.send("fname=Bill&lname=Gates");
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
 
</body>
</html>

第一步：

创建XMLHTTPRequest对象（老版的IE5和IE6使用ActiveX对象）

var xmlhttp;
if(window.XMLHttpRequest)
	{
		xmlhttp = new XMLHttpRequest();
	}else{
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}

第二步：

向服务器发送请求

//true代表异步，get请求中请求的参数直接放到URL中，如：（URL = "ssm-student/register?name="+name+"&password="+password）
xmlhttp.open("GET",url,true);
//如果是POST请求，并且POST请求需要发送数据，就把数据放到send()方法中，如：（xml.send("name="+name+"&password="+password)）
//并且，需要使用setRequestHeader()来添加HTTP头
//如：xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xml.send();

GET请求和POST请求的区别：
与POST相比，GET更简单也更快，并且大部分情况下都能使用，但是，在以下情况中，使用POST：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST没有数据量限制）
发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

缓存问题：在使用jquery的Ajax或是jsp/servlet时，会出现一种情况就是，第一次访问页面发送请求，获取的数据是从数据库中获取的，但是再次点击按钮，发送请求时就不去数据库搜索数据了，而是读取缓存中的数据，这样就会造成数据脏读，所以要清理缓存。
cache : false/true ,表示不清理/清理缓存，使之每次都起数据库中取得最新数据。
为了避免这种请求，可以在URL中添加一个唯一的ID

xmlhttp.open("GET","ssm-student/register?t="+Math.random(),true);
xmlhttp.send();

第三步：

响应数据

属性	描述
responseText	获得字符串形式的响应数据
responseXML	获得XML形式的响应数据

使用：

//responseText文本响应
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;

//responseXML xml对响应
var xmlDoc = xmlhttp.responseXML;

第四步：

onreadystatechange事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务，每当readyStatus改变时，就会触发onreadystatechange事件，readyStatus属性存有XMLHTTPRequest的状态信息，

属性	描述
onreadystatechange	存储函数，每当readyState属性改变时，就会调用该函数
readyState	存有XMLhttpRequest的状态，从0到4发生变化: 0(请求未初始化），1（请求服务器已建立），2（请求已接收），3（请求处理中），4（请求已完成，且响应已就绪）
status	200：(OK), 400：(未找到页面)