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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。