自定义封装 Ajax 方法——并调用

最新推荐文章于 2022-08-31 12:29:18 发布
最新推荐文章于 2022-08-31 12:29:18 发布
阅读量1k 收藏 3
点赞数
分类专栏： Ajax 自定义封装Ajax 文章标签： Ajax JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44830260/article/details/100057739
版权

自定义封装Ajax方法——并调用

Ajax 是什么

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
注意，Ajax只能接收后端即servlet传来的打印流数据——printWrite，不能获取servlet作用域对象里的数据

  1. Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
  2. Ajax = 异步 JavaScript 和 XML 或者是 HTML（标准通用标记语言的子集）。
  3. Ajax 是一种用于创建快速动态网页的技术。
  4. Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
  5. Ajax技术核心是XMLHttpRequest对象(简称XHR)，它是一门与服务端进行数据交换的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

自定义封装Ajax代码

放入WebRoot下的自定义文件夹内，文件名取为MyAjax.js

/**
 * @author Cool.R
 * @since 2019-08
 * 
 * @param type传输方式 get 或 post  默认get
 * @param url目标路径
 * @param sync是否启用异步 默认启动异步
 * @param data  需要传输的参数 格式 “ name1=value1&name2=value2 ” 等等
 * @param sucess  服务器成功相应后的操作 自定义函数
 * @param noFound  请求页面无法获取时的操作 自定义函数
 * @param error   服务器内部错误时的操作 自定义函数
 * @param loading  页面成功加载前的相应 自定义函数
 */
function myAjax(type, url, sync, data, success, noFound, error, loading) {
	if (type == null) {
		type = "get";
	}
	if (sync == null) {
		sync = true;
	}
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {  /* onreadystatechange 事件是用来检测readyState值的变化
	 										readyState的值每变化一次，onreadystatechange事件就会被触发，从而运行其绑定的函数
	 										readyState值的范围是0、1、2、3、4，当readyState==4表示请求得到相应并成功*/
		if (xhr.readyState == 4) {
			if (xhr.status == 200) {    /* status值是服务器返回的HTTP状态码，200代表成功，404代表所请求的页面未找到 500表示服务器内部错误					*/
				success(xhr);
			} else if (xhr.status == 404) {
				noFound(xhr);
			} else if (xhr.status == 500) {
				error(xhr);
			}
		} else {
			loading(xhr);
		}
	}
	if (type.toLowerCase() == "get") {
		if (data == null) {
			xhr.open(type, url + data, sync);
			xhr.send();
		} else {
			xhr.open(type, url + "?" + data, sync);
			xhr.send();
		}
	}
	if (type.toLowerCase() == "post") {
		if (data == null) {
			xhr.open(type, url, async)
			xhr.setRequestHeader("content-type",
					"application/x-www-form-urlencoded");
			xhr.send(data);
		} else {
			xhr.open(type, url, async)
			xhr.setRequestHeader("content-type",
					"application/x-www-form-urlencoded");
			xhr.send();
		}
	}
}

调用自定义Ajax

<%@ 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 'MyAjax.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script src="Ajax/myAjax.js"></script>
<script type="text/javascript">
	/* 	function myAjax(method,url,sync,data,sucess,noFound,error,loading){
	 if(sync==null){
	 sync=true;
	 }
	 var xhr=new XMLHttpRequest();
	 xhr.onreadystatechange=function(){
	 if(xhr.readyState==4){
	 if(xhr.status==200){
	 sucess();
	 }else if(xhr.status==404){
	 noFound();
	 }else if(xhr.status==500){
	 error();
	 }
	 }else{
	 loading();
	 }
	 }
	 if(method.toLowerCase() == "get"){
	 xhr.open(method,url+"?"+data,sync);
	 xhr.send();
	 }
	 if(method.toLowerCase() == "post"){
	 xhr.open(method, url, async)
	 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
	 xhr.send(data);
	 }
	 } */
	/*
	function egAjax(){
		var xhr=new XMLHttpRequest();
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4){
				if(xhr.status==200){
					//成功
				}else if(xhr.status==404){
					//未找到
				}else if(xhr.status4==500){
					//服务器抢修中
				}
			}else{
				//努力加载中
			}
		}
		
		
		xhr.open("post", "Hello", true);
		xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
		xhr.send();
	} */
	/* 自定义success   noFound   error  loading  相应函数 */
	var sucess = function(xhr) {
		document.getElementById("dv1").innerHTML = "<img src='timg.gif' />"+xhr.responseText;
	}
	var noFound = function(xhr) {

		document.getElementById("dv1").innerHTML = "NoFound!";
	}

	var error = function(xhr) {

		document.getElementById("dv1").innerHTML = "错误！！！";
	}

	var loading = function(xhr) {

		document.getElementById("dv1").innerHTML = "加载中.......";
	}
	
	/* 調用自定义封装的的Ajax方法 */
	function test(){
	myAjax("get", "Hello", true, "name=齐天大圣&age=25", sucess, noFound, error,
			loading);
}
</script>

