ajax

同步和异步：
    同步：不执行完上面的代码，下面的代码就执行不了，一步一步执行。
    异步：可以一起执行的代码（计时器，事件）

程序，进程和线程：
    程序：功能
    进程：一个功能从开始执行到执行结束是一个进程
    线程：在一个进程的开始到结束的过程中的多条分支
    js：单线程，使用异步，模拟除了多线程的功能
    ajax：不刷新页面，加载数据

ajax的优点和缺点

优点：
    1.不需要插件支持（一般浏览器且默认开启 JavaScript 即可）；
    2.用户体验极佳（不刷新页面即可获取可更新的数据）；
    3.提升 Web 程序的性能（在传递数据方面做到按需发送，不必整体提交）；
    4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；

缺点：
    1.存在兼容问题，不同版本的浏览器对 XMLHttpRequest 对象支持度不足(比如 IE5 之前)；
    2.前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会记录前后页面）；
    3.搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）；

AJAX的兼容问题（基本已被废弃）

ajax = new XMLHttpRequest();
ajax = new ActiveXObject("Microsoft.XMLHTTP");     //IE5

ajax缓存问题：用时间戳清除缓存；

ajaxGet('data/test.txt?t='+ new Date().getTime(),fn)

var xhr = new XMLHttpRequest();
//true表示异步，可以省略，false表示同步
xhr.open("get",url,true);
xhr.onreadystatechange = function(){
	if(xhr.readyState == 4 && xhr.status == 200){
		console.log(xhr.responseText);
	}
}
xhr.send();

xhr.readyState

 0 －（未初始化）还没有调用send()方法
 1 －（载入）已调用send()方法，正在发送请求
 2 －（载入完成）send()方法执行完成，已经接收到全部响应内容
 3 －（交互）正在解析响应内容
 4 －（完成）响应内容解析完成，可以在客户端调用了

HTTP状态码

 1**：请求收到，继续处理
 2**：操作成功收到，分析、接受
 3**：完成此请求必须进一步处理
 4**：请求包含一个错误语法或不能完成
 5**：服务器执行一个完全有效请求失败
 
 100——客户必须继续发出请求
 101——客户要求服务器根据请求转换HTTP协议版本

 200——交易成功
 201——提示知道新文件的URL     
 202——接受和处理、但处理未完成
 203——返回信息不确定或不完整
 204——请求收到，但返回信息为空
 205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
 206——服务器已经完成了部分用户的GET请求

 300——请求的资源可在多处得到
 301——删除请求数据
 302——在其他地址发现了请求数据
 303——建议客户访问其他URL或访问方式
 304——客户端已经执行了GET，但文件未变化
 305——请求的资源必须从服务器指定的地址得到
 306——前一版本HTTP中使用的代码，现行版本中不再使用
 307——申明请求的资源临时性删除

 400——错误请求，如语法错误
 401——请求授权失败
 402——保留有效ChargeTo头响应
 403——请求不允许
 404——没有发现文件、查询或URl
 405——用户在Request-Line字段定义的方法不允许
 406——根据用户发送的Accept拖，请求资源不可访问
 407——类似401，用户必须首先在代理服务器上得到授权
 408——客户端没有在用户指定的饿时间内完成请求
 409——对当前资源状态，请求不能完成
 410——服务器上不再有此资源且无进一步的参考地址
 411——服务器拒绝用户定义的Content-Length属性请求
 412——一个或多个请求头字段在当前请求中错误
 413——请求的资源大于服务器允许的大小
 414——请求的资源URL长于服务器允许的长度
 415——请求资源不支持请求项目格式
 416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段
 417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求

 500——服务器产生内部错误
 501——服务器不支持请求的函数
 502——服务器暂时不可用，有时是为了防止发生系统过载
 503——服务器过载或暂停维修
 504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
 505——服务器不支持或拒绝支请求头中指定的HTTP版本

POST和GET的区别

1.POST主要用来发送数据，GET主要用来接受数据；
2.PSOT发送数据的安全性较好，而GET较差；
3.POST发送数据不限制大小，而GET大小受限2~100k。
什么时候用GET和POST：在数据获取时用GET方式，在操作数据时应使用POST方式。

get

xxx.onclick = function(){
	var url = "xxxxxxxxx";
	ajaxGet(url,function(res){
		console.log(res)
	});
}

function ajaxGet(url,cb,data){
	//解析要发送的数据
	data = data || {};
	var str = "";
	for(var i in data){
		str +=`${i}=${data[i]}&`
	}
	//利用时间戳解决缓存问题
	var d = new Date();
	console.log(d.getTime());
	//实现url的拼接
	url = url + "?" + str + "sjt=" + d.getTime();
	console.log(url);
	//开启ajax
	var ajax = new XMLHttpRequest();
	ajax.open("get",url,true);
	ajax.onreadystatechange = function(){
		if(ajax.readyState == 4 && ajax.status == 200){
			cb(ajax.responseText);
		}
	}
	ajax.send();
}

post

xxx.onclick = function(){
    var url = "xxxxxxxxxxxxxx";

    ajaxPost(
      url,
      function(res){
          console.log(res);
          console.log(url)
      },
      {
        user:oa.value,
        pass:ob.value
      }
      ); 
}

function ajaxPost(url,cb,data){

	data = data || {};
	var str = "";
	for(var i in data){
		str +=`${i}=${data[i]}&`
  }

  var d = new Date();
  url = url + "?" + str + "__sjt=" + d.getTime();
  console.log(url)
	
  var ajax = new XMLHttpRequest();
  ajax.open("post",url,true);
  ajax.onreadystatechange = function(){
	if(ajax.readyState == 4 && ajax.status == 200){
		cb(ajax.responseText);
	}
  }
  ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  ajax.send(str.slice(0,str.length-1));
}

get ------ post

obtn1.onclick = function(){
    var url = "xxxxxxajaxGetxxxxx";

    ajax({
      url:url,
      success:function(res){
        console.log(res)
      },
      error:function(res){
        console.log(res)
      },
      data:{
        user:oa.value,
        pass:ob.value,
      }
    }) 
}
obtn2.onclick = function(){
    var url = "xxxxxxxxxxajaxPostxxxxx";
    
    ajax({
      url:url,
      success:function(res){
        console.log(res)
      },
      error:function(res){
        console.log(res)
      },
      data:{
        user:oa.value,
        pass:ob.value,
      },
      type:"post"
    }) 
}



//预设函数的执行方式和要传入的参数及要实现的功能
// ajax({
// 	type:"get",							//可选，默认get
// 	url:"",									//必选
// 	success:function(){},		//必选
// 	error:function(){},			//可选，默认不处理
// 	data:{}									//可选，默认不发送
// })

function ajax(options){
	//解析参数，处理默认参数
	let {type,url,success,error,data} = options;
	type = type || "get";
	data = data || {};

	//解析要发送的数据
	var str = "";
	for(var i in data){
		str += `${i}=${data[i]}&`;
	}

	//根据发送方式处理url
	if(type == "get"){
		var d = new Date();
		url = url + "?" + str + "sjt=" + d.getTime();
	}

	//开启ajax
	var xhr = new XMLHttpRequest();
	xhr.open(type,url,true);
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			success(xhr.responseText);
		}else if(xhr.readyState == 4 && xhr.status != 200){
			//ajax过程结束了，如果http失败才是真的失败
			error && error(xhr.status);
		}
	}

	//根据发送方式，决定发送的信息
	if(type == "get"){
		xhr.send();
	}else if(type == "post"){
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xhr.send(str.slice(0,str.length-1));
	}
}

如有侵权请联系删除