前面的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:移动端支持较弱