原生JS的Ajax

时间:2024-01-09 21:27:38

转自: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);//输出返回信息
}
}