原生javascript实现的ajax异步封装功能示例


Posted in Javascript onNovember 03, 2016

本文实例讲述了原生javascript实现的ajax异步封装功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="Scripts/jquery.js"></script>
</head>
<style>
* { margin: 0px; padding: 0px; }
#box { float: left; width: 500px; }
#left { float: left; background: #090; width: 100px; height: 100px; }
#right { background: #C60; width: 100px; height: 100px; float: left; }
#box2 { width: 180px; height: 100px; }
html>body #box2 { width: auto; height: auto; min-width: 180px; min-height: 100px; }
</style>
<body>
<div id="box">
 <div id="left">点击我 看效果!</div>
 <div id="right">fffeeee</div>
</div>
<div style="width:100px; height:100px; background:#969; float:left;" id="dd">dddd</div>
<script>
// 异步请求封装 IE6即以上浏览器
// ajax(url,fnSucc,selectID,fnFaild)
//url 请求地址
//fnSucc 异步请求后的内容处理函数
//fnFaild 请求失败处理函数
function ajax(url,fnSucc,fnFaild)
{
    //1.创建Ajax对象
    //非IE6
    var oAjax;
    if(window.XMLHttpRequest)//不会报错,只会是undefined
     {oAjax=new XMLHttpRequest();}
    else
    //iE6 IE5
     {oAjax=new ActiveXObject("Microsoft.XMLHTTP");}
    //alert(oAjax);
    //2.连接服务器
    //open(方法,文件名,异步传输)
    oAjax.open("get",url,true);//制止缓存
    //3.发送请求
    oAjax.send();
    //4.接收返回值 和服务器通讯的时候此事件发生
    oAjax.onreadystatechange=function()
    {
     //oAjax.readyState //浏览器和服务器,进行到哪一步了 异步握手过程
     if(oAjax.readyState==4)//读取完成(可能文件不存在)
     {
      if(oAjax.status==200 || oAjax.status==304)//请求成功 304即使浏览器缓存了也返回数据
      {
       fnSucc(oAjax.responseText);
       //alert("成功"+oAjax.responseText);
      }
      else
      {
       if(fnFaild)//fnFaild传进来时
       {
        fnFaild(oAjax.status);
       }
       //alert("失败:"+oAjax.status);//status为404
      }
     }
    }
}
window.onload=function(){
  var oBtn=document.getElementById("left");
  oBtn.onclick=function()
  {
      ajax("http://28967904.jsp.jspee.cn/ext/singlePage/list/json-1-1-20",function(str){
        var da= JSON.parse(str); //JSON数据解析
        alert(da.totalRow)
        },function(erorr){
          console.log('请求出错:'+erorr);
        })
  }
}
</script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js Flash插入函数免激活代码
Mar 31 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
深入探密Javascript数组方法
Jan 08 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
bootstrapValidator自定验证方法写法
Dec 01 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
vue实现动态按钮功能
May 13 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 Javascript
JS highcharts实现动态曲线代码示例
Oct 16 Javascript
探索Vue.js component内容实现
Nov 03 #Javascript
javascript跨域请求包装函数与用法示例
Nov 03 #Javascript
预防网页挂马的方法总结
Nov 03 #Javascript
网页挂马方式整理及详细介绍
Nov 03 #Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 #Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
Nov 03 #Javascript
基于vuejs+webpack的日期选择插件
May 21 #Javascript
You might like
PHPMYADMIN 简明安装教程 推荐
2010/03/07 PHP
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
php中动态修改ini配置
2014/10/14 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
php提交post数组参数实例分析
2015/12/17 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
js实现超酷的照片墙展示效果图附源码下载
2015/10/08 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
微信小程序之购物车功能
2020/09/23 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
2017/05/28 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
Python Grid使用和布局详解
2018/06/30 Python
python列表list保留顺序去重的实例
2018/12/14 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
Python输出指定字符串的方法
2020/02/06 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
党员教师工作决心书
2014/03/13 职场文书
出国留学担保书
2014/05/20 职场文书
师德师风的心得体会
2014/09/02 职场文书
2015年酒店工作总结
2015/04/28 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers