CSDN论坛 第12期专家问答——Ajax开发答疑

CSDN 2013-08-09 02:53:04
加精
CSDN论坛本期专家问答我们请来了showbo为大家解答Ajax开发相关问题。

问答时间:8月9日~8月16日

问答规则:Ajax开发相关都可以在此提问。

问答奖励:问答结束后会随机抽取3名用户,奖励最新一期《程序员》杂志一本。

专家简介

韦少波,ID:showbo

从事web开发5年多,现实世界小码农,对ajax情有独钟,经常混迹于csdn,喜欢ajax朋友大家交流交流。
...全文
7414 112 打赏 收藏 转发到动态 举报
写回复
用AI写文章
112 条回复
切换为时间正序
请发表友善的回复…
发表回复
Go 旅城通票 2013-09-06
  • 打赏
  • 举报
回复
引用 111 楼 cloudgamer 的回复:
使用ajax时 如果不想用缓存数据可以在url加随机数之类的 能不能不改变url的情况下 在js控制是用缓存数据还是重新从服务器获取数据呢
主要是ie有缓存,请求动态页可以用post就不会缓存了,get请求动态页需要设置expires响应头

<%
response.AddHeader "pragma","no-cache"
response.AddHeader "cache-control","no-cache"
response.AddHeader "expires","0"

response.Write now
%>
如果是静态页,需要加上禁止缓存的meta,就需要自己分析返回的数据提取需要的内容了

<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
cloudgamer 2013-09-06
  • 打赏
  • 举报
回复
使用ajax时 如果不想用缓存数据可以在url加随机数之类的 能不能不改变url的情况下 在js控制是用缓存数据还是重新从服务器获取数据呢
hongyunshiwo 2013-08-27
  • 打赏
  • 举报
回复
Go 旅城通票 2013-08-22
  • 打赏
  • 举报
回复
引用 108 楼 pengqian098 的回复:
我现在的问题不是ajax的问题, 页面元素太多,导致页面很慢,不知道咋优化了。 特别是IE,渲染速度慢,加上元素多
要将多个js合并起来,js文件会挂起其他组件的下载,js文件最好放到页面最底下,这样不影响下载其他图片之类的组件,楼主去看下高性能网站建设指南.pdf这个,介绍了很多网站优化方法
bruce_华仔 2013-08-21
  • 打赏
  • 举报
回复
都是前辈啊。
跳动de指尖 2013-08-21
  • 打赏
  • 举报
回复
我现在的问题不是ajax的问题, 页面元素太多,导致页面很慢,不知道咋优化了。 特别是IE,渲染速度慢,加上元素多
lkmtao 2013-08-19
  • 打赏
  • 举报
回复
顶!就喜欢技术贴
cloudgamer 2013-08-18
  • 打赏
  • 举报
回复
在后台用Msxml2.XMLHTTP获取页面后有办法运行里面的js吗 例如页面里面有一个fun函数可以模拟运行它吗
Go 旅城通票 2013-08-18
  • 打赏
  • 举报
回复
引用 99 楼 cloudgamer 的回复:
在后台用Msxml2.XMLHTTP获取页面后有办法运行里面的js吗 例如页面里面有一个fun函数可以模拟运行它吗
可以用正则提取script脚本出来,然后用MSScriptControl.ScriptControl组件运行js脚本,不过如果是和DOM对象交互的js脚本就没多大的意义了 和DOM交互的使用客户端webbrowser组件比较好些。
乌琪 2013-08-14
  • 打赏
  • 举报
回复
好长啊,观摩观摩
lplirong 2013-08-14
  • 打赏
  • 举报
回复
这人多的。。。。。
MJaney 2013-08-13
  • 打赏
  • 举报
