设为首页 加入收藏

TOP

AJAX开发技术入门基础知识
2015-02-04 13:52:54 来源: 作者: 【 】 浏览:38
Tags:AJAX 开发技术 入门 基础知识

AJAX技术


<script language="java script">
? ? var xmlHttp ;? ? ? ? ? ? ? ? ? ? // AJAX核心对象名称
? ? function createXMLHttp() {? ? ? ? ? ? // 创建XMLHttpRequest核心对象
? ? ? ? if (window.XMLHttpRequest) {? ? ? ? // 判断当前使用的浏览器类型
? ? ? ? ? ? xmlHttp = new XMLHttpRequest();// 表示使用的为FireFox内核的浏览器
? ? ? ? } else {? ? ? ? ? ? ? ? ? ? // 表示使用的是IE内核的浏览器
? ? ? ? ? ? xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
? ? ? ? }
? ? }


对readState一共有五种取值,分别是:


function Ajax(recvType){
? ? var aj=new Object();
? ? aj.recvType=recvType ? recvType.toUpperCase() : 'HTML' //HTML XML
? ? aj.targetUrl='';
? ? aj.sendString='';
? ? aj.resultHandle=null;


? ? aj.createXMLHttpRequest=function(){
? ? ? ? var request=false;
? ? ? ?
? ? ? ? //window对象中有XMLHttpRequest存在就是非IE,包括(IE7,IE8)
? ? ? ? if(window.XMLHttpRequest){
? ? ? ? ? ? request=new XMLHttpRequest();


? ? ? ? ? ? if(request.overrideMimeType){
? ? ? ? ? ? ? ? request.overrideMimeType("text/xml");
? ? ? ? ? ? }
? ? ? ?


? ? ? ? //window对象中有ActiveXObject属性存在就是IE
? ? ? ? }else if(window.ActiveXObject){
? ? ? ? ? ?
? ? ? ? ? ? var versions=['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];


? ? ? ? ? ? for(var i=0; i? ? ? ? ? ? ? ? ? ? try{
? ? ? ? ? ? ? ? ? ? ? ? request=new ActiveXObject(versions[i]);


? ? ? ? ? ? ? ? ? ? ? ? if(request){
? ? ? ? ? ? ? ? ? ? ? ? ? ? return request;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }catch(e){
? ? ? ? ? ? ? ? ? ? ? ? request=false;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? return request;
? ? }


? ? aj.XMLHttpRequest=aj.createXMLHttpRequest();


? ? aj.processHandle=function(){
? ? ? ? if(aj.XMLHttpRequest.readyState == 4){
? ? ? ? ? ? if(aj.XMLHttpRequest.status == 200){
? ? ? ? ? ? ? ? if(aj.recvType=="HTML")
? ? ? ? ? ? ? ? ? ? aj.resultHandle(aj.XMLHttpRequest.responseText);
? ? ? ? ? ? ? ? else if(aj.recvType=="XML")
? ? ? ? ? ? ? ? ? ? aj.resultHandle(aj.XMLHttpRequest.responseXML);
? ? ? ? ? ? }
? ? ? ? }
? ? }


? ? aj.get=function(targetUrl, resultHandle){
? ? ? ? aj.targetUrl=targetUrl;? ?
? ? ? ?
? ? ? ? if(resultHandle!=null){
? ? ? ? ? ? aj.XMLHttpRequest.onreadystatechange=aj.processHandle;? ?
? ? ? ? ? ? aj.resultHandle=resultHandle;? ?
? ? ? ? }
? ? ? ? if(window.XMLHttpRequest){
? ? ? ? ? ? aj.XMLHttpRequest.open("get", aj.targetUrl);
? ? ? ? ? ? aj.XMLHttpRequest.send(null);
? ? ? ? }else{
? ? ? ? ? ? aj.XMLHttpRequest.open("get", aj.targetUrl, true);
? ? ? ? ? ? aj.XMLHttpRequest.send();
? ? ? ? }
? ? ? ?
? ? }


? ? aj.post=function(targetUrl, sendString, resultHandle){
? ? ? ? aj.targetUrl=targetUrl;


? ? ? ? if(typeof(sendString)=="object"){
? ? ? ? ? ? var str="";
? ? ? ? ? ? for(var pro in sendString){
? ? ? ? ? ? ? ? str+=pro+"="+sendString[pro]+"&";? ?
? ? ? ? ? ? }
? ? ? ? ? ? aj.sendString=str.substr(0, str.length-1);
? ? ? ? }else{
? ? ? ? ? ? aj.sendString=sendString;
? ? ? ? }


? ? ? ? if(resultHandle!=null){
? ? ? ? ? ? aj.XMLHttpRequest.onreadystatechange=aj.processHandle;? ?
? ? ? ? ? ? aj.resultHandle=resultHandle;? ?
? ? ? ? }


? ? ? ? aj.XMLHttpRequest.open("post", targetUrl);
? ? ? ? aj.XMLHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
? ? ? ? aj.XMLHttpRequest.send(aj.sendString);
? ? ? ?
? ? }


? ? return aj;
}


使用AJAX可以完成局部刷新操作;


在AJAX中主要是通过XMLHttpRequest对象完成操作。


】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇Java框架篇---Struts入门 下一篇程序开发:MVC设计模式与应用

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容: