Ajax-基础知识 | 红颜丽人

Ajax-基础知识。

1：例子：下面的例子点击按钮会在不更新整个页面的情况下动态更新内容
abcdefg
change abcdefg
代码如下：

<html>
<head>
<script type=”text/javascript” src=”/jquery/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#bt1″).click(function(){
htmlobj=$.ajax({url:”/jquery/test1.txt”,async:false});
$(“#myDiv”).html(htmlobj.responseText);
});
});
</script>
</head>
<body>
<div id=”myDiv”>abcdefg</div>
<button id=”bt1″ type=”button”>change abcdefg</button>
</body>
</html>
2：通过 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据。AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

3：应用ajax的步骤：
a：创建XMLHttpRequest对象：variable=new XMLHttpRequest();
老版本的ie5和6使用的是ActiveXObject对象：variable=new ActiveXObject(“Microsoft.XMLHTTP”);
b：为了应对所有的现代浏览器，必须验证。
var xmlhttp；
if(window.XMLhttpRequest){ xmlhttp= new XMLhttpRequest();}
else{ xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”); }
c:如需要将请求发送到服务器，使用XMLhttpRequest对象的open()和send()方法
xmlhttp.open(“get”,”test.txt”,true);
xmlhttp.send();
d：如需获的来自服务器的响应，需使用XMLHttpRequest对象的ResponseText（获取字符串形式的响应数据）和ResponseXML（获取xml形式的响应数据）属性，如果来自服务器的数据不是xml，请使用第一个属性responseText，
可以这样使用：document.getElementById(“id”).innerHTML=responseText;
如果是xml，则需要解析，js的代码如下：

e：当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。下面是 XMLHttpRequest 对象的三个重要的属性：
属性描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status
200: “OK”

404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
}
}
4：callback（回调）函数是一种以参数形式传递给另一个函数的函数。

核心代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc){
if(window.XMLHttpRequest){ xmhhttp= new XMLHttpRequest();}
else{ xmlhttp=new XMLHttpRequest(“Microsoft.XMLHttp”);}
xmlhttp.onreadStatechange=cfunc;
xmlhttp.open(“GET”,url,true);
xmlhttp.send();
}
// 如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。<br> // 该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务（每次调用可能不尽相同）：<br> function Myfunction(){
loadXMLDoc(“/ajax/test1.txt”,function(){
if(xmlhttp.readState==”4″ && xmlhttp.state==”200″){
document.getElementById(“id”).innerHTML=xmlhttp.responseText;
}
});
}
</script>
调用时，按钮调用Myfunction

本文链接地址: Ajax-基础知识http://www.hongyanliren.com/2014m12/23735.html

相关文章