<style type="text/css">
#dv1 {
	width: 900px;
	height: 200px;
	border: 1px solid red;
	vertial-align: middle;
	text-align: center;
	line-height: 200px;
	background-color: skyblue;
}
#dv1 img {
	height:200px;
	line-height: 200px;
	opcatiy: 0.5;
	
}
</style>
</head>

<body>
	<button onclick="test()">测试</button>
	<div id="dv1"></div>
</body>
</html>

进行逻辑处理的servlet

package com.coolr.ajax;

import java.io.IOException;
import java.io.PrintWriter;

import javax.lang.model.element.VariableElement;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Hello extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doPost(request, response);
	}

	
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//设置接收字符集
		request.setCharacterEncoding("utf-8");
		//设置响应字符集
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out=response.getWriter();
		try {
			Thread.sleep(5000);
		} catch (InterruptedException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		out.write("你好，新数据！");
		String name= request.getParameter("name");
		String age=request.getParameter("age");
		System.out.println(name+"\n"+age);
		out.write(name+"\n"+age);
	}

}

web.xml配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>Ajax8_23</display-name>
  <servlet>
    <servlet-name>Hello</servlet-name>
    <servlet-class>com.coolr.ajax.Hello</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>Hello</servlet-name>
    <url-pattern>/Hello</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
</web-app>

效果

点击测试按钮在这里插入图片描述

线程模拟睡眠5秒在这里插入图片描述

自定义Ajax封装优化

把需要自定义传入的形参改为对象。对象的好处是，对象.操作可以直接生成对象，也可以作为获取使用，在自封装的Ajax方法的形参列表写一个obj即可，使自定义封装的Ajax函数更简单，而且不需要填入非必须的参数。

/**
 * @author Cool.R
 * @see 2019-08
 * @param obj
 *            传入各种对象 {type:"get"} ,{success:function(){xxxxx}}等形式传入参数
 */
