ajax

1 远古时代的ajax 做无刷新请求
方法1. http协议 204 返回表示无内容，导致后台请求 前端页面不刷新
header(‘Http/1.1 201 No Content’) 当页面收到204时 页面不做跳转
方法2 img src 请求后台

 var hh = document.createElement('img')   创建img标签
 hh.setAttribute('src','请求路径')     

方法3 利用iframe属性 ajax 注册提交表单 页面无刷新

<from action='请求地址' method="post" target="reg"></from>
<iframe name="reg"></iframe>

所谓的ajax 页面不刷新的情况下 利用xmlhttprequest 发送http请求 js的网格化
论述题
ajax能实现上传吗？
分析： 从http 的协议角度来看，上传文件则要把文件的内容发送到服务器，如果可以，XMLHttpRequest 的对象在post数据时，把文件内容也发送过去，由此推出 XHR对象获取了你想要上传的内容， js读取了你本地的文件内容 出于安全原因 js是不能读取到文件内容的 所以无法实现上传文件。
ajax上传插件是怎么实现的？
方法1 iframe
方法2 flash 如swfuploaded
方法3 html5实现 （增加了文件读取api）

2 ajax 现代化 XMLHttpRequest 对象一个专门的http请求工具

function createXHR(){
  var xhr = null
  if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest()   按标准 即可得到
  }else if(window.ActiveXObject){
    xhr = new ActiveXObject('Microsoft.XMLHTTP')   考虑低版本IE678
  }
  return xhr
}

利用XHR 发送请求
get

var xhr = createXHR()    创建XHR
xhr.open('GET'，‘路径’,true)  打开链接
xhr.send(null)    发送请求

post

var xhr = createXHR()    创建XHR
xhr.open('POST'，‘路径’,true)  打开链接
var un = $('#username').value    收集表单数据
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')  设置头信息
xhr.onreadyStateChange = function(){
   if(this.readystate==4&&this.status==200){
        alert(this.responseText)
 
   }
}---------------------状态判断 当状态改变的时候    如果 成功 时4 
xhr.send('username='+un)    发送请求
注：
this.responseText   返回值类型  不考虑html5新标准 返回值只有普通文本/xml文档
作为xml      xmldom -- xml标签
s = xmldom.getElementsByTagName('book')[0].childNodes    book下的子节点
s[0].nodeValue  
作为普通文本
1 后台返回大段的html代码，直接innerHTMl到前端页面
document.getBlementById('S').innerHTML = this.responseText
2 json格式 再用js解析
eval('('+this.responseText+')')    解析成一个对象  打点调用
3 返回字符串  如 1，2
注 ：
this.readystate 状态码
0   xhr刚刚创建的时候 
1 xhr.open()之后 可以设置头信息
2 当接收到Content-Type之后
3 接收body主体信息完毕后
4 成功结束之后

同步false 按顺序执行 等几秒会等
异步 true 同时 不会等

iframe 文件上传

<form action="路径" method="post" enctype="multipart/form-data" onsubmit="return send()">
   <input type="file" name="pic">
   <input type="submit" value="提交">
</form>
send(){
   var name = 'up'+Math.random()
   $('<iframe name='+name+' width="0" height='0" frameBorder="0"></iframe>').appendTo($('body'))
  $('from').attr('target',name)
}

HTML5文件上传

<form id="tForm">
   <input  type="file" name="pic" onChange="selfile()" />
   <input onClick="send()">
</form>
selfile(){
   var fn = document.getElementsByTagName('input')[0].files[0]
   var fd = new FormData()
   fd.append(fn.name,fn)  把文件追加到表单数据
   请求   post 
   window.URL.createObjectURL(pic)   把二进制文件直接读取成浏览器显示得资源
   若要是想显示进度条
   xhr.upload.onprogress = function(e){
      if(e.lengthComputable){
         var precent = e.loaded/e.total *100    获取总文件大小/以上传的
      }
   }
   样式的话是 两个div     设置宽 高   一个设置为0%  然后修改第二个div的width
}