数据的封装处理主要展现在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封装数据处理简单操作的更多相关文章

  1. ajax代码及简单封装

    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); ...

  2. 简单的基于promise的ajax封装

    基于promise的ajax封装 //调用方式: /* ajaxPrmomise({ url:, method:, headers:{} }).then(res=>{}) */ ;(functi ...

  3. 妹味6：ajax与ajax封装

    (功能)ajax能且仅能 从服务器读取文件 (环境)需要服务器环境才能测试,可以用工具建立本地服务器环境 (缓存)解决缓存问题:url加时间戳让每次请求地址唯一,如 url='abc.txt?t='+ ...

  4. ajax的使用：例题、ajax的数据处理

    需要注意的是,调用的封装的数据库,和jQuery的保存地址 一.注册 (1)写文本框来进行用户名的验证 <input type="text" id="uid&quo ...

  5. ajax请求原理及jquery $.ajax封装全解析

    .ajax原理: Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面.这其中最关键的一步就是从服务器获得 ...

  6. 异步ajax请求数据处理

    jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax ...

  7. Javascript:来一个AJAX封装函数

    前不久换工作了,最近一直在出差,忙得跟狗一样,所以博客都荒废许久了. 最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的—-但他又是基于 ...

  8. js封装、简单实例源码记录

    1.运动封装:doMove ( obj, attr, dir, target, endFn )  加入回调.&&.||用法注释 <script> var oBtn1 = d ...

  9. 自己封装的poi操作Excel工具类

    自己封装的poi操作Excel工具类 在上一篇文章<使用poi读写Excel>中分享了一下poi操作Excel的简单示例,这次要分享一下我封装的一个Excel操作的工具类. 该工具类主要完 ...

随机推荐

  1. Deeplearning.ai课程笔记-结构化机器学习项目

    目录 一. 正交化 二. 指标 1. 单一数字评估指标 2. 优化指标.满足指标 三. 训练集.验证集.测试集 1. 数据集划分 2. 验证集.测试集分布 3. 验证集.测试集大小 四. 比较人类表现 ...

  2. 彻底解决Spring mvc中时间的转换和序列化等问题

    痛点 在使用Spring mvc 进行开发时我们经常遇到前端传来的某种格式的时间字符串无法用java8的新特性java.time包下的具体类型参数来直接接收. 我们使用含有java.time封装类型的 ...

  3. C#中equals和==的区别有哪些

    本文导读:C# 中==是用来判断变量的值是否相等,相等返回true,不相等返回false.Equals是用来判断两个对象(除string类型外)是否相等,相等的 条件是:值,地址,引用全相等,因为St ...

  4. WinForm开发(4)——使用Visual-Studio-2010-打包安装程序

    打包程序: 1,解决方案—右键菜单“添加”—新建项目—其他项目类型—安装和部署—Visual Studio Installer—安装项目,输入名称Setup1,点“确定” 2,添加开始程序中的文件夹: ...

  5. CSS——textarea多行文本框禁止拖动问题解决

    文本框这样配置就好 textarea{ resize:none; }

  6. XCOJ1250: 语言战争

    1250: 语言战争 时间限制: 1 Sec  内存限制: 64 MB提交: 203  解决: 46 标签提交统计讨论版 题目描述 llc和yrc语言的优劣一直都是大家所争论的焦点,但它们之间最大的区 ...

  7. Vue项目——去哪网(首页部分)

    业务逻辑 通过gitee创立各个分支,比如swiper,header,recommende等分支,其实就是整个页面上的每个模块.模块化是公司级别项目开发的基准,每个人在各自的分支上进行代码的编写,而对 ...

  8. Wcf托管在IIS中,HttpContext.Current为空

    config中需要配置 <serviceHostingEnvironment aspNetCompatibilityEnabled="true"/> 另需要在服务类上加 ...

  9. java finalize学习

    1 finalize()调用的时机 与C++的析构函数(对象在清除之前析构函数会被调用)不同,在Java中,由于GC的自动回收机制,因而并不能保证finalize方法会被及时地执行(垃圾对象的回收时机 ...

  10. slice 、 substr 、replace

    slice( 参数1  [,参数2] )        (注意不要让[参数1]下标越过[参数2]下标,否则会得到空字符串,且[参数2]是不包含在截取范围内的) 参数1:截取字符的[起始下标]. 值为正 ...