zoukankan      html  css  js  c++  java
  • js 实现对ajax请求面向对象的封装

             AJAX 是一种用于创建高速动态网页的技术。通过在后台与server进行少量数据交换。AJAX 能够使网页实现异步更新。这意味着能够在不又一次载入整个网页的情况下,对网页的某部分进行更新。
            在js中使用ajax请求一般包括三个步骤:
                  1、创建XMLHttp对象
                  2、发送请求:包含打开链接、发送请求
                  3、处理响应
            在不使用不论什么的js框架的情况下。要想使用ajax。可能须要向以下一样进行代码的编写

    var xmlHttp = xmlHttpCreate();//创建对象
    xmlHttp.onreadystatechange = function(){//响应处理
    	if(xmlHttp.readyState == 4){
    		console.info("response finish");
    		if(xmlHttp.status == 200){
    			 console.info("reponse success");
    			console.info(xmlHttp.responseText);
     		}
    	}
    }
    xmlHttp.open("get","TestServlet",true);//打开链接
    
    xmlHttp.send(null);//发送请求
    
    function xmlHttpCreate() {
    	var xmlHttp;
    	try {
    		xmlHttp = new XMLHttpRequest;// ff opera
    	} catch (e) {
    		try {
    			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");// ie
    		} catch (e) {
    			try {
    				xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    			} catch (e) {
    
    			}
    		}
    	}
    	return xmlHttp;
    }
    
    console.info(xmlHttpCreate());

    假设在比較复杂的业务逻辑里面使用这样的ajax请求,会使得代码非常臃肿,不方便重用,而且能够看到,可能在server响应成功后要处理一个业务逻辑操作。这个时候不得不把操作写在onreadystatechage方法里面。


    为了方便代码的重用我们能够做出例如以下处理;
          1、server响应成功后,要处理的业务逻辑交给开发者自己处理
          2、对请求进行面向对象的封装
    
    处理之后看起来应该像以下这个样子:
    
    window.onload = function() {
    	document.getElementById("hit").onclick = function() {
    		console.info("開始请求");
    		ajax.post({
    				data : 'a=n',
    				url : 'TestServlet',
    				success : function(reponseText) {
    					console.info("success : "+reponseText);
    				},
    				error : function(reponseText) {
    					console.info("error : "+reponseText);
    				}
    		});
    	}
    }
    
    var ajax = {
    	xmlHttp : '',
    	url:'',
    	data:'',
    	xmlHttpCreate : function() {
    		var xmlHttp;
    		try {
    			xmlHttp = new XMLHttpRequest;// ff opera
    		} catch (e) {
    			try {
    				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");// ie
    			} catch (e) {
    				try {
    					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    				} catch (e) {
    
    				}
    			}
    		}
    		return xmlHttp;
    	},
    	post:function(jsonObj){
    		ajax.data = jsonObj.data;
    		ajax.url = jsonObj.url;
    		//创建XMLHttp对象,打开链接、请求、响应
    		ajax.xmlHttp = ajax.xmlHttpCreate();
    		ajax.xmlHttp.open("post",ajax.url,true);
    		ajax.xmlHttp.onreadystatechange = function(){
    			if(ajax.xmlHttp.readyState == 4){
    				if(ajax.xmlHttp.status == 200){
    					jsonObj.success(ajax.xmlHttp.responseText);
    				}else{
    					jsonObj.error(ajax.xmlHttp.responseText);
    				}
    			}
    		}
    		ajax.xmlHttp.send(ajax.data);
    	}
    };
    
    上述代码实现了相似jquery中的ajax操作,读者有不懂的地方能够慢慢思考或者在此留言 
    

















    
    

  • 相关阅读:
    【反射】Java反射机制
    Composer教程之常用命令
    Composer教程之基础用法
    Composer教程之初识Composer
    Composer 的结构详解
    现代 PHP 新特性系列(七) —— 内置的 HTTP 服务器
    现代 PHP 新特性系列(一) —— 命名空间
    现代 PHP 新特性系列(二) —— 善用接口
    现代 PHP 新特性系列(三) —— Trait 概览
    现代 PHP 新特性系列(四) —— 生成器的创建和使用
  • 原文地址:https://www.cnblogs.com/yjbjingcha/p/6914463.html
Copyright © 2011-2022 走看看