Ajax的get和post使用和案例分享

ajax学习笔记

使用ajax需要先创建一个对象，用于在后台与服务器交换数据

//xmlhttp 这个名字可以随便起
var xmlhttp = new XMLHttpRequest();

当创建完对象后，需要向服务器发起请求

发送请求我们需要使用，XMLHttpRequest对象的open()和send()方法

xmlhttp.open("GET","test.txt",true);
xmlhttp.send();

说明

open() 属性解析：

1.method：请求的类型，GET或POST

2.url:文件的路径

3.async：异步 true 或 同步 false

send(string) 属性解析：

• 将数据发送到服务器
• string 仅限于POST请求

GET和POST的区别

GET方法：

1. GET比POST更快更简单，大部分都可以使用。

POST方法：

1.无法使用缓存文件；

2.向服务器发送大量数据(POST没有数据量限制)；

3.涉及敏感字符时；

当发送到服务器时，还需要执行一些基于响应的任务。那么我们就需要一个事件来监控它。

onreadystatechange 事件。每当状态改变时就会调用这个函数。
readyState存有XMLHttpRequest状态。分别是从0~4。
0：请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

每当readyState发生改变就会调用onreadystatechange函数。

除此之外，我们还需要另一个状态码–status。我们只要记住200表示的是成功，404表示未找到页面。

在readyState4并且status200时，表示相应已就绪。

get请求例子（1）

<h3 id="text">点击按钮改变文字</h3>
<input type="button" value="按钮" onclick="loadXMLDoc()">

<script type="text/javascript">
	function loadXMLDoc(){//点击后调用的函数
		var xmlhttp = new XMLHttpRequest();//创建一个对象，用于在后台与服务器交换数据
		xmlhttp.onreadystatechange = function(){//状态发生变化时，函数被回调
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				document.getElementById("text").innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("GET","test.txt",true);
		xmlhttp.send();
	}
</script>

get请求例子(2)

<div>
	<div>
		<h3 id='mydiv'>点击按钮，这里就变字</h3>
	</div>
	<input type="button" onclick="loadXMLDoc()" value="点击变字">
</div>
<script type="text/javascript">
	function loadXMLDoc(){//get方法
		var xmlhttp;
		xmlhttp = new XMLHttpRequest();//创建一个对象，用于在后台与服务器交换数据
		xmlhttp.onreadystatechange = function(){//状态发生变化时，函数被回调
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				document.getElementById("mydiv").innerHTML = xmlhttp.responseText;
			}
		}
		//Math.floor(Math.random()*10)会产生一个1到9的数字
		xmlhttp.open("GET","get.php?rdm="+Math.floor(Math.random()*10),true);
		xmlhttp.send();
		}
</script>

post请求例子

<div id="box">
	<div>
		<h3 id="test">点击按钮变字</h3>
	</div>
	<input type="button" value="点击变字" onclick="loadXMLDoc()" />
</div>

<script type="text/javascript">
	function loadXMLDoc(){
		var xmlhttp;
		xmlhttp = new XMLHttpRequest();
		xmlhttp.onreadystatechange = function(){
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				document.getElementById('test').innerHTML = xmlhttp.responseText;
			}
		}
		xmlhttp.open("POST","post.php",true);
		xmlhttp.send();
	}
</script>

ajax例子网址