7.ajax函数封装

7.1.实例引入

需求： 每秒钟请求一次服务器 获取到数据

实现： 把ajax进行封装

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script src="ajax.js" type="text/javascript" charset="utf-8"></script>

		<script type="text/javascript">

			window.onload = function(){

				var oBtn = document.getElementById("btn");

				oBtn.onclick = function(){

					setInterval(function(){

						ajax("get",'getData.php','',function(data){

							var oUl = document.getElementById('ul1');

							var html = ''

							for(var i = 0; i < data.length; i++) {

								var oli = document.createElement('li');

								html += '<li>'+ data[i].title + '[' + data[i].time + ']</li>';

							}

							oUl.innerHTML = html;

						});

					},1000)

				}

			}

		</script>

	</head>

	<body>

		<input type="button" id="btn" value="获取数据" />

		<ul id="ul1"> 

		</ul>

	</body>

</html>

7.2.ajax代码，普通封装：

function ajax(method,url,data,sucess) {

	//创建ajax对象

	var xhr = null;

	try {

		xhr = new XMLHttpRequest();

	} catch(e) {

		xhr = new ActiveXobject('Microsoft.XMLHTTP');

	}

	if(!method || method == "get"){

		method = "get";

		//打开要获取文件的地址

		if(data){

			url = url+"?"+data;

		}

		xhr.open(method, url, true);

		//发送请求

		xhr.send();

	}else{

		method = "post";

		xhr.open(method, url, true);

		if(data){

			//发送请求

		    xhr.send();

		}else{

			 xhr.send(data);

		}

	}

	//alert(xhr.responseText);

	//监听请求状态

	xhr.onreadystatechange = function() {

		if(xhr.readyState == 4 && xhr.status == 200) {

			var data = JSON.parse(xhr.responseText);

			 sucess && sucess();

		}

	}

}

7.3.ajax代码,封装成对象的传参的形式：

function ajax(obj) {

	//创建ajax对象

	var xhr = null;

	try {

		xhr = new XMLHttpRequest();

	} catch(e) {

		xhr = new ActiveXobject('Microsoft.XMLHTTP');

	}

	if(!obj.method || obj.method == "get"){

		obj.method = "get";

		//打开要获取文件的地址

		if(obj.data){

			obj.url = obj.url+"?"+obj.data;

		}

		xhr.open(obj.method, obj.url, true);

		//发送请求

		xhr.send();

	}else{

		obj.method = "post";

		xhr.open(obj.method, obj.url, true);

		if(data){

			//发送请求

		    xhr.send();

		}else{

			 xhr.send(obj.data);

		}

	}

	//alert(xhr.responseText);

	//监听请求状态

	xhr.onreadystatechange = function() {

		if(xhr.readyState == 4 && xhr.status == 200) {

			 var data = JSON.parse(xhr.responseText);

			 obj.success && obj.success(data);

		}

	}

}

螺钉课堂视频课程地址：http://edu.nodeing.com

ajax前后端交互原理（7）的更多相关文章

  1. ajax前后端交互原理（5）

    5.ajax简介 5.1.什么是ajax Asynchronous JavaScript and XML ,异步的javascript和XML 5.2.使用ajax有什么用 数据交互,可以从服务器获取 ...

  2. ajax前后端交互原理（1）

    1.Node.js简介 1.1.前后台数据交互流程 在web开发中,我们经常听说前端和后台,他们分别是做什么具体工作的呢?他们怎样交互的呢?我们得把这些基础的问题都搞明白了,才有一个大致的学习方向,首 ...

  3. ajax前后端交互原理（6）

    6.XMLHttpRequest对象 XMLHttpRequest 是一个 API,它为客户端提供了在客户端和服务器之间传输数据的功能.它提供了一个通过 URL 来获取数据的简单方式,并且不会使整个页 ...

  4. ajax前后端交互原理（3）

    3.HTTP服务器 3.3.相关前置知识 1 什么是url? 统一资源定位符是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示,是互联网上标准资源的地址.互联网上的每个文件都有一个唯一的UR ...

  5. ajax前后端交互原理（4）

    4.JSON 4.1 什么是JSON? JavaScript 对象表示法(JavaScript Object Notation)简称JSON,是一种轻量级的数据交换格式.虽然它基于JavaScript ...

  6. ajax前后端交互原理（2）

    2.NPM使用 2.1.NPM是什么 NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,这里要搞清楚包的概念,通俗的说,包就是具有一定功能的工具(软件),本质 ...

  7. thinkphp+jquery+ajax前后端交互注册验证

    thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  8. SSM-网站后台管理系统制作（4）---Ajax前后端交互

    前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...

  9. JSON（及其在ajax前后端交互的过程）小识

    一. json介绍 json是一种轻量级的数据交换格式,规则很简单: 并列的数据之间用逗号(,)分隔: 映射用冒号(:)表示: 并列数据的集合(数组)用方括号([])表示: 映射的集合(对象)用大括号 ...

