ajax02_封装自己的jQuery库和ajax请求
封装自己的ajax类库
首先封装自己的 jQuery库
启发：css的元素选择器思想
简单的代码实现
function jQuery(selector){ if(typeof selector == "string"){
if(selector.charAt(0) == "#"){
//原先的dom对象还要留着，因为最终的实现还要用这些对象的方法去实现，我们无法完成
//domObj为全局变量
domObj = document.getElementById(selector.substring(1))
//但是由于封装了新方法，所以原先的dom对象就暂时不能用了(调用不了我们自定义的方法)，要返回自定义的jQuery对象
return new jQuery()
//如果要真正起到修改作用，必须用domObj,如果要调用我们自己扩展的方法必须用 jQuery对象
//所以可行的方法是：在我们自定义的方法里操作原生的domObj对象
}
} if(typeof selector == "function"){
window.onload = selector
} this.html = function(innerData){
domObj.innerHTML = innerData
} this.click = function(fun){
domObj.onclick = fun
} //既可以取值，又可以改值
this.val = function(v){
if(v == undefined){
return domObj.value
}else{
domObj.value = v
}
} this.change = function(fun){
domObj.onchange = fun
} $ = jQuery
封装自己的ajax请求
简单代码实现
function jQuery(selector){ if(typeof selector == "string"){
if(selector.charAt(0) == "#"){
//原先的dom对象还要留着，因为最终的实现还要用这些对象的方法去实现，我们无法完成
domObj = document.getElementById(selector.substring(1))
//但是由于封装了新方法，所以原先的dom对象就暂时不能用了(调用不了我们自定义的方法)，要返回自定义的jQuery对象
return new jQuery()
}
} if(typeof selector == "function"){
window.onload = selector
} this.html = function(innerData){
domObj.innerHTML = innerData
} this.click = function(fun){
domObj.onclick = fun
} this.val = function(v){
if(v == undefined){
return domObj.value
}else{
domObj.value = v
}
} this.change = function(fun){
domObj.onchange = fun
} /**
* 有一些动态的数据不能写死
* 动态的信息有:
* 1. 请求的类型
* 2. 请求的地址
* 3. 是否异步
* 4. 提交的数据
*/
jQuery.ajax = function(jsonArgs) {
var method = jsonArgs.type.toUpperCase()
var xhr = new XMLHttpRequest()
//发送ajax请求，将文本框里的数据提交至后端
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
var jsonObj = JSON.parse(this.responseText)
jsonArgs.callBack(jsonObj)
} else {
alert("异常状态码: " + this.status)
}
}
}
if (method == "POST") {
xhr.open(method, jsonArgs.url, jsonArgs.async)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
xhr.send(jsonArgs.data)
}
if (method == "GET") {
jsonArgs.data = "?" + jsonArgs.data
xhr.open(method, jsonArgs.url + jsonArgs.data, jsonArgs.async)
xhr.send()
}
}
} $ = jQuery new jQuery()
调用的代码
<!DOCTYPE html>
<html lang="en">
<head>
<title>全面测试jQuery类库</title>
<meta charset="UTF-8">
</head>
<body>
<script src="/ajax/js/jQuery-1.0.0.js"></script>
<script>
$(function(){
$("#btn").click(function (){
$.ajax({
type : "POST",
data : "username=" + $("#username").val(),
async : true,
url : "/ajax/ajaxRequest10",
callBack : function(json){
$("#the-div").html(json.name)
//自定义回调函数，个性化的处理后端返回的数据
}
})
})
})
</script>
<input type="text" id="username">
<input type="button" id="btn" value="点击回显数据">
<div id="the-div"></div>
</body>
</html>
ajax02_封装自己的jQuery库和ajax请求的更多相关文章
- 关于JQuery中的ajax请求或者post请求的回调方法中的操作执行或者变量修改没反映的问题
前段时间做一个项目,而项目中所有的请求都要用jquery 中的ajax请求或者post请求,但是开始处理一些简单操作还好,但是自己写了一些验证就出现问题了,比如表单提交的时候,要验证帐号的唯一性,所以 ...
- JavaScript原生封装ajax请求和Jquery中的ajax请求
前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步 ...
- jquery中的ajax请求到php（学生笔记）
首先ajax的基本语法基础.(必须得引入一个jquery文件,下面的例子展示用了网上的jquery文件,要联网.) 2.请求成功(复制代码运行观察效果) <!DOCTYPE html> & ...
- jquery版本的ajax请求
首先引入 <script src="https://code.jquery.com/jquery-3.6.0.js"></script> $ 和 jqu ...
- Jquery progressbar通过Ajax请求获取后台进度演示
项目源代码下载:http://download.csdn.net/detail/nuptboyzhb/6262253 1.简介 本文主要演示Jquery progressbar的进度条功能.js通过a ...
- 论如何把JS踩在脚下 —— JQuery基础及Ajax请求详解
一.什么是JQuery? JQuery是一种JavaScript框架,是一堆大神搞出来的能够让前端程序猿敲更少代码.实现更多功能的工具(在此,跪谢各位JQuery开发大大们!!!).JQuery的使用 ...
- jQuery选择器，Ajax请求
jQuery选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $( ...
- jquery中的ajax请求用法以及参数详情
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...
- Jquery监听AJAX请求
.ajaxComplete() 当Ajax请求完成后注册一个回调函数.这是一个 AjaxEvent. .ajaxError() Ajax请求出错时注册一个回调处理函数,这是一个 Ajax Event. ...
随机推荐
- [游记] pkusc 2021 游记
流水账 Day-4 写了ICPC的一道DP,有点细节,虽然写得有点难受,但挺好玩 Day-3 写了PKUSC2018最水的一题 是随机开的题 Day-2 可以去pkusc了,从今天中午开始停课 刚吃完 ...
- Spring 源码（11）Spring Bean 的创建过程（2）
Spring Bean 的创建过程介绍了FactoryBean 的创建方式,那么接下来介绍不是FactoryBean的创建方式,在创建过程中,又会分为单例的Bean的创建,原型类型的Bean的创建等. ...
- vue - Vue路由
至此基本上vue2.0的内容全部结束,后面还有点elementUI和vue3.0的内容过几天再来更新. 这几天要回学校去参加毕业答辩,断更几天 一.相关理解 是vue的一个插件库,专门用来实现spa( ...
- docker 1.1 介绍和安装
1.docker是什么? Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中,然后发布到任何流行的 Linux或Windows操作系统的机器上,也可以实现 ...
- 使用 Vite 插件开发构建 Tampermonkey 用户脚本
起因 一直以来,我都是直接在浏览器 Tampermonkey 扩展页面直接新建用户脚本来开发的: 对于一些简单的脚本,这没有什么问题,即改即看.但当代码多了以后问题就来了,自带编辑器开发体验确实不太舒 ...
- python常用标准库（os系统模块、shutil文件操作模块）
常用的标准库 系统模块 import os 系统模块用于对系统进行操作. 常用方法 os模块的常用方法有数十种之多,本文中只选出最常用的几种,其余的还有权限操作.文件的删除创建等详细资料可以参考官方文 ...
- 从单例谈double-check必要性，多种单例各取所需
theme: fancy 前言 前面铺掉了那么多都是在讲原则,讲图例.很多同学可能都觉得和设计模式不是很搭边.虽说设计模式也是理论的东西,但是设计原则可能对我们理解而言更加的抽象.不过好在原则东西不是 ...
- 基于“均态分布”随机数算法的一次性口令OneTimePassword（原创）
/* 所谓均态分布随机数算法是指:每个数(整数或实数)无序地分布在数轴上,值只出现一次永不重复.体现了香农的一次一密理论. * 均体现在每个数的值是平均概率,即都有出现:态体现在每个数在数轴上的位置是 ...
- midway的使用教程
一.写在前面 先说下本文的背景,这是一道笔者遇到的Node后端面试题,遂记录下,通过本文的阅读,你将对楼下知识点有所了解: midway项目的创建与使用 typescript在Node项目中的应用 如 ...
- SpringCloud微服务实战——搭建企业级开发框架（四十二）：集成分布式任务调度平台XXL-JOB，实现定时任务功能
定时任务几乎是每个业务系统必不可少的功能,计算到期时间.过期时间等,定时触发某项任务操作.在使用单体应用时,基本使用Spring提供的注解即可实现定时任务,而在使用微服务集群时,这种方式就要考虑添 ...