Ajax——基础内容

1、Ajax技术简介

• AJAX=Asynchronous JavaScript+XML；

• 该技术能够向服务器请求额外的数据而无须卸载页面，带来更好的用户体验。

2、主要原理

       通过XHR对象向服务器发送异步请求，从服务器端获取额外数据后，利用js操作DOM来更新页面。

       Ajax技术等于是在客户和服务器之间安插了一个中转站，JS脚本先把请求从客户端发给这个中转站，再由这个中转站把请求转发给服务器，服务器先把响应也发送给中转站，再由这个中转站把响应转发给客户端的JS脚本进行处理。这个中转站即为XMLHttpRequest对象。

3、XMLHttpRequest对象
  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（）方法中传入参数，即要作为请求主体发送的数据。