近期项目中有好几次用到多图上传,第一次在项目中真正用到Ajax技术,稍微整理了下,贴个案例出来。
我们传统的做法是当用户提交一个表单时,就向web服务器端发送一个请求。服务器接受并处理传来的表单信息,处理完成后返回一个新的页面。这个做法比较浪费带宽,当请求数较多时,页面响应的时间就依赖于服务器处理的时间。
而Ajax应用仅向服务器发送并取回必需的数据,其他不需要的数据不用响应,它使用SOAP或其它一些基于XML的web service接口,并在客户端采用JS来处理来自服务器的响应。因此在服务器和浏览器之间交换的数据比较少,应用能很快速的响应。使用Ajax应用的最大特点是实现内容部分更新,不用刷新整个页面就能维护指定的数据,实现动态更新,这样能避免在网络上发送一些没有修改过的信息。Ajax应用的最大缺点是可能破坏浏览器后退按钮的正常行为。在Ajax中,JS主要用于将用户界面上的数据传递到服务器端,并处理返回来的结果。XMLHttpRequest对象用来响应通过http传递的数据,一旦数据返回到客户端就可以立刻使用DOM将数据放到页面上。
工作原理大致如下:
1.新建一个XMLHttpRequest 对象,用于直接与服务器通信。注意不同浏览器的不同写法。
xhr = new XMLHttpRequest();
2.向服务器发送请求,需要使用open()和send()。
open() 方法需要三个参数。第一个参数定义发送请求所使用的方法(GET 还是 POST)。第二个参数规定服务器端脚本的 URL。第三个参数规定应当对请求进行异步地处理。
send() 方法可将请求送往服务器。只有一个参数,为要发送的数据,如果没有数据,则传null。
xhr.open('POST',self.uploadURL,true);
xhr.send(formData); //formData为序列化的表单数据3.定义onreadystatechange函数。XMLHttpRequest 对象的三个重要的属性:onreadystatechange(服务器响应的函数),readyState(服务器响应的状态),responseText(服务器返回的数据)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){ //状态码为4时,表示请求已完成 self.cbUploadFile(xhr.responseText); //xhr.responseText表示服务器返回的数据,为JSON文本 } }
案例截图:
源代码:
1 2 3 4 519 20 21 78 79JS AJAX多图上传 6 7 8 9 13 14 15 16