ajax 异步封装-函数 javascript原生

最新推荐文章于 2023-10-08 15:06:46 发布

STM2263

最新推荐文章于 2023-10-08 15:06:46 发布

阅读量2.7k

点赞数

分类专栏：浏览器兼容性 javascript 文章标签：兼容 xmlhttprequest JavaScript 异步

本文链接：https://blog.csdn.net/yy374864125/article/details/24316627

版权

javascript 同时被 3 个专栏收录

46 篇文章 0 订阅

订阅专栏

浏览器

23 篇文章 0 订阅

订阅专栏

兼容性

6 篇文章 0 订阅

订阅专栏

以下为简单的案列代码：

<!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.οnlοad=function(){
	var oBtn=document.getElementById("left");
	oBtn.οnclick=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>

STM2263

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax 异步封装-函数 javascript原生

以下为简单的案列代码：无标题文档* { margin: 0px; padding: 0px; }#box { float: left; width: 500px; }#left { float: left; background: #090; width: 100px; height: 100px; }#right { background: #C60; width: 1
复制链接

扫一扫