1、AJAX简介：
AJAX 指异步 JavaScript 及 XML（Asynchronous JavaScript And XML），其核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
若想使用AJAX，首先我们浏览器必须要支持XMLHttpRequest对象，当然现代的浏览器基本都提供了对它的支持，只是其创建方法可能不同。下面我们先看一个AJAX的使用实例，对其有一个大至的了解。
实例：ajax_test.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>AJAX测试</title>
</head>
<body>
这是一个AJAX的测试文件！
</body>
</html>test.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>AJAX测试</title>
</head>
<script type="text/javascript">
function show(){
//创建XMLHttpRequest对象
var xml;
if (window.XMLHttpRequest){
xml=new XMLHttpRequest();
}else if (window.ActiveXObject){
xml=new ActiveXObject("Microsoft.XMLHTTP");
}
if(xml){
//事件处理
xml.onreadystatechange = function(){
if (xml.readyState==4){
var str=xml.responseText;
document.getElementById("content").innerHTML=str;
}
};
//设置请求的相关信息（请求类型、URL、是否异步）
xml.open("GET", "ajax_test.html", true);
//发送请求至服务器
xml.send(null);
} else {
alert("您的浏览器版本太低，请升级您的浏览器！");
}
}
</script>
<body>
<input type="button" value="AJAX" οnclick="show()"/>
<div name="content" id="content"></div>
</body>
</html>上面的例子会把ajax_txt.html的显示内容写入到test.html的div中。通过上面的例子我们可以看出，AJAX的使用很简单，只需以下几个步骤：创建XMLHttpRequest对象->设置请求信息->发送请求->返回后的处理。
XMLHttpRequest的对象的创建，不同的浏览器方法不同，对于IE7+、Firefox、Chrome、Safari以及Opera均内建XMLHttpRequest对象，而对于IE5和IE6则需使用ActiveX对象。为了兼容对浏览器的兼容，我们可以使用如下代码：
<script type="java/script">
var xml;
if (window.XMLHttpRequest){
xml=new XMLHttpRequest();
}else if (window.ActiveXObject){
xml=new ActiveXObject("Microsoft.XMLHTTP");
}else{
alert("你的浏览器太旧了，换新的吧！！！");
}
</script>代码很简单，就不多说了！
4、发送请求
AJAX向服务器发送请求时，主要用到XMLHttpRequest的open()和send()两个方法。
a、open(method,url,async)
此方法用于对请求信息的设置，method表示发送的方式（POST和GET），URL表示所请求的地址，ASYNC表示是否异步。
b、send(string)方法
发送请求信息，如果为GET则不用设置参数，如为POST则将请求POST的数据做为参数。c、setRequestHeader(header,value)
用于设置请求头信息header为规定头的名称，value为值。
例：xml.setRequestHeader("Content-type","application/x-www-form-urlencoded");5、事件响应处理
AJAX向服务器发送完请求后，就要根据服务器的响应来做不同的处理，这时要用到XMLHttpRequest对象的onreadystatechange事件，构建相应的响应函数以进行处理。每当readyState属性改变时，onreadystatechange事件就会被调用（readyState的变化：0、请求末初始化；1、服务器连接已建立；2、请求已接收；3、请求处理中；4、请求已完成，且响应已就绪）。status属性：200、OK；404、末找到页面。一般对响应结束后的处理程序如下：
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
对于服务器的返回数据有两种形式，responseText和responseXML其中前者返回的是一个字符串，后者返回的是一个XML对象。
二、实际应用
本节对在使用AJAX时，遇到的一些问题做一个总结（持续更新中）。
1、使用AJAX发送FORM表单中的请求：
对于在应用中我们可能会遇到这样的问题，需要将一个FORM表单中的数据通过AJAX来传到服务器，当数据量很小时很简单，只需每个取出拼到请求串上就可以了，但当较多时这就比较麻烦而且代码的复用性也不强，下面的代码解决了这样的问题，当然其原理也是拼接了一个请求串并POST到服务器。
<script type="java/script">
function ajaxSubmitForm(formid) {
form=document.getElementById(formid);
var elements = form.elements;
var element;
var i;
var postContent = "";
//拼接请求字符串
for(i=0;i<elements.length;++i) {
var element=elements[i];
if(element.type=="text" || element.type=="textarea" || element.type=="hidden") {
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";
}else if(element.type=="select-one"||element.type=="select-multiple") {
var options=element.options,j,item;
for(j=0;j<options.length;++j){
item=options[j];
if(item.selected) {
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(item.value) + "&";
}
}
}else if(element.type=="checkbox"||element.type=="radio") {
if(element.checked) {
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";
}
}else if(element.type=="file") {
if(element.value != "") {
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";
}else {
postContent += encodeURIComponent(element.name) + "=" + encodeURIComponent(element.value) + "&";
}
}
}
ajaxSubmit(form.action, form.method, postContent);//注意表单中不要有名为action的HTML对象
}
function ajaxSubmit(url, method, postContent){
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else if (window.ActiveXObject){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if(xmlhttp){
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState==4){
//响应处理
alert(xmlhttp.responseText);
}
};
if(method.toLowerCase() == "get"){
xmlhttp.open("GET", url + "?" + postContent, true);
xmlhttp.send(null);
}else if(method.toLowerCase() == "post") {
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(postContent);
}
} else {
alert("您的浏览器版本太低，请升级您的浏览器！");
}
}
</script>
2、请求的页面中含有JS代码。
最近遇到这样的一个问题，用AJAX去请求一个页面，返回的页面中含有JS代码，当用AJAX返回后就失去了效果，不能调用了。后来提出了两种解决方法：第一种方法：将请求页面中的JS抽取出来做为一个单独的JS文件，然后加载到显示页面中，这种方法减少了AJAX的传送数据量，处理起来也比较简单。第二种方法：经过网上查找资料发现也可以将返回页面中的JS做一些特殊处理，使其生效，在此重点介绍一下。
首先，返回页面中的JS之所以不能被调用，是因为没有被浏览器解析，那么我们可不可以让返回的JS也进行解析呢，网上找到一种方法是将返回的JS单独提取出来，加入到<head>中。但是为什么这样就会被解析，偶不太清楚，还望大侠们指点！下面是实现的代码：
<script type="text/javascript">
function show(){
var xml;
if (window.XMLHttpRequest){
xml=new XMLHttpRequest();
}else if (window.ActiveXObject){
xml=new ActiveXObject("Microsoft.XMLHTTP");
}
if(xml){
xml.onreadystatechange = function(){
if (xml.readyState==4){
var str=xml.responseText;
var script=str.match(/<script[^<>]*>[^>]*<\/script>/g);
str=str.replace(/<script[^<>]*>[^>]*script>/g,"");
//除JS外的页面内容加载到DIV中
document.getElementById("content").innerHTML=str;
script=script[0].replace(/(<script[^<>]*>)|(<\/script>)/g,"");
var temp=document.createElement("script");
temp.innerHTML=script;
document.getElementsByTagName("head").item(0).appendChild(temp);
}
};
xml.open("GET", "script.php", true);
xml.send(null);
} else {
alert("您的浏览器版本太低，请升级您的浏览器！");
}
}
</script>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