回复
引用 87 楼 showbo 的回复:
[quote=引用 83 楼 minwenjiemwj 的回复:] 问下,你从事工作这么久以来,是什么让你最终坚持下了编程之路?就如你所说,有些公司的任务不是太多,大多是维护,但维护锻炼不了什么,只有在一个完整的项目开发中才能获得较大的锻炼,所以,请问,当你在空闲时应该做些什么呢?
个人喜欢吧,计算机专业出来的,搞网站开发维护也算回归本业。我这里小城市小公司,技术就我一个,所以基本什么都要会点,所以要学的还是很多的,碰到问题就自己谷歌百度找下。所以空闲下来的时候可以多补充下相关需要的知识,找点电子书看或者多混下csdn,看别人遇到的问题自己是否能解决,慢慢积累经验[/quote] 嗯,我目前在北京工作,大城市里面有很多人都在奋斗努力,表示亚历山大呀,不过我会慢慢积累的
Go 旅城通票 2013-08-13
  • 打赏
  • 举报
回复
引用 77 楼 fangmingshijie 的回复:
[quote=引用 76 楼 showbo 的回复:]
[quote=引用 65 楼 fangmingshijie 的回复:]
ajax跨域问题。已经在servlet里设置了头信息Access-Control-Allow-Origin=*了,但还是无法访问url,url是经过nginx负载均衡的。


用firebug或者chrome看下服务器的响应头是否存在Access-Control-Allow-Origin:*,如下图所示


是自己写的ajax代码还是jquery或者其他类库?设置过Access-Control-Allow-Origin响应头后,IE8直接使用XMLHttprequest跨域请求,IE9或者IE10出现了拒绝访问错误。汗。。IE9+也支持XDomainRequest对象,但是获取不到数据,不知道IE搞什么鬼东西

所以最好还是提供JSONP操作或者自己做个代理页面好些。[/quote]存在的,jsonp的方式也写好了,不过还没有测试。再问下,servlet里已经设置Access-Control-Allow-Origin:*了,如果jsonp能成功,那我在servlet里设置Access-Control-Allow-Origin:*(跨域)不是说明没起到作用吗?我知道jsonp底层肯定解决了跨域问题。但Access-Control-Allow-Origin:*失效,说明什么问题呢?[/quote]

你应该使用的是jquery1.5+以上版本吧,并且在IE中才会出现这个问题,这个和IE的区域安全设置和jquery版本有关,如果IE的internet安全区域的通过域访问数据源没有启用,打开跨域链接时就会报错。

jquery1.5+重写过ajax代码,增加了跨域判断(自动判断请求的url地址是否和当前访问的页面同源,jquery1.4-版本没有增加跨域判断,所以直接发送ajax请求,这样就和浏览器的安全设置有关了),jquery1.5+如果跨域访问并且不支持跨域请求(这些都是jquery代码自动判断的),就不会发送ajax请求,所以就不会触发任何事件,忽略了浏览器安全设置,所以jquery1.4+能在ie配置安全区域的通过域访问数据源后可以跨域请求,而jquery1.5+就完全没有反应


具体可以参考jquery未压缩的源代码中的这些代码,是否支持跨域jquery是通过xhr的withCredentials属性来判断,在IE10-之前的版本都没有实现,所以jquery1.5+版本在ie下都默认xhr对象不支持跨域的,忽略了ie浏览器的安全配置
// Functions to create xhrs
function createStandardXHR() {
try {
return new window.XMLHttpRequest();
} catch( e ) {}
}

function createActiveXHR() {
try {
return new window.ActiveXObject("Microsoft.XMLHTTP");
} catch( e ) {}
}

// Create the request object
// (This is still attached to ajaxSettings for backward compatibility)
jQuery.ajaxSettings.xhr = window.ActiveXObject ?
/* Microsoft failed to properly
* implement the XMLHttpRequest in IE7 (can't request local files),
* so we use the ActiveXObject when it is available
* Additionally XMLHttpRequest can be disabled in IE7/IE8 so
* we need a fallback.
*/
function() {
return !this.isLocal && createStandardXHR() || createActiveXHR();
} :
// For all other browsers, use the standard XMLHttpRequest object
createStandardXHR;

