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>