前端的那些事--AJAX

前面的js的时间线以及异步讲到了js的单线程，在这种底层多线程又做着单线程的事的这种环境下，有些需求的开发就成了难题，比如在一个登陆页面中，输入用户名完后即刻在数据库中读取这个账户是否存在，由于进行按钮的提交跳转，页面没有刷新，此时就有一门技术可以解决这种难题–AJAX

AJAX(Asynchronous Javascript And XML)

从直译来看，就是异步js和xml，这是一种交互式动态网页开发，独立于 Web 服务器软件的浏览器技术。被所有的主流浏览器支持，不需要加载整个网页就完成局部刷新，从语言的介绍来看，ajax的运行是在一种异步环境下处理的，通过http请求，在浏览器和服务器进行数据传输，因为局部刷新，就减少了网页对服务器的请求的请求信息，这是一种性能的优化。

原生AJAX

var xhr = null;//创建变量接收实例化的XMLHttpRequest对象

if(window.XMLHttpRequest){//兼容性处理，判断window下面有没有挂载这个方法，没有就使用ie低版本的ajax创建语法
	xhr = new XMLHttpRequest();
}else{//ie5/6
	xhr = new ActiveXObject("microsoft.XMLHttp");
}

xhr.onreadystatechange = function(){//每当readyState改变时，就会触发onreadystatechange事件
	if (xhr.readyState == 4 && xhr.status == 200) {//请求完成并且服务器成功处理了请求
		alert(xhr.responseText)//responseText指返回的文本信息(字符串String类型文本)
	}
}

xhr.open("get/post", "接口","同步/异步");//第三个参数可以不写，默认异步为false

xhr.send();//发送请求

readyState状态码

状态码	含义
0	请求未初始化
1	服务器连接已建立
2	请求已接收
3	请求处理中
4	请求已完成，且响应已就绪

status状态码参考status状态码大全

参数传递—GET

xhr.open("get", "/index?username=yyz");//参数放在请求体中

xhr.send(null);

参数传递—POST

xhr.open("post", "/index");

xmlhttp.setRequestHeader("content-type", "application/x-www-form-urlencoded")//设置请求头

xhr.send("username=yyz");//参数放在发送的request.body中

AJAX的优缺点

优点

1：局部刷新，不需要重新加载页面
2：异步处理，不用中断操作
3：按需发送请求，减少了对服务器的冗余请求
4：应用广泛

缺点

1：破坏浏览器后退机制
2：安全问题，get请求会暴露数据
3：不利于搜索引擎优化，无法搜索
4：破坏了程序的异常机制
5：移动端支持较弱