随机推荐

  1. (Java实现) 洛谷 P1091合唱队形

    题目描述 NN位同学站成一排,音乐老师要请其中的(N−K)位同学出列,使得剩下的KK位同学排成合唱队形. 合唱队形是指这样的一种队形:设K位同学从左到右依次编号为1,2,-,K1,2,-,K,他们的身 ...

  2. Java实现 LeetCode 554 砖墙（缝隙可以放在数组？）

    554. 砖墙 你的面前有一堵方形的.由多行砖块组成的砖墙. 这些砖块高度相同但是宽度不同.你现在要画一条自顶向下的.穿过最少砖块的垂线. 砖墙由行的列表表示. 每一行都是一个代表从左至右每块砖的宽度 ...

  3. java实现识别复制串

    ** 识别复制串** 代码的目标:判断一个串是否为某个基本串的简单复制构成的. 例如: abcabcabc,它由"abc"复制3次构成,则程序输出:abc aa 由"a& ...

  4. Linux 最大有效权限与删除ACL

    最大有效权限mask mask是用来指定最大有效权限的.如果给用户赋予了acl权限,则需要与mask权限”相与“才能得到用户的真正权限 setfacl -m m:rx 文件名,指定最大有效权限.例如: ...

  5. ZSH隐藏命令行前面的用户名和主机名

    修改vim ~/.zshrc文件,在文件底部增加 隐藏用户名和主机名 prompt_context() {} 只保留用户名,隐藏主机名 prompt_context() { if [[ "$ ...

  6. Mac下如何连接linux服务器（SSH）-比较好用的SSH工具推荐

    Mac下如何连接linux服务器(SSH) 1.用mac自带终端连接 步骤如下: 打开终端,在顶部shell菜单中选择新建远程连接 在右侧服务器窗口点击+号,添加服务器,输入IP等信息 输入用户名,点 ...

  7. Git Gui工具从远程克隆代码总是提示路径已经存在。问题完美解决！

    最近使用Git Gui工具从远程克隆代码总是提示路径已经存在,提示如下图, 原因是使用Git Guii克隆代码时的路径不能是选择一个已经建好的目录(D盘的project下的test文件夹是我提前建好的 ...

  8. SignalR控制台自托管服务端向web客户端指定用户推送数据，客户端断线重连

    一.前言 SignalR是微软推出的开源实时通信框架.其内部使用Web Socket, Server Sent Events 和 Long Polling作为底层传输方式,SignalR会根据客户端和 ...

  9. 不需重新编译php,安装postgresql扩展(pgsql和pdo_pgsql)

    为了不重新编译php,使用phpize工具进行追加. 1.下载phpX安装包 访问php官方下载页,找到自己对应的php版本:https://secure.php.net/downloads.php ...

  10. [xDebug] php下的Debug的调试

    基础知识 对于php来说,debug的话,有个东西叫xdebug,当然配置这个时候,特别在mac下出了很多坑,这里强烈推荐一个mac下类似phpstudy的东西,叫做MxSrvs,了解一下? Xdeb ...