XHR | 易学教程

HTML5结合ajax实现文件上传以及进度显示

阅读更多关于 HTML5结合ajax实现文件上传以及进度显示

基于原生html5实现，不需要falsh支持，进度可以自定义显示，控制灵活，本来打算使用jquery插件进行异步文件上传，比如uploadfy但是需要额外的支持，也有人用iframe模仿异步上传机制，感觉都比较别扭。因为项目不考虑低版本浏览器，所以决定用html5实现。下面只是一个简单的demo，具体样式需要自己去做。后台基于strut2进行文件处理，具体因项目而定。只是要注意设置文件大小的限制。 <constant name="struts.multipart.maxSize" value="52428800"/>这个配置根据具体情况设定，超过此值会报404. 首先是上传页面,比较简单，附带了文件上者这个参数。 upload.jsp < %@page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <% String path = request.getContextPath(); %> <!DOCTYPE html> <html> <head> <title>使用XMLHttpRequest上传文件</title> <script type="text/javascript"> var xhr = new XMLHttpRequest(); //监听选择文件信息

jquery中处理ajax跨域的三大方式

阅读更多关于 jquery中处理ajax跨域的三大方式

之前mui项目开发过程遇到过跨域问题，搜集了下关于相关跨域的解决方案：一、处理跨域的方式： 1.代理 2.XHR2 HTML5中提供的XMLHTTPREQUEST Level2（及XHR2）已经实现了跨域访问。但ie10以下不支持只需要在服务端填上响应头： 1 2 3 header("Access-Control-Allow-Origin:*"); /*星号表示所有的域都可以接受，*/ header("Access-Control-Allow-Methods:GET,POST"); 3.jsonP 原理： ajax本身是不可以跨域的，通过产生一个script标签来实现跨域。因为script标签的src属性是没有跨域的限制的。其实设置了dataType: 'jsonp'后，$.ajax方法就和ajax XmlHttpRequest没什么关系了，取而代之的则是JSONP协议。JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问。 ajax的跨域写法：（其余写法和不跨域的一样）：比如 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

Ajax

阅读更多关于 Ajax

一、名词解释 1、同步Synchoronous 在一个任务进行中，不能开启其他任务同步访问中：在浏览器向服务器发送请求时，浏览器只能等待服务器的响应，不能做其他的任何事情出现场合：（1）地址栏访问服务器（2）a标签跳转（3）submit提交 2、异步Asynchoronous 在一个任务执行时，可以开启其他任务异步访问时，浏览器向服务器发送请求时，不耽误用户在网页的其他操作出现场合 1、用户名的验证 2、聊天室 3、搜索建议 4、股票走势图二、Ajax Asynchronous javascript and Xml（现在使用json居多）本质：使用js提供的异步对象（XMLHttpRequest），异步向服务器发送请求，并接收响应回来的数据，ajax可以无刷新的更改页面的布局内容 1、异步请求的步骤（1）创建异步对象 var xhr=new XHMHttpResponse() 异步对象的属性和方法： readyState属性：值：0～4，5个状态 0:请求未初始化 1:已经打开到服务器的连接，正在发送请求 2：接收响应头 3:接收响应主体 4:响应数据就收成功 status：服务器的响应状态码 200:服务器正确处理了请求，并给出响应 onreadystatechange：当xhr对象的readystate属性值发生变化时自动激发（2）绑定监听事件（3

项目:艺龙国内机票实时数据爬虫

阅读更多关于项目:艺龙国内机票实时数据爬虫

使用模块：requests（请求模块），js2py（js执行模块），json（解析json），xpath（解析网页）。项目流程：分析网站数据来源。编写爬虫脚本。验证数据准确性。 js逆向破解参数生成。更换请求参数城市（飞机起飞城市和落地城市或日期）测试结果是否正常。 1.分析网站数据来源进入艺龙机票列表搜索页，附上链接 http://flight.elong.com/flightsearch/list?departCity=bjs&arriveCity=sha&departdate=2018-12-2 4,链接参数日期自行更改。一般情况数据为调用接口获得，或是在页面中嵌入，这里很明显是调用了接口。 F12打开开发者工具（谷歌浏览器），选择network中的xhr，然后刷新页面或重新搜索，查看调用的接口。（这一步也可以使用抓包工具，推荐使用Fiddler，网上有许多汉化版的，看个人习惯吧。）调用了四个接口，点击接口查看返回结果，确定数据来源。看到出发机场，航空公司名称之类的英文，ok，就是这个了，点击进入Headers。数据来源已经确定，下面我们来构造爬虫请求接口。 2.编写爬虫脚本快速上手requests模块,链接已备好　　 http://docs.python-requests.org/zh_CN/latest/user/quickstart.html

