封装自己的ajax

最新推荐文章于 2022-04-25 20:48:13 发布

fachew

最新推荐文章于 2022-04-25 20:48:13 发布

阅读量149

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/fachew/article/details/97617957

版权

笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

问题：
我们发现在用ajax进行业务处理时，ajax的代码有很多地方是相同的。
这样会造成编写代码时出现重复编写，影响开发的效率。
解决：
使用封装
实现：
相同的保留，不同的传参。
请求方式：method
请求地址：url
请求参数：data，请求参数的格式为键值对格式的字符串，不同的键值对使用&符号隔开，如果没有请求数据则传入null
例：“a=1&b=2”
异步同步：ansyz
响应处理参数：deal200
该参数接收js的函数对象，函数对象中声明ajax响应数据的处理逻辑代码
注意：函数对象需要声明一个形参来接收要处理的响应数据

一、js文件

js/AjaxUtil.js


    //声明ajax函数
    function MyAjax(method,url,data,deal200,ansyz){
		//创建ajax引擎对象
		var ajax;
		if(window.XMLHttpRequest){
			ajax=new XMLHttpRequest();
		}else if(window.ActiveXObject){
			ajax=new ActiveXObject("Msxml2.XMLHTTP");
		}
		//声明监听事件
		ajax.onreadystatechange=function(){
			//判断ajax状态码
			if(ajax.readyState==4){
				//判断响应状态码
				if(ajax.status==200){
				//获取响应数据
				var data=ajax.responseText;
				if(deal200){
				deal200(data);
				}
			}
		    }
		}
		//创建并发送请求
		if("get"==method.toLowerCase()){
			//创建请求
			ajax.open("get",url+(data==null?"":"?"+data),ansyz);
			//发送请求
			ajax.send(null);
		}else if("post"===method.toLowerCase()){
			//创建请求
			ajax.open("post",url,ansyz);
		  	//设置请求参数为键值对方式
		  	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			//发送请求
			ajax.send(data);
		}
		
    }

二、jsp文件

Fz.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'Fz.jsp' starting page</title>
    <!-- 引入js文件 -->
    <script type="text/javascript" src="js/AjaxUtil.js"></script>
    <!-- 声明js代码域 -->
    <script type="text/javascript">
    //使用ajax进行处理
    MyAjax("get", "data", "uname=张三", function(a){
    	alert(a)
    	;})
   
    </script>
  </head>
  
  <body>
   <h3>ajax封装学习</h3>
  </body>
</html>

三、运行图

在这里插入图片描述

fachew

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
封装自己的ajax

问题：我们发现在用ajax进行业务处理时，ajax的代码有很多地方是相同的。这样会造成编写代码时出现重复编写，影响开发的效率。解决：使用封装实现：相同的保留，不同的传参。请求方式：method请求地址：url请求参数：data，请求参数的格式为键值对格式的字符串，不同的键值对使用&符号隔开，如果没有请求数据则传入null例：“a=1&b=2”异步同步：ansy...
复制链接

扫一扫