> php教程 > PHP开发 > 본문

네이티브 자바스크립트로 구현된 Ajax 비동기 캡슐화 기능의 예

高洛峰
풀어 주다: 2016-12-07 16:55:28
원래의
1839명이 탐색했습니다.

이 글의 예시에서는 네이티브 자바스크립트로 구현된 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>
<p id="box">
 <p id="left">点击我 看效果!</p>
 <p id="right">fffeeee</p>
</p>
<p style="width:100px; height:100px; background:#969; float:left;" id="dd">dddd</p>
<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(&#39;请求出错:&#39;+erorr);
        })
  }
}
</script>
</body>
</html>
로그인 후 복사

위 내용은 네이티브 자바스크립트로 구현한 Ajax 비동기 캡슐화 함수 예제 내용입니다. , PHP 중국어 웹사이트(www.php.cn)를 주목해주세요!


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!