Fundebug能够捕获这些BUG

阅读更多关于 Fundebug能够捕获这些BUG

**摘要：**Fundebug的JavaScript监控插件更新至0.1.0，可以监控3种不同类型的前端BUG： JavaScript执行错误、资源加载错误、 HTTP请求错误。从简单的onerror开始，Fundebug的JavaScript错误监控插件经过了多次迭代，功能也更加丰富与成熟。之前版本的插件只能监控 JavaScript执行错误，这次，我们正式发布0.1.0，它新增了对资源加载错误与 HTTP请求错误的支持，努力让前端开发者不放过每一个BUG 。 JavaScript执行错误由于拼写失误，测试不完善，或者是意外的边界条件，JavaScript代码在用户浏览器中执行时，有可能会出错。下面的示例中，alert被写成了aler，因此会报ReferenceError： aler("hello"); Fundebug插件捕获的这个错误之后，开发者将受到报警邮件，然后可以在我们的控制台查看错误详情：资源加载错误对于一个复杂的大型网站，所依赖的静态文件(js, css, jpg...)成千上万，因此出现加载错误，比如404，也是很常见的一种错误。下面的示例中，所引入的test.jpg并不存在，因此会报404错误： <img src="test.jpg"> 开发者可以在Fundebug控制台错误详情: HTTP请求错误

深入解析ES6中的promise

阅读更多关于深入解析ES6中的promise

作者 | Jeskson 来源 | 达达前端小酒馆什么是Promise Promise对象是用于表示一个异步操作的最终状态（完成或失败）以及其返回的值。什么是同步，异步同步任务会阻塞程序的执行，如alert，for 异步任务不会阻塞程序的执行，如setTimeou 使用Promise，then，catch，finally Promise.all 和 Promise.race Promise.resolve 和 Promise.reject 回调与Promise 回调函数，用于请求数据 function backFunction(fn) { setTimeout(function() { fn && fn(); }, 1000); } // 调用 backFunction(function() { console.log(1); // 1 backFunction(function() { console.log(2); // 2 backFunction(function() { console.log(3); // 3 }); }); }); Promise function d() { return new Promise(resolve = { setTimeout(function() { resolve(); // resolve成功的时候要做的事情 },1000)

AJAX-前后端交互的艺术

阅读更多关于 AJAX-前后端交互的艺术

AJAX-前后端交互的艺术为什么要用AJAX？当我们通过提交表单向服务器提交内容，或者进行一些其他操作，均涉及到了与浏览器之间的交互，传统的方式与AJAX方式的处理方法是不同的传统方式：用户触发一个HTTP请求到 Web服务器，服务器接收并处理传来的数据，然后回送一个新的页面分析1：这种方式浪费了很多资源和带宽，很多情况下，返回的页面大部分HTML代码是一致的分析2：客户在服务器处理请求期间，只能等待，不能进行操作 AJAX方式：AJAX可以只向服务器发送请求，并且取回必要的数据，客户端采用 JavaScript 的方式处理来自服务器的回应分析1：大大的减少了数据量，服务器回应速度更快，部分处理转移到了客户端，减轻了服务器的负荷分析2：可以实现客户端和服务器的异步通讯方式（后面说）举个例子: 如果我们通过 “传统方式” 对这个页面中的内容分页，这样的话，每次分页都会刷新整个页面，导致已经成功显示的头部信息，以及左侧固定信息，重新从服务器中获取，造成了带宽和服务器资源的孙欢，同时用户也增加了等待时间，如果我们通过 “AJAX方式” 实现内容分页，AJAX只需要从服务器中获取到需要的这些信息也就是图中的红色区域内的数据，这样就不需要刷新整个页面，只需要局部刷新就可以了，既能节省资源，又提升了用户的体验感什么是 AJAX AJAX(Asynchronous

订阅 XHR