原生javascript实现的ajax异步封装功能示例美高梅游
分类:新闻中心

ajax基本通用代码示例,ajax通用代码示例

正文实例叙述了ajax基本通用代码。分享给我们供我们参谋,具体如下:

<html>
<head>
<script type="text/JavaScript">
var xmlhttp
function loadXMLDoc(url)
{
 // code for Mozilla, etc.
 if (window.XMLHttpRequest)
 {
 xmlhttp=new XMLHttpRequest()
 xmlhttp.onreadystatechange=state_Change
 xmlhttp.open("GET",url,true)
 xmlhttp.send(null)
 }
 // code for IE
 else if (window.ActiveXObject)
 {
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
  if (xmlhttp)
  {
  xmlhttp.onreadystatechange=state_Change
  xmlhttp.open("GET",url,true)
  xmlhttp.send()
  }
 }
}
function state_Change()
{
 // if xmlhttp shows "loaded"
 if (xmlhttp.readyState==4)
 {
 // if "OK"
 if (xmlhttp.status==200)
 {
 document.getElementById('T1').innerHTML=xmlhttp.responseText
 }
 else
 {
 alert("Problem retrieving data:" + xmlhttp.statusText)
 }
 }
}
</script>
</head>
<body onload="loadXMLDoc('test_xmlhttp.txt')">
<div id="T1" style="border:1px solid black;height:40;width:300"></div><br />
<button onclick="loadXMLDoc('test_xmlhttp2.txt')">Click</button>
</body>
</html>

越多关于ajax相关内容感兴趣的读者可查阅本站专项论题:《jquery中Ajax用法总括》、《JavaScript中ajax操作技巧计算》、《PHP+ajax手艺与运用小结》及《asp.net ajax技能总括专项论题》。

希望本文所述对大家ajax程序设计有着扶持。

本文实例叙述了ajax基本通用代码。分享给我们供我们参谋,具体如下: htmlheadscript type="text/JavaS...

正文实例叙述了原生javascript完结的ajax异步封装成效。分享给大家供大家参照他事他说加以考察,具体如下:

正文实例陈说了原生js封装的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>

简单的说,框架之间会有冲突,这是源生js就起到效能了,下边介绍大器晚成种源生js封装的ajax央浼。

更加的多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript中ajax操作技能总计》、《JavaScript切换特效与工夫计算》、《JavaScript查找算法技艺总括》、《JavaScript动画特效与工夫汇总》、《JavaScript错误与调治才能总计》、《JavaScript数据结构与算法技能总结》、《JavaScript遍历算法与技巧总括》及《JavaScript数学生运动算用法总括》

function ajax(options) {
  options = options || {};
  options.type = (options.type || "GET").toUpperCase();
  options.dataType = options.dataType || "json";
  var params = formatParams(options.data);
  //创建xhr对象 - 非IE6
  if (window.XMLHttpRequest) {
    var xhr = new XMLHttpRequest();
  } else { //IE6及其以下版本浏览器
    var xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }
  //GET POST 两种请求方式
  if (options.type == "GET") {
    xhr.open("GET", options.url + "?" + params, true);
    xhr.send(null);
  } else if (options.type == "POST") {
    xhr.open("POST", options.url, true);
    //设置表单提交时的内容类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(params);
  }
  //接收
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      var status = xhr.status;
      if (status >= 200 && status < 300) {
        options.success && options.success(xhr.responseText);
      } else {
        options.fail && options.fail(status);
      }
    }
  }
}
//格式化参数
function formatParams(data) {
  var arr = [];
  for (var name in data) {
    arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
  }
  arr.push(("v=" + Math.random()).replace(".",""));
  return arr.join("&");
}

但愿本文所述对我们JavaScript程序设计有所协理。

调用方法

你恐怕感兴趣的小说:

  • 叁个AJAX自动达成作用的js封装源码[支撑普通话]
  • 原生Javascript封装的叁个AJAX函数分享
  • js达成对ajax伏乞面向对象的包裹
  • 原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
  • JavaScript 封装Ajax传递的多少代码
  • 浅析jQuery Ajax通用js封装
  • js锁屏解屏通过对$.ajax实行李包裹装达成
  • js原生Ajax的卷入和法规安详严整
  • 接受原生js封装的ajax实例(包容jsonp)
  • 纯js封装的ajax功用函数与用法示例
  • 原生js封装的ajax方法亲自去做
ajax({
  url: "data.json",
  type: "GET",
  data: {},
  dataType: "json",
  success: function (response) {
    // 此处放成功后执行的代码
     // 解析返回的字符串 转为json对象
    var usingdata = eval("("+response+")").data;
  }
  fail: function (status) {
    // 此处放失败后执行的代码
  }
});

更加多关于JavaScript相关内容感兴趣的读者可查阅本站专项论题:《JavaScript中ajax操作技术总计》、《JavaScript错误与调度技艺总计》、《JavaScript数据结构与算法手艺总括》、《JavaScript遍历算法与技能计算》及《JavaScript数学生运动算用法总计美高梅游戏官网网站 ,》

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

你大概感兴趣的篇章:

  • 二个AJAX自动实现功效的js封装源码[支撑汉语]
  • 原生Javascript封装的叁个AJAX函数分享
  • js完毕对ajax乞请面向对象的包裹
  • 原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
  • JavaScript 封装Ajax传递的数量代码
  • 浅析jQuery Ajax通用js封装
  • js锁屏解屏通过对$.ajax进行李包裹装完成
  • js原生Ajax的包裹和法规安详严整
  • 接受原生js封装的ajax实例(宽容jsonp)
  • 纯js封装的ajax功能函数与用法示例
  • 原生javascript完毕的ajax异步封装功效示例

本文由美高梅网址发布于新闻中心,转载请注明出处:原生javascript实现的ajax异步封装功能示例美高梅游

上一篇:ack问题分析 下一篇:没有了
猜你喜欢
热门排行
精彩图文