ajax02_封装自己的jQuery库和ajax请求
2024-09-05 17:01:57
封装自己的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>
最新文章
- Ubuntu15.04YouCompleteMe插件安装
- 前端工具-Sublime、WebStorm-快捷方式使用
- JavaScript学习笔记——对象知识点
- NEXTDAY
- github 上的pull request总结
- vs在winform中不给力哈-错误不提示
- iOS_SN_CoreData数据迁移
- 解决vsftpd 530 Permission denied报错
- uva 10304 - Optimal Binary Search Tree 区间dp
- .net在arraylist用法
- jQuery Mobile (整合版)
- print a float number with 3 digits following
- 我也谈 AngularJS 怎么使用Directive, Service, Controller
- 基于socket.io的实时在线选座系统
- win10 系统输入法与 idea的 ctr+shift+f 快捷键冲突，解决办法
- [国嵌攻略][127][tty驱动程序架构]
- LeetCode算法题-Longest Continuous Increasing Subsequence（Java实现）
- Myeclipse中的tomcat项目的内存溢出
- python 面试题--你能做出多少？
- BZOJ 1066 蜥蜴 最大流