使用原生JavaScript進行AJAX

  1. Js code
    1. 實際使用
  2. ActiveXObject?
  3. Http Header List
  4. Content-type list
  5. XHR Ready Status List
  6. XHR Status List

此篇是之前為了只需要使用AJAX可以不用使用整個Library or FrameWork 可以使用原生JavaScript包裝起來就可以簡單使用的 Ajax Function。

Js code

/**
 * ajax.js
 * /

function ajax(myJson){

	var xhr = null;
	window.XMLHttpRequest ? (xhr = new XMLHttpRequest()) : (xhr = new ActiveXObject("Microsoft.XMLHTTP"));
	var method = myJson.method || "get";    //method is null then return GET
	var url = myJson.url;
	var asyn = myJson.asyn || true;    // boolean 預設非同步加載
	var data = myJson.data;
	var fn = myJson.fn;


	// GET
	if(method == "get" && data){
		xhr.open(method, url + "?" + data + "&" + Math.random(), asyn);
	}


	// POST
	if(method == "post" && data){
		xhr.open(method, url, asyn);
		xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
		xhr.send(data);
	}else{
		xhr.send();
	}

	// Success
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4){
			if(xhr.status >= 200 && xhr.status < 300){
				fn(xhr.responseText);
			}else{
				alert("Process Error!");
			}
		}
	}
}

實際使用

<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
	ajax({
		method : "get",
		url : "get.php",
		asyn : true,
		data : "user=zym&password=1234",
		fn : function( res ){
			console.log( res );
		}
	});
</script>

ActiveXObject?

…待補充

Http Header List

…待補充

Content-type list

…待補充

XHR Ready Status List

…待補充

XHR Status List

…待補充