Ajax笔记
AJAX（Asynchronous JavaScript And XML）：异步的JavaScript 和 XML
AJAX是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
XMLHttpRequest
XMLHttpRequest是AJAX的基础。对象用于和服务器交换数据。
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
创建XMLHttpRequest对象的语法：variable = new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable = new ActiveXObject("Microsoft.XMLHTTP");
发送请求
如需将请求发送到服务器，需要使用XMLHttpRequest对象的open() 和 send()方法：
open()：xmlhttp.open(method，url，async);
参数：method的请求类型GET或POST，url：文件在服务器上的位置，async：true异步或false同步
send()：xmlhttp.send();
参数：send(string)：将请求发送到服务器，string仅用于POST请求。
Async=true
当使用 async=true时，规定在响应处于onreadystatechange事件中的就绪状态时执行的函数：
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){ document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
onreadystatechange事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务
每当readyState改变时，就会触发onreadystatechange事件
readyState属性存有XMLHttpRequest对象的状态信息
readyState属性状态: 0 ~ 4
-
0：请求未初始化
-
1：服务器连接已建立
-
2：请求已接收
-
3：请求处理中
-
4：请求已完成，且响应已就绪
status属性: 200-->“OK”，404-->Not Found
在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务
当readyState 为 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
注：onreadystatechange事件被触发5次（0~4），对应着每个readyState的变化
服务器响应
如需获得来自服务器的响应，需使用XMLHttpRequest对象的responseText 或 responseXML属性
xmlhttp.responseText：获取字符串形式的响应数据
xmlhttp.responseXML：获得XML形式的响应数据
GET与POST
与POST请求相比，GET更简单也更快，并且大部分情况下都能用。
然而，在以下情况中，使用POST请求：
-
无法使用缓存文件（更新服务器上的文件或数据库）
-
向服务器发送大量数据（POST没有数据量限制）
-
发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
设置请求头
xmlhttp.setRequestHeader(header，value);----POST请求需要设置
参数：header：http协议中规定的头的名称。value:为规定相应头的值。
例：xmlhttp.setRequestHeader("Content-type"，"application/x-www-form-urlencoded")
代码示例：
GET
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<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("GET", "url", true); //ajax不能跨域请求数据
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>
POST
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<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", "url", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>
浙公网安备 33010602011771号