AJAX简单应用

来源：互联网发布：word 字数统计 mac 编辑：程序博客网时间：2024/06/04 18:55

AJAX全称是Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，而传统的网页如果需要更新内容，必需重新加载整个页面。

1、创建对象
所有现代浏览器(IE7+、Firefox、Chrome、Safari以及Opera)均支持XMLHttpRequest对象，但IE5和IE6使用ActiveXObject,该对象用于在后台与服务器交换数据。
创建对象语法：
var xmlhttp = new XMLHttpRequest();
IE5和IE6创建对象语法：
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

2、向服务器发送请求
如需将请求发送到服务器，需要使用XMLHttpRequest对象的open()和send()方法。
open方法：
open(method,url,async)

method:请求的类型，有GET或POST
url:文件在服务器上的位置
async:选择方式，有true(异步)货false(同步)

GET与POST区别：
与POST相比，GET更简单也更快，并且在大部分情况下都能用。
但是，以下情况中，请使用POST请求：

无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST没有数据量限制)
发送包含未知字符的用户输入时(密码隐藏信息)，POST比GET更稳定也更可靠。

send方法：
send(string)
将请求发送到服务器，string仅用于POST请求。
示例程序一： GET请求
xmlhttp.open("GET","/cgi-bin/test.cgi?para=test&var='123'",true);
xmlhttp.send();
示例程序二：POST请求
xmlhttp.open("POST","/cgi-bin/test.cgi?para=test&var='123'",true);
xmlhttp.send();
如果需要向HTML表单那样POST数据，请使用setRequestHeader()来添加HTTP头。
xmlhttp.open("POST","/cgi-bin/test.cgi?para=test&var='123'",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send();

3、服务器响应
如需获得来自服务器的响应，使用XMLHttpRequest对象的responseText或responseXML属性。
responseText 获得字符串形式的响应数据
responseXML 获得XML形式的响应数据
如果来自服务器的响应并非XML，请使用responseText属性
示例程序：
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
如果来自服务器的响应是XML，而且需要作为XML对象进行解析，请使用responseXML属性。

4、readyState状态
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当readyState改变时，就会触发onreadystatechange事件。既当readyState属性改变时，就会调用onreadystatechange函数。
readyState的值与对应的含义：

0 ：请求未初始化
1 ：服务器连接已建立
2 ：请求已接收
3 ：请求处理中
4 ：请求已完成且响应已就绪

status的值与对应的含义：

200 ："OK"
404 ：未找到页面

在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务，也就是当readyState等于4且状态为200时，表示响应已就绪。
示例程序：
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
//返回后需要执行的任务
}
}

5、AJAX完整示例

<html><!DOCTYPE html><head><script>function loadXMLDoc(){     var xmlhttp;   if (window.XMLHttpRequest) {          xmlhttp=new XMLHttpRequest();   } else {          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   }   xmlhttp.onreadystatechange=function() {       if (xmlhttp.readyState==4 && xmlhttp.status==200) {            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;       }   }   xmlhttp.open("POST","/cgi-bin/test.cgi?para=test&var='123'",true);   xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");   xmlhttp.send();}</script></head><body><div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div><button type="button" onclick="loadXMLDoc()">修改内容</button></body></html>

2 0