AJAX封装数据处理简单操作
数据的封装处理主要展现在JS中，在页面里面引入封装的JS,
“js/ajax.js”
简单封装将get和post方法都写入，get的方法和post的方法依然需要严格区分，包括type类型也要严格书写：
function ajax(method, url, data, success) { //命名方法
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
if (method == 'get' && data) {
url += '?' + data;
}
xhr.open(method,url,true);
if (method == 'get') {
xhr.send();
} else {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
success && success(xhr.responseText);
} else {
alert('出错了,Err：' + xhr.status);
}
}
}
}
然后在页面中使用，使用时只需要引入ajax函数名字即可，然后根据使用get还是post来实现数据处理。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AJAX</title>
<style>
.myBtn{
background:#3498db;
color:#fff;
font-size:14px;
text-align:center;
width:100px;
height:36px;
line-height:34px;
border:none 0;
cursor:pointer;
margin-left:37px;
}
#content{
}
#content li{
list-style:none;
padding:10px 0;
white-space:1px;
border-bottom:1px dashed #999;
}
#content li a{
color:#000;
text-decoration:none;
transition: all 0.3s ease 0s;
}
#content li:hover a{
color:#246ab8;
padding-left:10px;
transition: all 0.3s ease 0s;
}
#content li span{
color:#777;
}
</style>
<script src="js/ajax.js"></script>
<script>
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
ajax('get','links/getNews.php','',function(data) { //ajax就是封装的函数名字
var data = JSON.parse( data ); //字符串转换
var oUl = document.getElementById('content');
var html = '';
for (var i=0; i<data.length; i++) {
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html;
});
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn" class="myBtn" />
<ul id="content"></ul>
</body>
</html>
AJAX封装数据处理简单操作的更多相关文章
- ajax代码及简单封装
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); ...
- 简单的基于promise的ajax封装
基于promise的ajax封装 //调用方式: /* ajaxPrmomise({ url:, method:, headers:{} }).then(res=>{}) */ ;(functi ...
- 妹味6：ajax与ajax封装
(功能)ajax能且仅能 从服务器读取文件 (环境)需要服务器环境才能测试,可以用工具建立本地服务器环境 (缓存)解决缓存问题:url加时间戳让每次请求地址唯一,如 url='abc.txt?t='+ ...
- ajax的使用：例题、ajax的数据处理
需要注意的是,调用的封装的数据库,和jQuery的保存地址 一.注册 (1)写文本框来进行用户名的验证 <input type="text" id="uid&quo ...
- ajax请求原理及jquery $.ajax封装全解析
.ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...
- 异步ajax请求数据处理
jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax ...
- Javascript:来一个AJAX封装函数
前不久换工作了,最近一直在出差,忙得跟狗一样,所以博客都荒废许久了. 最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的—-但他又是基于 ...
- js封装、简单实例源码记录
1.运动封装:doMove ( obj, attr, dir, target, endFn ) 加入回调.&&.||用法注释 <script> var oBtn1 = d ...
- 自己封装的poi操作Excel工具类
自己封装的poi操作Excel工具类 在上一篇文章<使用poi读写Excel>中分享了一下poi操作Excel的简单示例,这次要分享一下我封装的一个Excel操作的工具类. 该工具类主要完 ...
随机推荐
- 6.Python字符串
#header { display: none !important; } } #header-spacer { width: 100%; visibility: hidden; } @media p ...
- EasyUI中使用自定义的icon图标
我们在web开发中为了界面的更加漂亮,我们可能会使用EasyUI框架来帮我们实现一些好看的效果,那么在框架里面提供了很多的样式和图标,但是有时候自带的图标已经满足不了我们啦,这时候我们应该往里面加入我 ...
- JDBC 通过读取文件进行初始化
- 【代码学习】PYTHON 异常处理
一.什么是异常 在程序执行过程中可能会影响程序的正常执行,一般情况下,在python无法正常处理程序时就会发生一个异常 当python脚本发生异常时我们需要捕获处理他,否则程序会终止执行 二.异常处理 ...
- git合并分支到master上面
转自:https://www.cnblogs.com/mafeng/p/10173919.html 假如我们现在在dev分支上,刚开发完项目,执行了下列命令 git add .git commit - ...
- 一个支持国密SM2/SM3/SM4/SM9/ZUC/SSL的密码工具箱
转:https://blog.csdn.net/xuq09/article/details/91815366 The GmSSL Project网址:http://gmssl.org/docs/qui ...
- AOP统一日志打印处理
在日常开发工作中,我们免不了要打印很多log.而大部分需要输出的log又是重复的(例如传入参数,返回值).因此,通过AOP方式来进行日志管理可以减少很多代码量,也更加优雅. Springboot通过A ...
- java程序设计课期中考试——数据库的增删改查和简单的js界面
首先是设计思路,对于数据库的增删改查,我们借助Ecilipse来进行前端和后端的编写.Ecilipse是可以进行java web项目的操作的. 前端,我们选择用使用jsp,所谓的jsp就是可以嵌入其他 ...
- LeetCode 234. Palindrome Linked List（判断是否为回文链表）
题意:判断是否为回文链表,要求时间复杂度O(n),空间复杂度O(1). 分析: (1)利用快慢指针找到链表的中心 (2)进行步骤(1)的过程中,对前半部分链表进行反转 (3)如果链表长是偶数,首先比较 ...
- Springboot三层架构
control调用service调用dao