JS AJAX

创建时间:2019.07.01 修改时间:2019.07.01

AJAX 方法可以使页面在不跳转或刷新的情况下向服务器发送数据(get 或 post 方式),并接收数据。

<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari  浏览器执行代码 
		xmlhttp = new XMLHttpRequest();
	}
	else
	{
		// 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", "/try/ajax/ajax_info.txt", true);
	xmlhttp.send();
}
</script>

<div id="myDiv"><h2> 使用  AJAX  修改该文本内容 </h2></div>
<button type="button" onclick="loadXMLDoc()"> 修改内容 </button>

创建 XMLHttpRequest 对象

该对象用于在后台与服务器交换数据。

向服务器发送请求

使用 XMLHttpRequest 对象的 open() 和 send() 方法。

发送 get 请求:

xmlhttp.open("GET", "/try/ajax/demo_get2.php?fname=Henry&lname=Ford", true);
xmlhttp.send();

发送 post 请求:

xmlhttp.open("POST", "/try/ajax/demo_post2.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

先使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定发送的数据内容。

异步和同步

true 表示异步,false 表示同步。

当使用异步时应规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数。

异步时,不需要编写 onreadystatechange 函数,把代码放到 send() 语句后面即可。

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

为创建 XMLHttpRequest 对象编写一个标准的函数

<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
  {// IE7+, Firefox, Chrome, Opera, Safari  代码 
  xmlhttp=new XMLHttpRequest();
  }
else
  {// IE6, IE5  代码 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

function myFunction()
{
	loadXMLDoc("/try/ajax/ajax_info.txt",function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	});
}
</script>