Ajax 封装与增删改查的使用

Ajax是Asynchronous JavaScript and XML的缩写，异步的JavaScript和XML. Ajax描述了一种主要使用脚本操作HTTP的Web应用架构，Ajax应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。

这里先演示一下Ajax的使用步骤：

先使用XMLHttpRequest构造函数使http获得HTTPAPI

var http = new XMLHttpRequest();

在使用open方式来指定HTTP方法和请求的地址

http.open('POST'或'GET',URL);

然后对获得的返回数据进行处理：

http.onreadystatechange = function(){
    if(http.status ===200&&http.readyState === 4){
    	console.log(http.responseText);
    	
        }
	}

最后使用send方法发送请求：

http.send();

其中数据的处理方法和发送请求内部的数据要根据实际情况进行更改，尤其是当请求为POST请求时要将数据转为表单格式发送，使用：

http.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');

进行转换。

接下来进行Ajax的封装，封装代码：

function myajax(method,url,param,handle,handle2){
                //传入五个参数分别为请求类型GET或POST；URL；API需要的数据；返回成功的处理；返回失败的处理
                var http = new XMLHttpRequest();
                var baseURL = 'URL接口的地址相同的地方';
                if(method === 'GET'&&param){
                   //请求方法为GET，在url后跟数据，其中encodeFormDatae为将对象数据转为HTTP对象数据的方法
                	url += '?'+encodeFormDatae(param);

                }
                http.open(method,baseURL+url);
                console.log(baseURL+url);
                http.onreadystatechange = function(){
                	if(http.status===200&&http.readyState===4){
                		console.log('访问成功');
                		handle(JSON.parse(http.responseText));

                	}else{
                		handle2(http.responseText);
                	}

                }
                if(method === 'POST'&&param){
                  //请求方法为POST进行表单转换
                	http.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8');
                	http.send(encodeFormData(param));

                }else{
                http.send();
            }
		}

！注  encodeFormDatae方法：

function encodeFormData(data){
			if(!data){
				return "";
			}
			var pairs = [];
			for(var name in data){
				if(!data.hasOwnProperty(name)){
					continue;
				}
				if(typeof data[name] == "function"){
					continue;
				}
				var value = data[name].toString();
				name = encodeURIComponent(name.replace("%20","+"));//编码名字
				value = encodeURIComponent(value.replace("%20","+"));//编码值
				pairs.push(name+"="+value);
			}
			return pairs.join('&');
		}

 

封装完成后进行增删改查的使用：

1.进行查找数据

function findAllCategory(){
			myAjax('GET','/manager/category/findAllCategory',null,function(res){
				console.log(res,'-----');
			},function(error){
				console.log(error,'++++');
			});
		}

实例：findAllCategory();

2.进行删除数据

function deleteCategoryById(obj){
			myAjax('GET','/manager/category/deleteCategoryById',obj,function(res){
				console.log(res);
				findAllCategory();
			},function(error){
				console.log(error);
			});
		}
实例：deleteCategoryById({id:1001});

3.进行增加或修改数据

function saveOrUpdateCategory(obj){
			myAjax('POST','/manager/category/saveOrUpdateCategory',obj,function(res){
				console.log(res,'新增或修改');
				findAllCategory();
			},function(error){
				console.log(error);
			});
		}
实例：saveOrUpdateCategory({name:'张三',age:18});