// Determine support properties
xhrSupported = jQuery.ajaxSettings.xhr();
jQuery.support.cors = !!xhrSupported && ( "withCredentials" in xhrSupported );
xhrSupported = jQuery.support.ajax = !!xhrSupported;

// Create transport if the browser can provide an xhr
if ( xhrSupported ) {

jQuery.ajaxTransport(function( s ) {
// Cross domain only allowed if supported through XMLHttpRequest
if ( !s.crossDomain || jQuery.support.cors ) {
汉将马援 2013-08-13
  • 打赏
  • 举报
回复
rihaduo202 2013-08-12
  • 打赏
  • 举报
回复
支持技术牛人··· 膜拜中!
ANGUD 2013-08-12
  • 打赏
  • 举报
回复
引用 50 楼 showbo 的回复:
[quote=引用 46 楼 u011636587 的回复:] 我说 你们还有木有节操 问点实际的 想调戏小盆友这种事就别说出来啦。 波波 ,你是什么时候开始学编程的?
06年毕业就开始搞网站编程了吧,大学都是玩过来的,刚开始就了解点js基础,好在公司开发任务不是很多,大多维护的,有大把的时间来混csdn积累经验,看看书[/quote] 我是一个新人,现在开始学编程,应该先学那种语言好点啊?而且我本人英语不太好,对一些英语专业名词都不懂,有没有这方面的书籍之类的?帮忙介绍一本呗。
程序员鼓励师 2013-08-12
  • 打赏
  • 举报
回复
引用 37 楼 showbo 的回复:
引用 34 楼 net_lover 的回复:
支持韦少波showbo进行问答
,偶像,孟老大的aspx.dotnet.cc好长时间打不开了?
孟宪会之精彩世界 http://dotnet.51aspx.com/ 这里看看
  • 打赏
  • 举报
回复
引用 36 楼 showbo 的回复:
[quote=引用 18 楼 maco_wang 的回复:] 我对ajax不太了解 1.纯js写的ajax 2.多年前用过这种: <httpHandlers>  <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/> </httpHandlers> 后台方法前面+[AjaxPro.AjaxMethod]。 3.多年前用过UpdatePanel控件。 4. 后来用过这种 $(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"/jquery/test1.txt",async:false}); $("#myDiv").html(htmlobj.responseText); }); }); 5.波波,现在最新的是什么样子的?
引用 18 楼 maco_wang 的回复:
我对ajax不太了解 1.纯js写的ajax 2.多年前用过这种: <httpHandlers>  <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/> </httpHandlers> 后台方法前面+[AjaxPro.AjaxMethod]。 3.多年前用过UpdatePanel控件。 4. 后来用过这种 $(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"/jquery/test1.txt",async:false}); $("#myDiv").html(htmlobj.responseText); }); }); 5.波波,现在最新的是什么样子的?
1,纯js基本就是判断下是否支持XMLHttpRequest或者ActiveXObject(主要IE6,IE7+开始支持XMLHttpRequest对象),然后设置onreadystatechange状态转换函数,open打开连接,send发送请求,判断readyState是否为4,status是否为200(不通过http/https访问成功请求为0),然后通过responseText/responseXML(对响应头为text/xml才会有值)属性获取服务器返回的响应内容,然后处理数据就行了。 简单的DEMO
var xhr=window.XMLHttpRequest?new XMLHttpRequest():new window.ActiveXObject("microsoft.xmlhttp"):false;
if(xhr){
  xhr.onreadystatechange=function(){
     if(xhr.readyState==4){//需要为4数据解析完毕后才能获取,支持steaming ajax的readyState为3就可以获取了,不支持的会保存,所以还是为4时才获取
         if(200==xhr.status||0==xhr.status){
             var data=xhr.responseText;//如果请求xml格式的内容,响应头为text/xml,可以使用xhr.responseXML得到xml document对象
            //后续的处理,如eval处理成JSON对象或者split才分成数据什么的,根据动态页返回的数据
        }
        else alert('请求的页面有问题\nstatus:'+xhr.status+'\n'+xhr.responseText);
    }
  }
  xhr.open("get","url地址",true);
  xhr.send(null);
}
else alert('浏览器不支持ajax(⊙o⊙)哦!');
2,使用的是ajaxpro,需要结合asp.net,以前也有用过,写了些小总结,嘿嘿。 3,微软的,不太了解生成的客户端js类库结构,不过提供的无刷新方法,都是居于XMLHttpRequest或者activexobject来实现的,只是做了打包,方便调用 4,jquery框架,和3一样对ajax对象进行了打包,最好还是不要设置async:false启用同步请求,网速慢浏览器假死体验很差,同步请求实现的,都可以通过异步+回调来解决。 5,如何写主要还是依赖使用哪个类库,2,3,4都是使用底层的ajax对象来实现无刷新,如果用Ext,还可以
Ext.Ajax.request({
    url: 'page.php',
    params: {
        id: 1
    },
    success: function(response){
        var text = response.responseText;
        // process server response here
    }
});
不过为了使用ajax倒入ext框架就有点大材小用。。O(∩_∩)O~ 相关参考 ajax问题总结 ajax对象常用属性,事件,方法大小写问题的总结 ajax onreadystatechange状态转换函数研究 firefox下XMLHttpRequest重用时nsIXMLHttpRequest.send发生错误的解决方案 firefox Streaming AJAX实现源代码 ajaxpro使用总结[/quote]真是用心啊 ,,膜拜
lenj520 2013-08-12
  • 打赏
  • 举报
