AJAX-js原生封装

时间 2019-11-10

标签 ajax 原生封装栏目 Ajax 繁體版

原文原文链接

js原生中,ajax交互繁琐复杂,很容易就写错了.所以封装了一个跟jq差很少的函数,今后不再用担忧ajax写错了,简直神清气爽.

封装的方法php

function AJAX(obj){ //作网络请求的时候,参数以"对象"的形式传递进来 //规定: obj 里面包含属性:  //1.url  //2.type -- get 仍是 post //3.data -- 前端给后端传递的参数(前端传递的时候,以"对象"的形式) //4.回调函数 -- success //5.回调函数 -- error
var ajaxObj = null; if (window.XMLHttpRequest) { ajaxObj = new XMLHttpRequest(); }else{ ajaxObj = new ActiveObject("Microsoft.XMLHTTP"); } //检测状态的变化
ajaxObj.onreadystatechange = function(){ if (ajaxObj.readyState == 4) { if (ajaxObj.status >= 200 && ajaxObj.status < 300 || ajaxObj.status == 304) { if (obj.success) { obj.success(JSON.parse(ajaxObj.responseText)); }else{ alert("您忘记了 success 函数"); } }else{ if (obj.error) { obj.error(ajaxObj.status); }else{ alert("您忘记了 error 函数"); } } } } // type 转化为小写
var type = obj.type || "get"; type = type.toLowerCase(); //判断是否传递了参数
var params = ""; if (obj.data) { for(var key in obj.data){ params += (key + "=" + obj.data[key] + "&"); } params = params.slice(0,params.length-1); } if (type == "get") { ajaxObj.open(type,obj.url+"?"+params,true); ajaxObj.send(null); }else{ ajaxObj.open(type,obj.url,true); ajaxObj.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); ajaxObj.send(params); } }

html测试代码html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="网络测试" id="btn">
</body>
</html>
<script src="ajax.js"></script>
<script>
var btn=document.getElementById("btn"); btn.onclick=function() { AJAX({url:"http://127.0.0.1/160811/PHP/ajax/2.php", type:"get", data:{ userName:"admin", userPwd:"23123" }, success:function(data){ console.log(data); }, error:function(error){ console.log(data); } }) } </script>