您的位置：首页 > 其它

AJAX简单应用

2015-08-30 00:36 363 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航