ajax基础介绍

来源:互联网 发布:联合国安理会知乎 编辑:程序博客网 时间:2024/06/08 13:42

前导:Ajax通过js语法的异步网络请求技术,实现页面局部更新,之前所使用的的form表单、a标签都是全部更新页面
异步:在执行到耗时操作时,先去执行其他代码,等耗时操作处理完毕后,再通过回调函数处理耗时操作
同步:在执行到耗时操作时,会一直等待直到操作处理完毕,再去执行其他代码。
1、如何创建ajax对象
1)创建一个对象,检查浏览器是否支持XMLHttpRequest对象,其实现在所有浏览器都支持XMLHttpRequest对象,除了该死的IE5,IE6,如果不支持的话,创建ActiveXObject对象,对!我们做这一步就是为了IE5、6小婊砸
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP’);
2)配置请求参数,第一个参数是请求方法(GET/POST,浏览器请求方法不只这两种,只不过其他情况不适用),第二个参数是请求路径,如果GET请求的接口需要接口参数,则只需把接口参数拼接在接口之后即可,接口和参数之间使用“?”链接,参数和参数之间使用“&”链接,key值和value值之间使用“=”链接,如果GET请求中的参数有可能出现中文,为了增强代码健壮性,我们需要使用encodeURI()函数对中文进行编码操作第三个参数是否异步请求(true/false),默认为true,表示异步请求
xhr.open(‘GET’,url,true);
3)发送请求,因为我们这次是GET请求,请求参数已经拼接在url里面所以不需要再次传入,所以在send()参数位置传入null,表示没有任何数据,如果请求方式为POST,send()方法里面传入要传送的数据
xhr.send(null);
4)监听一个请求事件,收到浏览器的返回信息就会触发一次事件
xhr.onreadystatechange = function( ){
//判断条件表示请求数据已加载完毕,服务器已成功处理请求
if(xhr.readyState == 4 && xhr.status == 400){
console.log(xhr.responseText);
}
}

原创粉丝点击