在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
标签：至少1个，最多5个
需求场景：借助 ajaxTransport 来自定义扩展功能。
项目需求：jQuery 版本： 1.10.2，错误打点，发起 jsonp 请求发生错误的时候前端需要向打点地址发送一个请求。
简单演示：
测试代码：
$.ajax('http://google.com/a.js', {
type: 'GET',
dataType: 'jsonp',
success: function(success, statusText, jqXHR){
console.log('jsonp request success');
error: function(jqXHR, statusText, error){
console.log('jsonp error');
由于 1.10.2 版本的 jquery 并没有对创建的 script 监听错误事件，故无法调用 error 方法，故无法进一步将前端信息错误上报
解决方案：
$.ajaxTransport('+script', function(s){
// This transport only deals with cross domain requests
var script,
head = document.head || $('head')[0] || document.documentE
send: function(_, callback) {
script = document.createElement('script');
script.async =
if(s.scriptCharset){
script.charset = s.scriptC
script.src = s.
// Handle error
script.onerror = function(err){
// Handle memory lead in IE
script.onload = script.onreadystatechange =
script.onerror =
// Remove the script
if(script.parentNode){
script.parentnode.removeChild(script);
// Dereference the script
if(err.type === 'error'){
callback(404, err.type);
// Attach handlers for all browsers
script.onload = script.onreadystatechange = function(_, isAbort){
if(isAbort || !script.readyState ||
/loaded|complete/.test(script.readyState)){
// Handle memeory leak in IE
script.onload = script.onreadystatechange =
// Remove the script
if(script.parentNode){
script.parentNode.removeChild(script);
// Dereference the script
// Callback if not abort
if(!isAbort){
callback(200, 'success');
// Cicumvent IE6 bugs with base elements (#2709 and #4378) by prepending
// Use native DOM manipulation to avoid our domManip AJAX trickery
head.insertBefore(script, head.firstChild);
abort: function(){
if(script){
script.onload(undefined, true);
需求场景：借助 ajaxSetup 新增 dataType.
项目需求：需要从服务器获取 yaml 文件，然后解析该文件
简单演示：
解决方案：
function parseYaml(text){
console.log('You are parsing yaml file!');
return 'yaml' + text + 'yaml';
$.ajaxSetup({
accepts: {
yaml: 'application/x-yaml, text/yaml'
contents: {
yaml: /yaml/
converters: {
'text yaml': function(text){
return parseYaml(text);
测试代码：
// 发送 dataType 为 yaml 的请求
url: 'http://google.com/helloworld.yaml',
dataType: 'yaml',
success: function(data){
console.log(data);
需求场景：借助 ajaxPrefilter 来自定义扩展功能。
项目需求：防止 ajax 请求的重复提交
简单演示：
解决方案：
var pendingRequests = {};
function storePendingRequest(key, jqXHR){
pendingRequests[key] =
jqXHR.pendingRequestKey =
function generatePendingRequestKey(options){
return (options.type + options.url + options.dataType).toLowerCase().replace(/[^a-z0-9]/g, '');
$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
// 不重复发送相同请求
var key = generatePendingRequestKey(options);
if (!pendingRequests[key]) {
storePendingRequest(key, jqXHR);
// or do other
jqXHR.abort();
var complete = options.
options.complete = function(jqXHR, textStatus) {
// clear from pending requests
pendingRequests[jqXHR.pendingRequestKey] =
if ($.isFunction(complete)) {
complete.apply(this, arguments);
测试代码：
for(var i = 0; i & 10; i++){
var j = 0;
url: 'http://js.passport.qihucdn.com/5.0.2.js',
type: 'GET',
dataType: 'HTML',
complete: function(){
console.log('complete:' + j++);
0 收藏&&|&&1
你可能感兴趣的文章
66 收藏，2.7k
1 收藏，366
38 收藏，21.7k
分享到微博？
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。浅谈AJAX - 简书
ajax大家应该都会很熟悉，我们在工作中或多或少的都会接触到ajax，今天我来谈一谈我对ajax的理解。
什么是ajax
AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。我觉得ajax更像是一把钥匙，一把打开前端后端之间那道门的钥匙。
ajax相比form表单的优势
很早之前我们都会采用form表单进行数据的传输，但是这里却又很多问题比如：1.刷新页面（用户体验不好）2.不能从服务器取数据
然而ajax可以在不重新加载整个网页的情况下，对网页的某部分进行更新，并且能获取到后台返回给我们的数据，小伙伴们觉得那个更适合我们使用呢。
ajax的传输方式及区别
大家应该都知道ajax的传输方式可以分为get和post两种，然而它们之间却有一些差别:
| 安全程度
| 是否利于分享
|:-------------:|:-------------:|:-------------:|:-------------:|:-------------:|:-------------:|
| 32kB | 不安全 | url传输
相对安全 | 非url传输数据
ajax的注意事项
在服务器环境下运行
（get）应该在传输的数据后面采用：
Math.random();
new Date().getTime();
不用关心文件后缀名
编码格式要一致
返回的都是字符串
ajax的创建步骤
在提到ajax的创建步骤之前我们先聊一聊打电话把，当你要给别人打电话的时候我们需要准备什么呢？首先我们需要弄到一个手机(怎么弄到的我就不问了哈),之后我们要拨打对方的号码，然后我们当然要跟他说一些事情啦，最后我们应该听他对我们的反馈(难不成你要说完就把电话挂断吗？)其实仔细想想这与ajax创建过程不是一样吗？
创建ajax对象
if (window.XMLHttpRequest) {
//高版本浏览器
var oAjax=new XMLHttpRequest();
//兼容ie低版本
var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
//GET方式,这里的data应该为json形式name=value&name1=value...
oAjax.open('GET',url+'?'+data,true);
//POST方式
oAjax.open('POST',url,true);
oAjax.send();
//POST方式，这里需要设置请求头
oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//这里的data应该为json形式name=value&name1=value...
oAjax.send(data);
//这里的fnSucc和fnErr分别为成功的回调函数，以及失败的回调函数
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
if(oAjax.status&=200&&oAjax.status&300 ||oAjax.status==304){
fnSucc && fnSucc(oAjax.responseText);
fnErr && fnErr(oAjax.status);
ajax中readyState的状态以及代表的含义
UNSEND ajax对象已经准备完毕，但是还没有打开连接
已经打开连接(建立好连接)
HEADERS-RECEVICED 发送请求完毕，头部信息也接收完毕了
下载内容(接收内容)
类似于jQuery的方式封装ajax
function ajax(json){
if(!json.url){
alert('请求出错');
json.time=json.time||3000;
json.type=json.type||'get';
json.data=json.data||{};
var timer=
if(window.XMLHttpRequest){
var oAjax=new XMLHttpRequest();
var oAjax=new ActiveXObject("Microsoft.XMLHTTP");
switch (json.type.toLowerCase()){
case 'get':
oAjax.open('GET',json.url+'?'+jsonToStr(json.data),true);
oAjax.send();
case 'post':
oAjax.open('POST',json.url,true);
oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
oAjax.send(jsonToStr(json.data));
oAjax.onreadystatechange=function(){
if(oAjax.readyState==4){
if(oAjax.status&=200&&oAjax.status&300||oAjax.status==304){
json.success&&json.success(oAjax.responseText);
json.error&&json.error(oAjax.status);
clearTimeout(timer);
timer=setTimeout(function(){
alert('服务器超时');
oAjax.onreadystatechange=
},json.time);
function jsonToStr(json){
var arr=[];
json.t=Math.random();
for(var name in json){
arr.push(name+'='+json[name]);
return arr.join('&');
感谢大家的观看谢谢！
Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智能路由，微代理，控制总线）。分布式系统的协调导致了样板模式, 使用Spring Cloud开发人员可以快速地支持实现这些模式的服务和应用程序。他们将在任何分布式...
一、什么是ajax？ AJAX(AsynchronousJavaScriptandXML)：异步的JavaScript和XML。 AJAX不是新的编程语言，而是一种使用现有标准的新方法。是在不需要重新加载网页的情况下，与服务器进行数据交互并更新部分网页的技术。 Eg：当你在...
AJAX 原生js操作ajax 1.创建XMLHttpRequest对象 var xhr = new XMLHttpRequest();//ie5 ie6 xhr = new ActiveXObject(Microsoft.XMLHTTP&) 2.打开链接 xhr.open...
什么是Ajax AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。 ajax的原理 Ajax技术核心是XMLHttpRequest对象（简称XHR）; ajax的使用能够以异步的方式从服务器获取信...
百战程序员_ Java1573题 QQ群：034603 掌握80%年薪20万掌握50%年薪10万 全程项目穿插, 从易到难，含17个项目视频和资料持续更新，请关注www.itbaizhan.com 国内最牛七星级团队马士兵、高淇等11位十年开发经验专...
“万般皆下品，惟有读书高。”对此，我虽然不敢苟同，但读书不求功名利禄，自娱自乐地去读，闲暇无事乱翻书，倒也不失为一种享乐，一种陶然，一种升华了的人生境界。 说起读书，也有境界高下之分，近人林语堂曾说，读书之要在乎“味道”，在乎养性修态，若要“使心智进步而读书”，“则读书的一...
（知识笔记） 1.《春秋》的“微言大义”并不是从它自身而来。所谓“一字之褒、一字之贬”都属于跪着读经典读出来的结论，它需要更夸张的想象力，而不是更牢靠的考据精神。《公羊传》推论出来的“九世复仇”的强悍道理是建立在宗法封建的社会结构之上的。这显然不是皇帝喜欢看到的社会风貌。老...
一个劲地涛涛不绝 推销自己的思想 自己的理念 最终，把自己的个性 也推销完了 将一脸灿烂的 微笑庄重地 写在学生的眼眼里 将睿智的爱 装进学生的胸膛里 …… 就这样你在微笑中 和时光慢慢变老
生活就像是水滴，由众多零碎片段填充了我们人生的长河，谁也不曾想每一天的日子终究会把我们带向何方，就像没有一滴水会认为自己能成就涛涛大海，也没有一滴水会认为自己会造成洪灾。 号，当大家都在欢天喜地的开启小长假模式，我接了新项目默默的去公司加班，南方的已经进入了...
之前是得不到想要而难过， 现在是得到了怕失去而难过。 我这么脆弱该不该让你知道，你会如何想，会不会觉得我不够独立？ 我又好想让你知道，我这种珍惜的心情。 我又唯恐所有爱情都撑不到最后，现在的情深成为日后的笑话。ajax_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
&&ajax知识总结
阅读已结束，下载文档到电脑
想免费下载更多文档？
定制HR最喜欢的简历
下载文档到电脑，方便使用
还剩3页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢今天做东西，考虑用户最好的体验，要实现界面上异步请求数据的loading效果，功能代码都是别人写完的，大概几十个地方，用的都是jQuery的load方法。咋整啊，总不能挨个去...
为什么这么做前提加入基于这样的一个现实，我们后台返回给我们的数据中都有一个json数据，数据中包含data，success，message等字段，success表示是否后台有操作的异常。通用处理，减少...
//扩展ajax方法,用来统一处理后端抛出的异常
(function($){
//备份jquery的ajax方法
var _ajax=$.
由于项目中大量的实用了.post方法，而该方法默认不对请求的异常进行处理，后期又要处理该问题。前期的解决方案是将使用.post方法，而该方法默认不对请求的异常进行处理，后期又要处理该问题。前期的解决方...
使用Jquery的ajax方法的时候，由于$.ajax()需要在beforeSend添加Loading的效果，但是鉴于每次使用的beforeSend的Loading效果
相差不大，为了避免麻烦，所以...
======================================================
注：本文源代码点此下载
=============================...
扩展JQuery Ajax请求错误机制，实现服务器端消息回馈。JQuery使我们在开发Ajax应用程序的时候提高了效率，减少了许多兼容性问题，但时间久了，也让我们离不开他。比如简单的Jquery Aj...
分页控件式大家在熟悉不过的控件，很多情况下都需要使用到分页控件来完成列表数据加载操作，在很多分页控件中有的编写麻烦，有的应用扩展比较复杂，有的分页控件样式比较丑陋，有的分页控件用户体验操作比较简单等等...
//前题是在MODEL有个Student模型
//在view视图中搜索页面
//引入脚本文件
他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)