function myAjax(obj) {
	if (obj.type == null) {
		obj.type = "get";
	}
	if (obj.sync == null) {
		obj.sync = true;
	}
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function() {
		if (xhr.readyState == 4) {
			if (xhr.status == 200) {
				obj.success(xhr);
			} else if (xhr.status == 404) {
				obj.noFound(xhr);
			} else if (xhr.status == 500) {
				obj.error(xhr);
			}
		} else {
			obj.loading(xhr);
		}
	}
	if (obj.type.toLowerCase() == "get") {
		if (data != null) {
			xhr.open(obj.type, obj.url + "?" + obj.data, obj.sync);
			xhr.send();
		} else {
			xhr.open(obj.type, obj.url + "?" + obj.data, obj.sync);
			xhr.send();
		}
	}
	if (obj.type.toLowerCase() == "post") {
		if (data != null) {
			xhr.open(obj.type, obj.url, obj.async)
			xhr.setRequestHeader("content-type",
					"application/x-www-form-urlencoded");
			xhr.send(obj.data);
		} else {
			xhr.open(obj.type, obj.url, obj.async)
			xhr.setRequestHeader("content-type",
					"application/x-www-form-urlencoded");
			xhr.send(obj.data);
		}
	}
}
Cool.R
关注
专栏目录
详解自定义ajax支持跨域组件封装
11-29
【自定义Ajax组件封装】 在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种用于创建动态网页的技术，它允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。自定义Ajax组件封装通常是...
ajax请求数据的步骤以及自定义指令的创建步骤
m0_63135911的博客
08-31 269
vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。vue 中的自定义指令分为两类，分别是：私有自定义指令 全局自定义指令2-1.自定义指令的创建步骤需要传入指令名称以及一个包含指令钩子函数的对象，该对象的键即钩子函数的函数名，值即函数体，钩子函数可以有多个}})通过在Vue实例中添加 directives 对象数据注册局部自定义指令。...
js之原生ajax、Jquery-$.ajax、自定义ajax（post请求、get请求）
qq_48617322的博客
08-31 1807
js之原生ajax、Jquery-$.ajax、自定义ajax（post请求、get请求）
jQuery Ajax 全解析
weixin_30699463的博客
04-21 97
.ajax div{ border: solid 1px red; } 本文地址: jQuery Ajax 全解析 本文作者：QLeelulu 转载请标明出处！ jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。 废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对j...
动态表格（ajax+json），添加点击事件，获取点击按钮所在行的值
qq_45634989的博客
07-14 906
效果：（后期可以自己加css效果） 查找功能 1、数据库连接 package com.gk.dao; import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; public class DaoConnect { public static Connection getConnect(){ Connection con = null; Str
用jq实现调用ajax方法并返回使用
qq_35181466的博客
07-17 648
设置同步请求ajax，但是发的请求多就会出现排队问题，请谨慎使用 let useData = {} useData.userId=1, console.log('调用ajax结束',ajaxUse("aaa.aaa",useData))//由于是同步ajax，所以返回值是ajax请求回来的值 function ajaxUse(toUrl,useData){ let getRes...
JavaScript——Ajax
03-18
8. **封装Ajax函数**：为了提高代码复用性，通常会将Ajax请求封装成一个函数，例如，压缩包中的`myutil.js`可能就是一个自定义的Ajax工具函数。这个函数可能包含错误处理、默认参数、请求头设置等功能。 9. **...
jQuery自定义插件开发基础1——jQuery实用函数的实现
04-18
在这个例子中，`myFunction`现在可以像其他jQuery方法一样被调用，如`$('selector').myFunction()`。 2. **接受参数**： 为了使插件更具灵活性，你可以传递参数以改变其行为。这可以通过在函数内部使用`arguments...
ASP[1].NET+2.0+Ajax——Web开发技术详解 23章
10-25
2. **ScriptManager**：此控件负责管理页面上的Ajax资源，如JavaScript库和Web服务调用，它还负责引入客户端脚本库和注册Ajax事件。 3. **Partial Page Rendering**：通过Ajax，服务器仅返回需要更新的HTML片段，而...
Ajax的jsonp方式跨域获取数据的简单实例
10-22
Ajax的jsonp方式跨域获取数据的简单实例中，涉及到了Web开发中常见的跨域问题以及解决这一问题的方法之一——JSONP（JSON with Padding）。为了深入理解，让我们从以下几个方面探讨这些知识点： 1. 跨域问题 在Web...
jquery自定义类似$.ajax()的方法实现代码
10-27
$.ajax()的方法想必大家都不会陌生，下面为大家介绍下使用jquery自定义类实现类似$.ajax()的方法，感兴趣的朋友可以参考下
自己封装ajax
qq_45149045的博客
11-23 705
实现步骤和思路 目标： 模拟axios和jQuery的ajax，封装一个自己的ajax 思路： 我给这个ajax起名叫 tools，之后下文也用 tools 称呼这个自定义ajax，首先tools肯定是一个封装的函数，然后调用这个“ajax”时传入如同jquery那样的对象参数，然后它通过XMR实现功能 明确要传入tools的实参和各种情况： tools({ method: '请求方式', url: '资源路径', params: {}, //get参数 data: {a
自定义封装Jquery ajax方法
CSU_Zipple的博客
09-27 2212
jquery自带的ajax方法为什么要封装？ 在前后端分离或者需要大量使用ajax方法的情况下，一直使用Jquery自身封装的ajax方法是不太实用的，代码冗余量太大。 这里提供自定义的两种封装方法：/** * 使用ajax GET 提交前端数据 * @param url 接口路径 * @param obj 接口所需参数 * @param isAsync 是否接受异步 */ functi
自定义封装的ajax框架,能处理类似jquery中ajax格式的内容
weixin_43294560的博客
12-24 173
传送后台的路径需要时修改 (function (){function myajax(jsonObj) { //根据请求类型处理参数 if(jsonObj.type.toLowerCase()=="get") { var arr=[] //将json的data参数变成数组 for(var i in jsonObj.data) { ...
js之自定义封装ajax类
mingzidaodiduochang的专栏
11-05 1397
//open("get",url),url要加Math.random() //send()发送请求,post的时候传入字符串参数，歧义值用encodeURIComponent //onreadystatechange readystate==4数据返回\status==200 //responseText responseXML得到一个xml对象，dom核心方法访问 //s
封装自定义AJAX请求函数
Yangson工作室
10-23 527
在网页中经常需要利用AJAX向后台请求数据，需要创建XMLHttpRequest对象。在请求个数不多时，可以单独写请求函数。可是如果请求数量多，就会有大量的重复性代码。为了减少冗余，就可以对请求函数进行封装，将一系列的请求操作逻辑封装好，我们只需调用这个函数，传入参数变量即可。 一、源代码 <!DOCTYPE html> <html> <head> ...
封装自己的Ajax函数
m0_57101855的博客
04-17 581
aja() 函数是我们自定义的 Ajax 函数，它接收一个配置对象作为参数，配置对象中可以配置如下属性： method 请求的类型 url 请求的 URL 地址 data 请求携带的数据 success 请求成功之后的回调函数 封装分为三步： 1.把外界传递过来的参数转化为查询字符串格式 // 处理data函数 // 功能：把数据对象转化为查询字符串格式发送到服务器 function resolveData(data) { var arr = []; // for…...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值