ajax请求的步骤

Myth丶恋晨 2022-12-20 02:47 129阅读 0赞

**1.创建ajax对象**

try{ 
    		var ajax = new XMLHttpRequest();  //IE8以下不兼容
    }catch(e){ 
    		//IE8以下的声明方法
    		var ajax = new ActiveXObjec(Microsoft.XMLHTTP);
    }

**2.初始化**

ajax.open('get','./ajax_get.php?a=b&c=d',true);
    		//参1 请求方式 get post
    		//参2 url
    		//参3 是否异步 true 异步 false同步

**3.发送请求**

ajax.send();

**4.绑定状态改变事件,等待数据响应**

ajax.onreadystatechange =function(){ 
    	//代表服务器成功相应数据了
    	if(ajax.readyState==4  && ajax.status ==200){ 
    		var mes = ajax.responseText;//获取服务器的相应数据
    		console.log(eval(ajax.response))//把json字符串数据转换成json对象
    			}	
    		}

**readystatechange 事件类型**  
请求的状态 ajax.readyState 发生变化的时候调用  
0:请求未初始化 (调用open方法之前)  
1:服务器连接已经建立(载入 已经调用send()方法,正在发送请求)  
2:请求已经接收(载入完成 send()方法完成,已收到全部响应内容)  
3:服务器处理请求(正在解析响应内容)  
4:服务器处理结束，返回结果(完成 响应内容解析完成,可以在客户端调用了)

status属性 : 服务器(请求资源)的状态  
返回的内容  
responseText: 返回以文本形式存放的内容  
responseXML: 返回XML形式的内容

**使用POST发送，而且传递数据的话必须设置请求的头信息，发送的数据放在send方法的参数里**

var xml = new XMLHttpRequest();

**监听请求的状态**

xml.onreadystatechange = function(){ 
    // 当服务器的状态码为200并且XMLHttpRequest对象请求状态为4的时候，代表请求成功
    		if (xml.status == 200 && xml.readyState == 4) { 
    			// 获取返回结果
    			alert(xml.responseText);
    	   }
       }

**2.2 配置**

xml.open('POST','4.php',true);

使用POST发送，而且传递数据的话必须设置请求的头信息，发送的数据放在send方法的参数里

xml.setRequestHeader("Content-type","application/x-www-form-urlencoded")

**2.3 发送**

xml.send('username=zhangsan&age=30');

**try catch**

try{ 
    	//尝试执行的代码
    }catch(error){ 
    	//error 错误对象,try括号中代码执行的异常信息
    	//补救代码
    }

执行过程:  
1.先去执行try中的代码  
2.如果try中的代码执行正常,catch中的代码就不执行了  
3.如果try中的代码执行异常,直接执行catch中的代码进行补救

**处理兼容问题**

if(window.XMLHttpRequest){ 
    	ajax = new XMLHttpRequest();
    }else{ 
    	ajax = new ActiveXObject('Microsoft.XMLHTTP');
    }
    
    //或者
    try{ 
    	ajax = new XMLHttpRequest();
    }catch(e){ 
    	ajax = new ActiveXObject('Microsoft.XMLHTTP');
    }