1、Ajax技术简介
- AJAX=Asynchronous JavaScript+XML;
- 该技术能够向服务器请求额外的数据而无须卸载页面,带来更好的用户体验。
2、主要原理
通过XHR对象向服务器发送异步请求,从服务器端获取额外数据后,利用js操作DOM来更新页面。
Ajax技术等于是在客户和服务器之间安插了一个中转站,JS脚本先把请求从客户端发给这个中转站,再由这个中转站把请求转发给服务器,服务器先把响应也发送给中转站,再由这个中转站把响应转发给客户端的JS脚本进行处理。这个中转站即为XMLHttpRequest对象。
3、XMLHttpRequest
对象
XHR对象是 ajax 的核心机制。
创建一个XHR对象及用法:
XHR对象是 ajax 的核心机制。
创建一个XHR对象及用法:
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xhr.open("请求类型get/post",url,false);
xhr.send();
4、GET、POST的区分对比
(1)GET
常用于向服务器查询某些信息,传送简单的数据,可将查询字符串添加到URL的末尾。另外更重要的一点是,它会被客户端浏览器缓存起来,别人可以从浏览器历史记录中读取相应的信息,有严重的安全性问题;消耗的资源少,请求的速度快。
注意:
- 查询字符串的格式,查询字符串中每个参数的名值对儿都必须用encodeURIComponent()进行编码,才能放到URL的末尾;
- 所有名值对儿必须用&分隔;
- 由于不需要通过请求主体发送数据,则send()方法中传入null作为参数。
(2)POST
常用于向服务器发送应该被保存的数据,数据作为请求的主体进行提交。消耗资源多,请求速度慢。
常用于向服务器发送应该被保存的数据,数据作为请求的主体进行提交。消耗资源多,请求速度慢。
注意:
- 设置header的Context-Type为application/x-www-form-urlencode确保服务器知道实体中有参数变 量.通常使用XmlHttpRequest对象的SetRequestHeader("Context-Type","application/x- www-form-urlencoded;")。例:
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
- send()方法中传入参数,即要作为请求主体发送的数据。