最近在实际的项目中经常会用到AJAX这个东西,之前对于AJAX的了解很少,后来通过一段时间的学习突然发现AJAX在很多功能方面能够节省很多不必要的弯路,并且能够是实现我们所说的局部刷新,这使得页面的友好性大大得到了增强,很多开发者都学习了AJAX的相关技术,通过与后台的结合能够开发出很多意想不到的效果,下面是本人在学习阶段整理的一些AJAX手记,希望会对大家有所帮助。
AJAX是指异步的javaScript及XML(Asynchronous JavaScript And XML)
AJAX是2005年Google推广的一种编程模式。
AJAx不是一种新的编程语言,而是一种现有标准的新的方法。
通过与后台的少量的数据交换,AJAX可以使用网页实现异步更新,这意味着可以在不用重新加载整个网页的情况下,对网页的某个部分进行更新。
Google通过使用Google Suggest使AJAX流行起来。
AJAX并没有创建出很多新的标准,AJAX基于已有的标准,这些标准已被开发者使用多年。
XMLHttpRequest对象是AJAX的基础。
现在已有的浏览器都支持XMLHttpRequest对象,但是IE5,IE6浏览器使用ActiveXObject对象。
例如:创建一个XMLHttpRequest对象,为了适应不同的浏览器,使用if,else同时创建。
var xmlhttp;
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
XMLHttpRequest对象用于和服务器交换数据
xmlhttp.open("GET","text1.txt",true);
xmlhttp.send();
open(method,url,async);method包括:请求的类型,GET或POST;
URL:文件服务器上的位置,选择控制的后台文件;
async:处理请求,true(异步)或者false(同步);
send(String str);将请求的数据发送到服务器。String str代表传递的一个字符串,仅用于POST请求;
与post相比,get更简单也更快捷,并且在大部分情况下都能够正常使用。
然而 (1) 无法使用缓存文件(更新服务器上的文件或数据库)(2) 向服务器发送大量数据(POST 没有数据量限制)
(3) 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
AJAX中的XMLHttpRequest对象如果要用于AJAX的话,其open()方法的async参数必须是ture;
async=true时
xmlhttp.opreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("post","text1.txt",true);
xmlhttp.send();
async=false时
xmlhttp.open("post","text.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
服务器响应:如果需要获取一个来自服务器的响应,就必须要使用XMLHttpRequest对象的reponseText或responseXML属性。
responseText:获取字符串形式的响应数据;
responseXML:获取XML形式的相应数据;
responseText属性:如果来自服务器的请求不是XML形式的请求,就需要使用responseText属性。
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
responseXML属性:如果需要来自服务器相应的XML,而且需要作为XML对象进行解析,就需要使用responseXML属性。
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for(int i=0;i<x.length;i++){
txt = txt+x[i].childNodes[0].nodeValue+"<br/>"
}
document.getElementById("myDiv").innerHTML = txt;
onreadystatechange事件:当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当readyState改变时,就会触发onreadystatechange事件。
readyState属性存有XMLHttpRequest的状态信息。
XMLHttpRequest对象的三个重要属性:onreadystatechange,readyState,status;
onreadystatechange:存储函数(函数名),每当readyState属性改变时,就会触发该事件;
readyState:存有XMLHttpRequest的状态,从0--4共5个状态。
0:请求为初始化;
1:服务器链接已建立;
2:请求已接受;
3:请求处理中;
4:请求已完成,且响应就绪。
status:200:“OK”;404:未找到指定页面。
在onreadystatechange事件中,我们规定当地服务器响应已做好被处理的准备时执行任务。
当readyState等于4且状态status为200时,表示响应就绪。
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
CallBack函数:callback函数是一种以参数形式传递给另一个函数的函数。
如果在一个网站项目中存在多个AJAX的任务,那么就应该为创建XMLHttpRequest创建一个标准的函数,并为每个AJAX任务调用函数。
该函数调用应该包涵URL以及发生onreadystatechange事件时执行的任务。(调用时可能不会相同)
function myFunction(){
loadXMLDoc("ajax_info.txt",function(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
});
}
上面的都是整理了一些有关于AJAX的基础知识,希望对初学者有用,大部分参考的W3cschool中的相关知识,具体很多东西的实现大家还需要多学习,多掌握,AJAX作为Google所推广的一门新技术给网页的异步刷新带来了巨大的突破,本人也是正处于学习阶段,有很多不懂的东西希望大家以后多多交流,多多沟通,共同学习,共同进步。