原生javascript实现ajax请求

一、创建AJAX

1、创建 XMLHttpRequest 对象

	var xmlhttp = new XMLHttpRequest();                    //IE7及以上
 	var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); //IE5 和 IE6

2、打开连接

xmlhttp.open( method, url, async );            

//method：请求的类型，GET 或 POST
//url：文件在服务器上的位置
//async：true（异步）或 false（同步）
//同步：指发出数据后，等接收到响应以后再发送下一个数据包的通讯方式。
//异步：指发出数据后，不用等待接收到响应，接着发送下一个数据包的通讯方式。

3、向服务器发送请求

xmlhttp.send(string);

GET 请求:
xmlhttp.send();//get请求的参数加在url的后面

POST 请求:
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");    // 向请求添加HTTP头
xmlhttp.send("fname=Bill&lname=Gates");//post请求的参数要放在send()里面

GET 还是 POST?
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。 然而，在以下情况中，请使用 POST 请求：
a. 无法使用缓存文件（更新服务器上的文件或数据库）；
b. 向服务器发送大量数据（POST 没有数据量限制）；  
c.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
XMLHttpRequest 对象有三个重要的属性：

Onreadystatechange
  存储函数（或函数名），每当readyState 属性改变时，就会调用该函数。

readyState
  存有XMLHttpRequest 的状态信息，从 0 到 4 发生变化。
  0: 请求未初始化
  1: 服务器连接已建立
  2: 请求已接收
  3:请求处理中
  4: 请求已完成，且响应已就绪

Status（HTTP状态码）
  1字头：消息。这一类型的状态码，代表请求已被接受，需要继续处理。 
  2字头：成功。这一类型的状态码，代表请求已成功被服务器接收、理解、并接受。( 200:‘OK’ ) 
  3字头：重定向。这类状态码代表需要客户端采取进一步的操作才能完成请求。( 304:‘Not Modified’ )
  4字头:请求错误。这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理。
  5、6字头：服务器错误。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生。

每当 readyState 改变时，就会触发 onreadystatechange 事件。
在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

下面是封装的ajax函数：
GET方式：

function ajax(url,success,error){
    if(window.XMLHttpRequest){
        var oAjax = new XMLHttpRequest();
    }else{
        var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
    }
    oAjax.open('GET',url,true);
    oAjax.send();
    oAjax.onreadystatechange = function(){
        if(oAjax.readyState==4){
            if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
                success&&success(oAjax.responseText);    //成功的回调函数
            }else{
                error&&error(oAjax.status);              //失败的回调函
            }
        }
    };
}

POST方式：

function ajax(url,success,error){
    if(window.XMLHttpRequest){
        var oAjax = new XMLHttpRequest();
    }else{
        var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
    }
    oAjax.open('POST ',url,true);
    oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    oAjax.send('fname=Bill&lname=Gates');
    oAjax.onreadystatechange = function(){
        if(oAjax.readyState==4){
            if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
                success&&success(oAjax.responseText);    //成功的回调函数
            }else{
                error&&error(oAjax.status);              //失败的回调函
            }
        }
    };
}

二、 Ajax - 请求纯文本

<button id="button">请求纯文本</button>
<br><br>
<div id="text"></div>
-------------------------------------------------
document.getElementById('button').addEventListener("click", loadText);
function loadText() {
	// 创建XMLHttpRequest对象
	var xhr = new XMLHttpRequest();
	// console.log(xhr);
	// open(type,url/file,async)
	xhr.open('GET', 'sample.txt', true);
	// console.log("READYSTATE: ",xhr.readyState);

	// onprogress
	xhr.onprogress = function () {
		// console.log("测试READYSTATE: ",xhr.readyState);
	}

	// 两种方式请求 onload / onreadystattechange
	// xhr.onload = function(){
	// 	// console.log("READYSTATE: ",xhr.readyState);
	// 	// console.log(this.responseText);
	// 	document.getElementById('text').innerHTML = this.responseText;
	// }

	xhr.onreadystatechange = function () {
		// console.log("READYSTATE: ",xhr.readyState);
		if (this.status == 200 && this.readyState == 4) {
			// console.log(this.responseText);
			document.getElementById('text').innerHTML = this.responseText;
		} else if (this.status == 404) {
			// console.log("请求的网页不存在");
			document.getElementById('text').innerHTML = "NOT Found";
		}
	}
	// 发送请求
	xhr.send();
}

三、Ajax - 请求JSON数据

<button id="button1">请求单个用户</button>
<button id="button2">请求所有用户</button>

<br><br>

<h1>单个用户</h1>
<div id="user"></div>

<h1>所有用户</h1>
<div id="users"></div>

<script>
	document.getElementById('button1').addEventListener('click',loadUser);
	document.getElementById('button2').addEventListener('click',loadUsers);

	function loadUser(){
		var xhr = new XMLHttpRequest();
		xhr.open("GET","user.json",true);
		xhr.onload = function(){
			if (this.status == 200) {
				// console.log(this.responseText);
				var user = JSON.parse(this.responseText);
				// console.log(user.name);

				var output = '';
				output += 
					'<ul>'+
						'<li>'+user.id+'</li>'+
						'<li>'+user.name+'</li>'+
						'<li>'+user.email+'</li>'+
					'</ul>';
				;
				document.getElementById('user').innerHTML = output;
			}
		}

		xhr.send();
	}

	function loadUsers(){
		var xhr = new XMLHttpRequest();
		xhr.open("GET","users.json",true);
		xhr.onload = function(){
			if (this.status == 200) {
				var users = JSON.parse(this.responseText);
				var output = '';

				// 遍历数组
				for(var i in users){
					output += 
						'<ul>'+
							'<li>'+users[i].id+'</li>'+
							'<li>'+users[i].name+'</li>'+
							'<li>'+users[i].email+'</li>'+
						'</ul>';
					;
				}
				document.getElementById('users').innerHTML = output;
			}
		}

		xhr.send();
	}

</script>

点击进入参考的博文链接: