Ajax学习一

来源：互联网发布：windows 10 教育版编辑：程序博客网时间：2024/06/16 15:13

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");  }

创建好之后接下来是像服务器推送数据

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")；。

获取服务器的响应数据

属性描述responseText获得字符串形式的响应数据。responseXML获得 XML 形式的响应数据。

xmlhttp.responseText

xmlhttp.responseXML

这样获取的服务器返回的值

onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

属性描述onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
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>

0 0