Ajax学习一 2015-11-23 09:16 97人阅读 评论(0) 收藏
1.
XMLHttpRequest 是 AJAX 的基础
所以首先要创建 XMLHttpRequest
xmlhttp=new
XMLHttpRequest();
因考虑有一些浏览器兼容性问题 不支持 XMLHttpRequest 所以这样创建
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");
}
2.
创建好之后接下来是像服务器推送数据
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send()
用到了XMLHttpRequest open（）和send（）这两个方法。
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
参数：
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步
send(string)
将请求发送到服务器。
参数：
string：仅用于 POST 请求
如果发送的是get请求则吧参数写到URL后面就可以了
然后用send（）这个方法吧请求发送的服务器 参数不用谢就行了
如果发送的是POST请求 则吧 参数写到send（）的参数里面URL后面不用跟着写参数 如：xmlhttp.send("fname=Bill&lname=Gates")；。
3.
获取服务器的响应数据
| 属性 | 描述 |
|---|---|
| responseText | 获得字符串形式的响应数据。 |
| responseXML | 获得 XML 形式的响应数据。 |
xmlhttp.responseText
xmlhttp.responseXML
这样获取的服务器返回的值
4.
onreadystatechange事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 |
| readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
| status |
200: "OK" 404: 未找到页面 |
下面这个例子就是说 onreadystatechange事件 以及相应的响应判断
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
AJAX完整例子
<html>
<head>
<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","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>
</body>
</html>