回复
引用 35 楼 showbo 的回复:
[quote=引用 14 楼 lenj520 的回复:] 大神 请指教 $("#fileImg").uploadify({ 'uploader' : './swf/uploadify.swf', //flash文件的相对路径 'buttonText': 'BROWSE', 'method': 'post', 'script' : './upload.action', //后台处理程序的相对路径 'cancelImg' : './images/cancel.png', //每一个文件上的关闭按钮图标 'auto': true, 'multi': false, 'fileDataName': 'fileImg', 'fileExt': '*.jpg;*.gif', 'onComplete': function (event, queueID, fileObj, response, data) { var index =GetIndex(); //该方法获取的参数是正确的 alert(index); //弹出的值正确无误 $("#fileImg").uploadifySettings('scriptData',{'index': index}); if (response && response.length > 0) { var stringArray = response.split("|"); if (stringArray[0] == "1") { $("#imgReview").attr("src", stringArray[1]); $("#imgFrame" + index).attr("src", stringArray[1]); var imgInfo = "格式:" + fileObj.type + "   大小:" + (parseFloat(fileObj.size) / 1024).toFixed(2) + "KB"; $("#imgInfo").html(imgInfo); $("#HidImgInf" + index).val(imgInfo); $("#HidImg" + index).val(stringArray[1]); $("#optype" + index).val("1"); } else { alert("对不起,上传出错。原因:" + stringArray[2]); } } } }); action取值方式: String index=request.getParameter("index"); 1.index 通过getindex()能获取到正确的值 2.通过红色的部分 把index这个参数传到 ACTION里面去 第一获取的到始终是空置 3.再次执行的时候 获取到的值是首次执行的值。 请问是什么原因呢? 该如何修改?
'onComplete': 是在第一次发送成功返回后执行,所以$("#fileImg").uploadifySettings('scriptData',{'index': index});设置的附加数据只有第二次请求才会获取到,而第一次没有scriptData,所以获取的是空的,所以就出现了下次请求得到上一次的问题 如果GetIndex()函数不依赖第一次请求的返回结果,可以直接这样设置 $("#fileImg").uploadify({ 'uploader' : './swf/uploadify.swf', //flash文件的相对路径 scriptData:{index:GetIndex()} [/quote] GetIndex() 这个方法产生的值是动态的 每次都不一样 怎么样设置才能传值过去呢? 我按照上面的方式传值 每次都是一样的。
1163537986 2013-08-12
  • 打赏
  • 举报
回复
还不错的啊
加载更多回复(68)

52,797

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