ajax中XMLHttpRequest对象详解

                                                                                              ajax中XMLHttpRequest对象详解

        ajax技术的核心或者说负责ajax进行同步或者异步服务器请求是XMLHttpRequest对象。在用使用ajax技术时,其实就是操作XMLHttpRequest进行相应的业务。
 
 方法: 
  1创建XMLHttpRequest对象
    ajax本身还是js写成的,所以在使用XMLHttpRequest,是按照js语法的。
生成一个XMLHttpRequest对象如下:var xhr=new XMLHttpRequest();
注意IE浏览器9以下的版本都不支持,IE是在9版本后才归于主流,支持w3c标准的。 
考虑到兼容性,我们可以这样写。
function createXHR()
{
   var xhr=null;
  if(window.XMLHttpRequest)  //要是支持XMLHttpRequest的则采用XMLHttpRequest生成对象
     xhr=new XMLHttpRequest();
  else if(window.ActiveXobiect)//要是支持win的ActiveXobiect则采用ActiveXobiect生成对象。
    xhr=new ActiveXobiect('Microsoft.XMLHTTP');
   return xhr;
}
  2.如何利用XMLHttpRequest对象打开请求
        xhr.open('请求方式','请求url',是异步|同步)
我们通过XMLHttpRequest对象的open函数打开对服务器的连接,设置请求方式如GET POST OPTION DELETE等,请求路径,同步请求或者是异步请求(true表示异步请求,false表示同步请求)


  3. send() 
     发送请求,不传值时可以写null,get或者post请求传值时可以键值对写 username=zhangsan&pwd=12345
POST请求时,一定要注意要设置 Content-Type: application/x-www-form-urlencoded 不然无法解析&分隔符。
 
  4. abort()
     终止请求
 
  5. setRequestHeader(key,value);
     设置请求头信息
  
  6. getResponseHeader(key)
     获取某个头信息
  
  7. getAllResponseHeaders()
     获取所有的头信息

属性:
  1. responseText
     文本返回值,可以通过对象的responseText属性,获得返回的主体内容。

  2. onreadystatechange
     监测xhr对象发送接收状态变化的事件属性。xhr对象在发送到接收会有一系列状态的变化,这些状态变化时,会触发该对象的onreadystatechange回调函数,
一般我们是通过自定义一个匿名函数,在这个函数中进行我们想要的处理,将其赋给onreadystatechange事件属性,一旦触发就可以执行我们需要的操作。
 
  3. readyState
     表示自身状态,值为0~4  其中4表示返回成功。 0表示xhr对象创建成功 1表示调用open函数成功  2对方接收完头信息
     3对方接受完主体信息  4成功断开连接
  4. status
     响应行的状态码,200表示成功,403表示禁止,404表示未找到,50X系列表示服务器内部错误。
  5.statusText
     服务器返回状态,对应的文字说明
 
  
  5.响应行的 状态文字 statusText
  
  6.responseXML
    对于大量格式化文档时,或者xml文件时,回传的值。

   注意,ajax不能跨域请求,只能是请求本域内文件或后台程序。
        

         在html5中支持,使用ajax实现文件的异步上传,这一功能的实现主要是靠新增的两个对象完成
FormData和files对象。FormData主要是用来获得表单提交的信息,例如tform是一个表单的js中的dom对象,
var fd=new FormData(tform); 则生成的FormData对象就将表单对象中提交的信息全部加载如fd对象中了,
之后只要使用XMLHttpRequest对象的send()函数放送fd即可。当然FormData可以通过自身的append()函数手动加载键值对
如 fd.append('username','zhangsan');
         files是标签dom对象下的一个文件列表对象,可以获得上传文件的所有信息。html5支持多文件上传。在使用异步上传文件时,我们通过fd.append('name',files[0])异步上传文件。
















  

你可能感兴趣的:(ajax技术)