JavaScript---Ajax和函数回调,异步编程
一 Ajax 函数的定义 : Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),无刷新的从服务器读取数据,可以在不重新加载整个网页的情况下,对网页的某部分进行更新,使网页实现异步更新。
交换过程:
1 创建对象
2 建立连接
3 发送请求
4 接收数据( 调用回调函数)
function ajax(json){
if(!json.url){return;}
json = json||{};
json.type = json.type||'GET';
json.data = json.data||{};
json.timeout = json.timeout||10000;
//1.创建对象
if(window.XMLHttpRequest){
//chrome FF IE7+
var oAjax = new XMLHttpRequest();
}else{
//IE低版本
var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}
switch(json.type.toLowerCase()){
case 'get':
//2.建立连接 //是否异步
oAjax.open('GET',json.url+'?'+json2url(json.data),true);
//3.发送
oAjax.send();
break;
case 'post':
oAjax.open('POST',json.url,true);
oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
oAjax.send(json2url(json.data));
break;
}
json.loading&&json.loading();
//超过json.timeout 后认为失败 不在请求
var timer = setTimeout(function(){
json.error&&json.error();
json.complete&&json.complete();
oAjax.onreadystatechange = null;
},json.timeout); //4.接收
//当网络状态改变的时候
oAjax.onreadystatechange = function(){ //每当 readyState 改变时,就会触发 onreadystatechange 事件
//网络状态
if(oAjax.readyState == 4){ //0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成,且响应已就绪
//http状态
if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
//服务器返回的数据
clearTimeout(timer);
json.success&&json.success(oAjax.responseText); //执行回调函数
json.complete&&json.complete();
}else{
clearTimeout(timer);
json.error&&json.error(oAjax.status);
json.complete&&json.complete();
}
}
};
}
二,Ajax的调用:
ajax({
url:url,
data:{
//数据接口 },
success:function(str){
var json = eval('('+str+')');
if(!json.error){
alert('发表成功');
//成功之后运行的代码 }
}
});
三 ,异步和回调函数
参考连接 : http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html
异步编程: 同步模式:后一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的、同步的
"异步模式":每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
异步编程的方法:
回调函数:把一个函数f1作为参数传递给另一个函数f2,并在f2中在恰当的时机执行,这个f1就叫回调函数,常见的比如事件函数,定时器,ajax。
事件监听:任务的执行不取决于代码的顺序,而取决于某个事件是否发生。
JavaScript---Ajax和函数回调,异步编程的更多相关文章
- es6 generator函数的异步编程
es6 generator函数,我们都知道asycn和await是generator函数的语法糖,那么genertaor怎么样才能实现asycn和await的功能呢? 1.thunk函数 将函数 ...
- JavaScript异步编程(2)- 先驱者:jsDeferred
JavaScript当前有众多实现异步编程的方式,最为耀眼的就是ECMAScript 6规范中的Promise对象,它来自于CommonJS小组的努力:Promise/A+规范. 研究javascri ...
- javascript异步编程,promise概念
javascript 异步编程 概述 采用单线程模式工作的原因: 避免多线dom操作同步问题,javascript的执行环境中负责执行代码的线程只有一个 内容概要 同步模式和异步模式 事件循环和消息队 ...
- JavaScript 单线程之异步编程
Js 单线程之异步编程 先了解一个概念,为什么 JavaScript 采用单线程模式工作,最初设计这门语言的初衷是为了让它运行在浏览器上面.它的目的是为了实现页面的动态交互,而交互的核心是进行 Dom ...
- 简述异步编程&Promise&异步函数
前言:文章由本人在学习之余总结巩固思路,不足之前还请指出. 一.异步编程 首先我们先简单来回顾一下同步API和异步API的概念 1.同步API:只有当前的API执行完成之前,才会执行下一个API 例: ...
- JavaScript异步编程的四种方法
1.回调函数 f1(f2); 回调函数是异步编程的基本方法.其优点是易编写.易理解和易部署:缺点是不利于代码的阅读和维护,各个部分之间高度耦合 (Coupling),流程比较混乱,而且每个任务只能指定 ...
- nodejs之async异步编程
1.什么是异步编程? 异步编程是指由于异步I/O等因素,无法同步获得执行结果时, 在回调函数中进行下一步操作的代码编写风格,常见的如setTimeout函数.ajax请求等等. 示例: for (v ...
- 【读书笔记】【深入理解ES6】#11-Promise与异步编程
异步编程的背景知识 JavaScript 引擎是基于单线程(Single-threaded)实际循环的概念构建的,同一时刻只允许一个代码块在执行. 所以需要跟踪即将运行的代码,那些代码被放在一个任务队 ...
- node.js整理 06异步编程
回调 异步编程依托于回调来实现,但不能说使用了回调后程序就异步化了 function heavyCompute(n, callback) { var count = 0, i, j; for (i = ...
随机推荐
- IOS开发中如何实现自动检测更新APP
自动检测更新实现逻辑: 先上github地址:https://github.com/wolfhous/HSUpdateApp 1,获取当前项目APP版本号 2,拿到AppStore项目版本号 3,对比 ...
- OC知识梳理-NSArray与NSMutableArray相关知识
知识普及: 1.数组中的元素在系统中都会有其默认对应的下标,下标是一个整形的数字,默认从0开始. 例:NSArray *arr3 = @["345","234" ...
- Struts2(十五)实现文件上传
一.导入包 需要将commons-fileupload和commons-io包和struts包一起导入 实现步骤: 在Jsp页面实现客户端选择上传文件 配置Struts.xml,拦截器会自动接收上传的 ...
- object-c中的类目,延展,协议
协议 协议只有方法的声明(类似于其他编程语言的接口) 协议相当于大家都所遵循的 关键字 @protocol 协议名 <所遵循的协议> 默认NSObject @end @pr ...
- iOS开发之网络编程--3、NSURLSessionDataTask实现文件下载(离线断点续传下载)
前言:使用NSURLSessionDownloadTask满足不这个需要离线断点续传的下载需求,所以这里就需要使用NSURLSessionDataTask的代理方法来处理下载大文件,并且实现离线断点续 ...
- 敏捷开发中高质量 Java 代码开发实践
Java 项目开发过程中,由于开发人员的经验.代码风格各不相同,以及缺乏统一的标准和管理流程,往往导致整个项目的代码质量较差,难于维护,需要较大的测试投入 和周期等问题. 这些问题在一个项目组初建.需 ...
- C# listview 拖动节点
/// <summary> /// 当拖动某项时触发 /// </summary> /// <param name="sender"></ ...
- MyCat 学习笔记 第十二篇.数据分片 之 分片事务处理
1 环境说明 VM 模拟3台MYSQL 5.6 服务器 VM1 192.168.31.187:3307 VM2 192.168.31.212:3307 VM3 192.168.31.150: 330 ...
- 【VB超简单入门】三、开始编程
接下来要进入正题了!同学们要认真看咯~ 第一步:安装VB开发IDE 在这里我推荐大家安装的是VB迷你版,现在大多数同学使用win7,这个版本可以在win7上运行的妥妥的~ 下载链接:http://pa ...
- matlab2015b调用摄像头
参考链接:http://blog.csdn.net/lyqmath/article/details/7307429 本人电脑是宏碁T5000 调用代码: % By lyqmathclc; clear ...