原生JS Ajax请求

传统请求方法的缺点

传统的web交互是用户触发一个http请求服务器，然后服务器收到之后，在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

什么是ajax？

ajax的出现，刚好解决了传统方法的缺陷。ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。（即，异步请求，请求后端的数据）

XMLHttpRequest对象

XMLHttpRequest对象是ajax的基础，XMLHttpRequest用于在后台与服务器交换数据。这意味着可以用在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest

符号	意义
abort()	停止当前请求
getAllResponseHeaders()	把HTTP请求的所有响应首部作为键/值对返回
getResponseHeader(“header”)	返回指定首部的串值
open(“method”,“URL”,[asyncFlag],[“userName”],[“password”])	建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
send(content)	向服务器发送请求
setRequestHeader(“header”, “value”)	把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post’方法一定要 )

原生ajax的写法

window.onload=function(){
	var b=document.getElementById("btn");
	b.onclick=function(){
		/* 1.创建 XMLHttpRequest 对象*/
		var http=new XMLHttpRequest(); //创建对象
		/* 2.打开服务器链接 */
		http.open("get","./data/data.txt"); //默认异步请求 true 模拟本地数据的请求
		/* 在 ajax async  同步（等待请求完成之后在去加载后续代码）或者异步（请求和代码同时执行）*/
		/*2.发送请求*/
		http.send();
		/*4.注册事件*/
		http.onreadystatechange=function(res){
		//   readyState  状态为4 读取完成
		//    status   为200   请求成功
			if(this.status==200&this.readyState==4)
			{
				/*5.更新界面*/
				console.log(this);
				/*读取成功之后的返回数据在response responseText*/
				document.write(this.response);
			}
			method("./data/data.txt",null,"post",showdata);
			function showdata(data){
				document.write(data);
			}
		}
	}
	//为了方便使用将get或者post请求方式封装为一个方法  直接调用
	function method(url,data,method,success){
	/*1.创建ajax对象*/
		var ajax=mew XMLHttpRequest();
	/*2.区分    根据method不同来区分请求方式*/
		if(method=="get")
		{
		//get
			if(data)
			{
			url+="?";
			url+=data;
			}
			else{
				
			}
			ajax.open(method,url);
			ajax.send();
		}
		else{
			//post
			ajax.open(method,url);
			if(data)
			{
				ajax.send(data);
			}
			else{
				ajax.send();
			}
		}
		ajax.onreadystatechange=function(){
			if(ajax.status==200&&ajax.readyState==4)
			{
				/*console.log(ajax.response);*/
				success(ajax.response);
			}
		}
	}
}

补充
1.post 请求：加密，安全，可以用于发送请求， 用send传值。
2.get 请求：没有加密，数据量大，可用于读取数据 传值：路径+？+属性=值。
3.加“？”时，默认为get传值。
4.async 值为false（同步）/ true（异步（同时加载））。
5.网页出现404：网页丢失。
6.网页出现500：服务器报错。