原生JS的Ajax
Posted 莫问今朝
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生JS的Ajax相关的知识,希望对你有一定的参考价值。
转自:https://www.cnblogs.com/yufann/p/JS-Ajax.html
1.创建一个Ajax对象
非IE6浏览器:var obj = new XMLHttpReuqest();
IE6浏览器:var obj = new ActiveXbject("Microsoft.XMLHTTP");
2.连接到服务器
obj.open(请求方式,url,是否异步)
阻止缓存方式:
obj.open(\'get\',\'yan.txt?name=\'+new Date().getTime(),true);
3.发送请求
obj.send();
4.接收返回值
请求状态监控:onreadystatechange事件:当自己的Ajax与服务器之间有通讯时触发
主要通过readyState属性来判断有没有结束,结束了也并没有成功,status属性来判断
1.----readyState属性:请求状态
0(未初始化)还没有调用send()方法
1(载入)已经调用了send()方法,正在发送请求
2(载入完成)send()方法执行完成,已经接收到全部响应内容
3(交互)正在解析响应内容
4(完成)响应内容解析完成,可以在客户端调用了(完成不一定成功,需要status来检测是否成功)
2.---status属性:请求结果,是成功(200)还是失败(404):obj.status==200
3.---返回值responseText:从服务器返回的文本:obj.responseText(返回的为字符串)
GET方式
function getAjax(){ var obj; if(ActiveXObject)//判断是否是IE6 obj = new ActiveXObject("Microsoft.XMLHTTP"); else obj = new XMLHttpRequest(); //连接服务器 obj.open(\'get\',\'http://localhost:8080/yan.ashx?name=123\',true); //发送请求 obj.send(); obj.onreadystatechange=function(){ if(obj.readyState===4&&obj.status===200)//如果接收完成并且请求成功 console.log(obj.responseText);//输出返回信息 } }
POST方式
function postAjax(){ var obj; if(ActiveXObject)//判断是否是IE6 obj = new ActiveXObject(\'Microsoft.XMLHTTP\'); else obj =new XMLHttpRequest(); //连接服务器 obj.open(\'post\',\'http://localhost:8080/yan.ashx?name=123\',true); //设置头信息 obj.setRequestHeader(\'Content-type\',\'application/x-www-form-urlencoded\'); //发送请求,传递数据 obj.send({name:\'123\'}); obj.onreadystatechange = function(){ if(obj.readyState===4&&obj.status===200)//如果接收完成并且请求成功 console.log(obj.responseText);//输出返回信息 } }
以上是关于原生JS的Ajax的主要内容,如果未能解决你的问题,请参考以下文章
Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码