原生JS实现Ajax请求
Ajax,Asynchronous JavaScript and XML,即异步的 JavaScript 和 XML。我们可以通过Ajax实现局部刷新,在不刷新整个页面的情况下,就能够与后端进行交互,进行数据交换。 在Ajax交互中,我们需要用到一个XMLHttpRequest对象,注:支持IE7+(所有现在浏览器)。 Get方式var xhr = new XMLHttpRequest(); xhr.open('get','./admin.php?a=' + Math.random(),true); // 接收 xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200){ alert(xhr.responseText); } }; // 发送 xhr.send(); xhr对象的open方法中,第一个参数是请求方法,此处是get请求,第二个参数是请求地址,GET方法的话,传递的参数是跟在url后面的,并用&隔开,第三个参数是该方式是否异步,此处是true,所以采用异步方式。 send()方法表示发送这个请求。 注:当同步请求情况下,要先绑定readystatechange事件。其中readyState为4表示请求已经完成,status是200表示请求成功。 POST方式var xhr = new XMLHttpRequest(); xhr.open('post','./admin.php',true); // 设置编码格式 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 接收 xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200){ alert(xhr.responseText); } }; // 发送 xhr.send('a=1&b=2'); POST方式下,只需将请求方法改为post,而需要传给后端的参数放到send()方法中,且格式必须是=相连键和值,&相连不同的参数。 在POST方法中,将Content-Type 设置为 application/x-www-form-urlencoded,是因为默认情况下,Ajax将以Content-Type:?text/plain的方式提交数据,此时,服务器会忽略POST实体部分的数据,所以会导致服务端程序无法获取POST数据。 数据接收在接收到响应后,响应的数据会自动填充xhr对象。他包含这几个属性: responseText:响应返回的主体内容,为字符串类型。 responseXML:当响应的内容类型是 “text/xml” 或 “application/xml”时,这个属性中将保存着相应的xml 数据。 status:响应的HTTP状态码。 statusText:HTTP状态的说明。 readyState属性xhr队形的readyState属性的值都对应着请求的状态。 0:未初始化,尚未调用open()方法。 1:启动,调用了open()方法,未调用send()方法。 2:发送,已经调用了send()方法,未接收到响应。 3:接收,已经接收到部分响应数据。 4:完成,已经接收到全部响应数据。 所以当readyState有变化时,就会出发readystatechange事件。而在这事件中先判断是否接收完成,再判断服务器是否成功处理了请求。 注:使用Ajax的时候,注意同源策略。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |