Ajax (异步的javaScript 和 XML):是指一种在无需重新加载整个网页的情况之下能够更新部分网页的技术。使用Ajax技术的网页,通过在后台跟服务器进行少量的数据交互,就可以实现异步局部更新。
原因在于:使用了XMLHttpRequest对象,它实现了异步操作,可用于后台与服务器交换数据。
创建XMLHttpRequest对象
使用var request = new XMLHttpRequest();创建XMLHttpRequest对象,该对象可以兼容IE7+,Firefox,Chrome,Opera,Safari等大多数浏览器,但是不兼容IE6及以下的版本。使用以下代码可以解决浏览器兼容性问题。
var request;
if(window.XMLHttpRequest){
request=new XMLHttpRequest();
}else
request=new ActiveXObject("Microsoft.XMLHTTP");//可以兼容IE6、IE5版本
使用XMLHttpRequest发送请求
- open(method, url, async) //method表示“请求方式”; url表示”url”地址;async表示异步(true)/同步(false)方式
- send(string) //GET请求一般不需要string参数,因为它的参数都存放在url地址上,post一般需要string参数
这两个方法可以将请求发送到服务器。
XMLHttpRequest发送请求的例子:
request.open("GET","get.php",true);
request.send();
request.open("POST","create.php","true");
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");//告诉服务器发送的是表单,注意:setRequestHeader必须要写在open与send之间
request.send("name=王二狗&sex=男");
使用XMLHttpRequest取得响应
常用方法介绍:
responseText: 获得字符串形式的响应数据。
responseXML:获得XML 形式的响应数据。(现在用的比较多的是JSON格式)
status和statusText:以数字和文本形式返回HTTP状态码。
getResponseHeader:查询响应中某个字段的值。需要指定字段
getAllResponseHeader:获取所有的响应报头。
readyStates属性:
所以,只需要监听reayStates属性的变化,就可知响应有没有完成。
通过onreadystatechange方法可以监听readyState属性的变化,这个方法会在reayStates属性每一次变化的时候触发。如下代码所示:
参考慕课网视频:Ajax全接触