Ajax(Asynchronous JavaScript and XML)异步的JavaScript和XML
所有支持js的浏览器都支持Ajax,基本上全部的浏览器都支持XMLHttpRequest对象,IE5和IE6支持的是ActiveXObject对象
向服务器发送数据使用open( )方法和send( )方法
open方法主要是规定请求的类型,传递三个参数method(请求类型get/post) / url(文件在服务器上的位置) / async(异步还是同步)
Send方法主要是将请求发送到服务器
Get与Post的不同:
Get | Post | |
---|---|---|
后退刷新 | 无害 | 数据会重新提交 |
书签 | 可以收藏 | 不可收藏 |
缓存 | 能缓存 | 不能缓存 |
编码类型 | Application/x-www-form-urlencoded | Application/x-www-form-urlencoded 或 multipart/form-data为二进制数据使用多重编码 |
历史 | 参数保存在浏览器历史中 | 参数不保存在浏览器历史中 |
对数据长度的限制 | 存在数据限制,get向url添加数据,url长度最长为2048个字符 | 无限制 |
对数据类型的限制 | 只允许Asc码 | 无限制 |
安全性 | 安全性较差 | 比get安全些 |
可见性 | 数据对所有人可见,因为保存在url中 | 不显示在url中 |
这里使用Get与Post方法传输数据存在一个很大的不同之处,主要是Get发送数据直接将想要取得数据包含在url中即可
xmlhttp.open(“Get”, “/try/ajax/dome.php?name=herry&age=12”, true);
但是使用Post方法需要添加一个setRequestHeader( )来添加HTTP头,然后追send( )方法中规定想要发送的数据
xmlhttp.open(“POST”, “try/ajax/dome.php”, true);
xmlhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xmlhttp.send(“name=herry&age=12”);
这里一般使用的都是异步的传输获取后台数据的方法,既然是异步的就需要确定当前服务器的状态,使用onreadystatechange事件,里面判断xmlhttp.readyState == 4和xmlhttp.status == 200 确定当前的服务器处于正常状态
服务器的响应获取服务器上的数据存在两种数据类型,一种是text类型,另一种是XML类型,需要使用responseText或者responseXML属性进行解析
<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>
<div id="myDiv">
<h2>使用 AJAX 修改文本内容</h2>
</div>
<button type="button" onclick="myFunction()">修改内容</button>
创建标准函数,每次使用都是相同的东西,只是url索取的文件解析方法不同,所以只需要传递这两个参数即可