《2022年AJAX跨域问题 .pdf》由会员分享，可在线阅读，更多相关《2022年AJAX跨域问题 .pdf（32页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、那么知道什么是 Jsonp 和 pjax 吗？答案：Jsonp：(JSONwith Padding)是一种跨域请求方式。主要原理是利用了script标签可以跨域请求的特点，由其 src 属性发送请求到服务器，服务器返回js代码，网页端接受响应，然后就直接执行了，这和通过script标签引用外部文件的原理是一样的。JSONP 由两部分组成：回调函数和数据，回调函数一般是由网页端控制，作为参数发往服务器端，服务器端把该函数和数据拼成字符串返回。pjax：pjax 是一种基于 ajax+history.pushState的新技术，该技术可以无刷新改变页面的内容，并且可以改变页面的URL。（关键点：可
2、以实现ajax 无法实现的后退功能）pjax 是 ajax+pushState的封装，同时支持本地存储、动画等多种功能。目前支持jquery、qwrap、kissy等多种版本。jQueryAjax简单的实现跨域请求html代码清单：$(function()$.ajax(type:get,url:http:/ 1 页，共 32 页 -name=response);echo$_GETjsoncallback.(.json_encode($arr).);效果图：AJAX 跨域请求-JSONP 获取 JSON 数据博客分类：Javascript/Jquery/Bootstrap/WebAsynchro
3、nous JavaScriptand XML(Ajax)是驱动新一代Web站点（流行术语为Web2.0站点）的关键技术。Ajax允许在不干扰Web 应用程序的显示和行为的情况下在后台进行数据检索。使用XMLHttpRequest函数获取数据，它是一种API，允许客户端JavaScript通过 HTTP 连接到远程服务器。Ajax也是许多mashup 的驱动力，它可将来自多个地方的内容集成为单一Web应用程序。不过，由于受到浏览器的限制，该方法不允许跨域通信。如果尝试从不同的域请求数据，会出现安全错误。如果能控制数据驻留的远程服务器并且每个请求都前往同一域，就可以避免这些安全错误。但是，如果仅停
4、留在自己的服务器上，Web 应用程序还有什么用处呢？如果需要从多个第三方服务器收集数据时，又该怎么办？理解同源策略限制同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL的域必须与当前Web页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。这个浏览器策略很旧，从 Netscape Navigator2.0版本开始就存在。克服该限制的一个相对简单的方法是让Web 页面向它源自的Web 服务器请求数据，并且让Web 服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获得了普遍使用，但名师资料总结-精品资料欢迎下载-名师精心整理-
5、第 2 页，共 32 页 -它是不可伸缩的。另一种方式是使用框架要素在当前Web 页面中创建新区域，并且使用GET请求获取任何第三方资源。不过，获取资源后，框架中的内容会受到同源策略的限制。克服该限制更理想方法是在Web 页面中插入动态脚本元素，该页面源指向其他域中的服务URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的，因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档，就不会成功。幸运的是，通过添加JavaScriptObject Notation(JSON)可以改进该技术。1、什么是JSONP？要了解
6、JSONP，不得不提一下JSON，那么什么是JSON？JSONis a subset of the objectliteralnotationof JavaScript.Since JSONis a subsetofJavaScript,itcan be used inthelanguagewithno muss orfuss.JSONP(JSON withPadding)是一个非官方的协议，它允许在服务器端集成Scripttags 返回至客户端，通过javascriptcallback的形式实现跨域访问（这仅仅是JSONP 简单的实现形式）。2、JSONP有什么用？由于同源策略的限制，Xml
7、HttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过 script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。3、如何使用JSONP？下边这一 DEMO 实际上是 JSONP 的简单表现形式，在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数。HTML代码（任一）：Html 代码1.2.名师资料总结-精品资料欢迎下载-名师精心整理-第 3 页，共 32 页 -3.functionjsonpCallback(result)4./alert(resu
8、lt);5.for(variinresult)6.alert(i+:+resulti);/循环输出 a:1,b:2,etc.7.8.9.var JSONP=document.createElement(script);10.JSONP.type=text/javascript;11.JSONP.src=http:/ 代码1.2.3.functionjsonpCallback(result)4.alert(result.a);5.alert(result.b);6.alert(result.c);7.for(variinresult)8.alert(i+:+resulti);/循环输出 a:1,
9、b:2,etc.9.名师资料总结-精品资料欢迎下载-名师精心整理-第 4 页，共 32 页 -10.11.12.JavaScript的链接，必须在function的下面。服务端 PHP代码（services.php）：Php代码1.1,b=2,c=3,d=4,e=5);5.$result=json_encode($arr);6./echo$_GETcallback.(Hello,World!);7./echo$_GETcallback.($result);8./动态执行回调函数9.$callback=$_GET callback;10.echo$callback.($result);如果将上述
10、JS 客户端代码用jQuery 的方法来实现，也非常简单。$.getJSON$.ajax$.get客户端 JS代码在 jQuery 中的实现方式1：Js 代码1.2.3.$.getJSON(http:/ iinresult)6.alert(i+:+resulti);/循环输出 a:1,b:2,etc.名师资料总结-精品资料欢迎下载-名师精心整理-第 5 页，共 32 页 -7.8.);9.客户端 JS代码在 jQuery 中的实现方式2：Js 代码1.2.3.$.ajax(4.url:http:/ iinresult)10.alert(i+:+resulti);/循环输出 a:1,b:2,et
11、c.11.12.,13.timeout:300014.);15.名师资料总结-精品资料欢迎下载-名师精心整理-第 6 页，共 32 页 -名师资料总结-精品资料欢迎下载-名师精心整理-第 7 页，共 32 页 -客户端 JS代码在 jQuery 中的实现方式3：名师资料总结-精品资料欢迎下载-名师精心整理-第 8 页，共 32 页 -Js 代码1.2.3.$.get(http:/ iinjson)alert(i+:+jsoni);,jsonp);4.其中 jsonCallback是客户端注册的，获取跨域服务器上的 json 数据后，回调的函数。http:/ url是跨域服务器取 json数据的
12、接口，参数为回调函数的名字，返回的格式为Js 代码1.jsonpCallback(msg:thisisjsondata)Jsonp 原理：首先在客户端注册一个callback,然后把 callback的名字传给服务器。此时，服务器先生成json数据。然后以javascript语法的方式，生成一个function,function名字就是传递上来的参数 jsonp.最后将json数据直接以入参的方式，放置到function中，这样就生成了一段js语法的文档，返回给客户端。客户端浏览器，解析script标签，并执行返回的javascript文档，此时数据作为参数，传入到了客户端预先定义好的call
13、back函数里.（动态执行回调函数）使用 JSON的优点在于：比 XML轻了很多，没有那么多冗余的东西。JSON也是具有很好的可读性的，但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示，浏览器对于JSON的格式化的显示就需要借助一些插件了。名师资料总结-精品资料欢迎下载-名师精心整理-第 9 页，共 32 页 -在 JavaScript中处理 JSON很简单。其他语言例如PHP对于 JSON的支持也不错。JSON也有一些劣势：JSON在服务端语言的支持不像XML那么广泛，不过JSON.org 上提供很多语言的库。如果你使用eval()来解析的话，会容易出现安全问题。尽管如此，J
14、SON的优点还是很明显的。他是Ajax 数据交互的很理想的数据格式。主要提示：JSONP是构建mashup 的强大技术，但不幸的是，它并不是所有跨域通信需求的万灵药。它有一些缺陷，在提交开发资源之前必须认真考虑它们。第一，也是最重要的一点，没有关于JSONP调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到404错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。（未来的jQuery版本可能有终止JSONP请求的特性）。JSONP的另一个主要缺陷是被不信任的服务使用时会很危险。因为JSONP服务返回
15、打包在函数调用中的JSON响应，而函数调用是由浏览器执行的，这使宿主Web 应用程序更容易受到各类攻击。如果打算使用JSONP服务，了解它能造成的威胁非常重要jquery中 ajax 处理跨域的三大方式一、处理跨域的方式：1.代理2.XHR2HTML5 中提供的XMLHTTPREQUESTLevel2（及 XHR2）已经实现了跨域访问。但ie10 以下不支持名师资料总结-精品资料欢迎下载-名师精心整理-第 10 页，共 32 页 -只需要在服务端填上响应头：header(Access-Control-Allow-Origin:*);/*星号表示所有的域都可以接受，*/header(Access
16、-Control-Allow-Methods:GET,POST);3.jsonP原理：ajax 本身是不可以跨域的，通过产生一个script标签来实现跨域。因为script标签的 src 属性是没有跨域的限制的。其实设置了dataType:jsonp后，$.ajax方法就和ajaxXmlHttpRequest没什么关系了，取而代之的则是JSONP 协议。JSONP是一个非官方的协议，它允许在服务器端集成Scripttags 返回至客户端，通过javascriptcallback的形式实现跨域访问。ajax 的跨域写法：（其余写法和不跨域的一样）：比如/*当前网址是localhost:3000*
17、/js 代码$.ajax(type:get,url:http:/localhost:3000/showAll,/*url写异域的请求地址*/dataType:jsonp,/*加上datatype*/jsonpCallback:cb,/*设置一个回调函数，名字随便取，和下面的函数里的名字相同就行*/success:function()。名师资料总结-精品资料欢迎下载-名师精心整理-第 11 页，共 32 页 -);/*而在异域服务器上，*/app.jsapp.get(/showAll,students.showAll);/*这和不跨域的写法相同*/*在异域服务器的showAll函数里，*/var
18、db=require(./database);exports.showAll=function(req,res)/*设置响应头允许ajax 跨域访问*/res.setHeader(Access-Control-Allow-Origin,*);/*星号表示所有的异域请求都可以接受，*/res.setHeader(Access-Control-Allow-Methods,GET,POST);varcon=db.getCon();con.query(select*fromt_students,function(error,rows)if(error)console.log(数据库出错：+error)
19、;else/*注意这里，返回的就是jsonP 的回调函数名+数据了*/res.send(cb(+JSON.stringify(r)+););二、解决 ajax 跨域访问、JQuery 的跨域方法JS 的跨域问题，我想很多程序员的脑海里面还认为JS 是不能跨域的，其实这是一个错误的观点；有很多人在网上找其解决方法，教其用IFRAME去解决的文章很多，真有那么复杂吗？其实很简单的，如果你用JQUERY，一个GETJSON 方法就搞定了，而且是一行代码搞定。下面开始贴出方法。名师资料总结-精品资料欢迎下载-名师精心整理-第 12 页，共 32 页 -/跨域（可跨所有域名）$.getJSON(http
20、:/ getJSON跨域的原理是把？随机变一个方法名，然后返回执行的，实现跨域响应的目的。下面一个是跨域执行的真实例子：/跨域（可跨所有域名）$.getJSON(http:/ 13 页，共 32 页 -$.getJSON(http:/ 跨域原理:浏览器会进行同源检查,这导致了跨域问题,然而这个跨域检查还有一个例外那就是HTML的 标记;我们经常使用 的src 属性,脚本静态资源放在独立域名下或者来自其它站点的时候这里是一个url;这个 url响应的结果可以有很多种,比如JSON,返回的 Json值成为 标签的src 属性值.这种属性值变化并不会引起页面的影响.按照惯例，浏览器在 URL的查询字
21、符串中提供一个参数，这个参数将作为结果的前缀一起返回到浏览器;看下面的例子：响应值：parseResponse(Name:Cheeso,Rank:7)响应值：parseResponse(Name:Cheeso,Rank:7)这种方式被称作JsonP;(如果链接已经失效请点击这里:JSONP);即：JSONwithpadding上面提到的前缀就是所谓的“padding”。那么jQuery 里面是怎么实现的呢？貌似并没有 标记的出现！？OKay，翻看源码来看：页面调用的是getJSON：getJSON:function(url,data,callback)returnjQuery.get(url,
22、data,callback,json);,名师资料总结-精品资料欢迎下载-名师精心整理-第 14 页，共 32 页 -继续跟进get:function(url,data,callback,type)/shiftargumentsifdataargumentwas omitedif(jQuery.isFunction(data)type=type|callback;callback=data;data=null;returnjQuery.ajax(type:GET,url:url,data:data,success:callback,dataType:type);跟进 jQuery.ajax，下
23、面是ajax 方法的代码片段：/BuildtemporaryJSONPfunctionif(s.dataType=json&(s.data&jsre.test(s.data)|jsre.test(s.url)jsonp=s.jsonpCallback|(jsonp+jsc+);/Replace the=?sequence both inthequerystringand thedataif(s.data)s.data=(s.data+).replace(jsre,=+jsonp+$1);s.url=s.url.replace(jsre,=+jsonp+$1);/Weneed tomake su
24、re/thata JSONPstyleresponseisexecutedproperlys.dataType=script;/Handle JSONP-styleloadingwindowjsonp=windowjsonp|function(tmp)data=tmp;名师资料总结-精品资料欢迎下载-名师精心整理-第 15 页，共 32 页 -success();complete();/Garbage collectwindowjsonp=undefined;trydeletewindowjsonp;catch(e)if(head)head.removeChild(script);if(s.d
25、ataType=script&s.cache=null)s.cache=false;if(s.cache=false&type=GET)varts=now();/tryreplacing_=ifitistherevarret=s.url.replace(rts,$1_=+ts+$2);/ifnothingwas replaced,add timestamptotheends.url=ret+(ret=s.url)?(rquery.test(s.url)?&:?)+_=+ts:);/Ifdataisavailable,append datato urlforgetrequestsif(s.dat
26、a&type=GET)s.url+=(rquery.test(s.url)?&:?)+s.data;/Watch fora new setofrequestsif(s.global&!jQuery.active+)jQuery.event.trigger(ajaxStart);名师资料总结-精品资料欢迎下载-名师精心整理-第 16 页，共 32 页 -/Matches an absoluteURL,and saves thedomainvarparts=rurl.exec(s.url),remote=parts&(parts1&parts1!=location.protocol|parts2!
27、=location.host);/Ifwererequestinga remotedocument/and tryingto loadJSONorScriptwitha GETif(s.dataType=script&type=GET&remote)varhead=document.getElementsByTagName(head)0|document.documentElement;varscript=document.createElement(script);script.src=s.url;if(s.scriptCharset)script.charset=s.scriptChars
28、et;/Handle Scriptloadingif(!jsonp)vardone=false;/Attachhandlersforallbrowsersscript.onload=script.onreadystatechange=function()if(!done&(!this.readyState|this.readyState=loaded|this.readyState=complete)done=true;success();complete();/Handlememory leakinIEscript.onload=script.onreadystatechange=null;
29、if(head&script.parentNode)head.removeChild(script);/Use insertBeforeinsteadofappendChildto circumventan IE6 bug.名师资料总结-精品资料欢迎下载-名师精心整理-第 17 页，共 32 页 -/Thisariseswhen a base node isused(#2709and#4378).head.insertBefore(script,head.firstChild);/Wehandleeverythingusingthescriptelementinjectionreturnund
30、efined;上面的代码第1 行到第 10 行：判断是 JSON类型调用，为本次调用创建临时的JsonP 方法，并且添加了一个随机数字，这个数字源于用日期值；关注第 14 行，这一行相当关键，注定了我们的结果最终是;然后是构造Script片段，第 95 行在 Head中添加该片段，修成正果；不仅仅是 jQuery,很多 js 框架都是用了同样的跨域方案，这就是getJSON跨域的原理。jQuery 使用 ajax 跨域请求获取数据跨域这个词应用非常频繁，主要是因为安全限制(同源策略，即 JavaScript或 Cookie 只能访问同域下的内容)。本文给大家介绍jQuery 使用 ajax 跨
31、域请求获取数据，需要的朋友可以参考下跨域是我在日常面试中经常会问到的问题，这词在前端界出现的频率不低，主要原因还是由于安全限制(同源策略，即 JavaScript或 Cookie 只能访问同域下的内容)，因为我们在日常的项目开发时会不可避免的需要进行跨域操作，所以跨域能力也算是前端工程师的基本功之一。varwebMethod=http:/localhost:54473/Service1.asmx/HelloWorld;jQuery.support.cors=true;/之前没有加这句老是提示no transport，我没去深想。$.ajax(名师资料总结-精品资料欢迎下载-名师精心整理-第 1
32、8 页，共 32 页 -type:POST,contentType:application/x-www-form-urlencoded,dataType:html,url:http:/www.*.com,/这里是网址success:function(data)alert(data);,timeout:30000,error:function(XMLHttpRequest,textStatus,errorThrown)alert(errorThrown););参数options类型：Object可选。AJAX 请求设置。所有选项都是可选的。async类型：Boolean默认值:true。默认设置
33、下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。beforeSend(XHR)类型：Function发送请求前可修改XMLHttpRequest对象的函数，如添加自定义HTTP 头。名师资料总结-精品资料欢迎下载-名师精心整理-第 19 页，共 32 页 -XMLHttpRequest对象是唯一的参数。这是一个Ajax事件。如果返回false可以取消本次ajax请求。cache类型：Boolean默认值:true，dataType为 script和 jsonp时默认为false。设置为false将不
34、缓存此页面。jQuery1.2新功能。complete(XHR,TS)类型：Function请求完成后回调函数(请求成功或失败之后均调用)。参数：XMLHttpRequest对象和一个描述请求类型的字符串。这是一个Ajax事件。contentType类型：String默认值:application/x-www-form-urlencoded。发送信息至服务器时内容编码类型。默认值适合大多数情况。如果你明确地传递了一个content-type给$.ajax()那么它必定会发送给服务器（即使没有数据要发送）。名师资料总结-精品资料欢迎下载-名师精心整理-第 20 页，共 32 页 -context
35、类型：Object这个对象用于设置Ajax相关回调函数的上下文。也就是说，让回调函数内this指向这个对象（如果不设定这个参数，那么this就指向调用本次AJAX 请求时传递的options参数）。比如指定一个DOM元素作为context参数，这样就设置了success回调函数的上下文为这个DOM元素。就像这样：$.ajax(url:test.html,context:document.body,success:function()$(this).addClass(done););data类型：String发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在URL 后。查看p
36、rocessData选项说明以禁止此自动转换。必须为Key/Value格式。如果为数组，jQuery将自动为不同值对应同一个名称。如foo:bar1,bar2转换为&foo=bar1&foo=bar2。dataFilter类型：Function给 Ajax返回的原始数据的进行预处理的函数。提供data和 type两个参数：data是 Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值名师资料总结-精品资料欢迎下载-名师精心整理-第 21 页，共 32 页 -将由jQuery进一步处理。dataType类型：String预期服务器返回的数据类型
37、。如果不指定，jQuery将自动根据HTTP包 MIME 信息来智能判断，比如XML MIME 类型就被识别为XML。在 1.4中，JSON就会生成一个JavaScript对象，而 script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:xml:返回XML 文档，可用jQuery处理。html:返回纯文本HTML信息；包含的script标签会在插入dom 时执行。script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意：在远程请求时(不在同一个域下)，所有POST请求都将转为GET 请求。（因为将使用DOM的 s
38、cript标签来加载）json:返回JSON数据。jsonp:JSONP格式。使用JSONP形式调用函数时，如myurl?callback=?jQuery将自动替换?为正确的函数名，以执行回调函数。text:返回纯文本字符串error类型：Function名师资料总结-精品资料欢迎下载-名师精心整理-第 22 页，共 32 页 -默认值:自动判断(xml或 html)。请求失败时调用此函数。有以下三个参数：XMLHttpRequest对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是timeout,error,notmodified和
39、parsererror。这是一个Ajax事件。global类型：Boolean是否触发全局AJAX 事件。默认值:true。设置为false将不会触发全局AJAX 事件，如ajaxStart或 ajaxStop可用于控制不同的Ajax事件。ifModified类型：Boolean仅在服务器数据改变时获取新数据。默认值:false。使用 HTTP包 Last-Modified头信息判断。在jQuery1.4中，它也会检查服务器指定的etag来确定数据没有被修改过。jsonp类型：String在一个jsonp请求中重写回调函数的名字。这个值用来替代在callback=?这种GET或 POST请求中
40、URL 参数里的callback部分，比如 jsonp:onJsonPLoad会导致将onJsonPLoad=?传给服务器。名师资料总结-精品资料欢迎下载-名师精心整理-第 23 页，共 32 页 -jsonpCallback类型：String为 jsonp请求指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候，指定这个回调函数名。password类型：String用于响应HTTP 访问认证请求的密码processData类型：Boole
41、an默认值:true。默认情况下，通过 data 选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型application/x-www-form-urlencoded。如果要发送DOM树信息或其它不希望转换的信息，请设置为false。scriptCharset类型：String只有当请求时dataType为 jsonp或 script，并且type是 GET 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。success名师资料总结-精品资料欢迎下载-名师精心整理-第 24 页，共 32 页 -类型：Func
42、tion请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。这是一个Ajax事件。traditional类型：Boolean如果你想要用传统的方式来序列化数据，那么就设置为true。请参考工具分类下面的jQuery.param方法。timeout类型：Number设置请求超时时间（毫秒）。此设置将覆盖全局设置。type类型：String默认值:GET)。请求方式(POST 或 GET)，默认为GET。注意：其它HTTP 请求方法，如PUT 和 DELETE也可以使用，但仅部分浏览器支持。url类型：String名师资料总结-精品资料欢迎下载-
43、名师精心整理-第 25 页，共 32 页 -默认值:当前页地址。发送请求的地址。username类型：String用于响应HTTP 访问认证请求的用户名。xhr类型：Function需要返回一个XMLHttpRequest 对象。默认在IE 下是ActiveXObject而其他情况下是XMLHttpRequest。用于重写或者提供一个增强的XMLHttpRequest对象。这个参数在jQuery1.3以前不可用。以下都是网上整理出来的JS 面试题，答案仅供参考。/2，截取字符串abcdefg 的 efg/alert(abcdefg.substring(4);/3，判断一个字符串中出现次数最多的
44、字符，统计这个次数/*varstr=asdfssaaasasasasaa;var json=;for(var i=0;i iMax)iMax=jsoni;iIndex=i;alert(出现次数最多的是:+iIndex+出现+iMax+次);*/4，IE 与 FF 脚本兼容性问题/*obj.addEventListener(sEv,fn,false);obj.attachEvent(on+sEv,fn);detachevetremoveEventListenerDOMContentLoadedonreadystatechangecompleteDOMMouseScrollFFonmousewhe
45、el非 FFevent.wheelDelta上滚 120 下-120event.detail上滚-3下 3obj.getCurrentStyleattrgetComputedStyle(obj,false)attrXMLHttpRequestActiveXObject(Mircorsoft.XMLHttp)FF 本地能设置读取cookie其他不行eventev事件源srcElement|targettoElement|relatedTargetobj.setCapture();只有 ie 认obj.releaseCapture();*/5，规避 javascript多人开发函数重名问题/*命名
46、空间封闭空间js 模块化 mvc（数据层、表现层、控制层）seajs变量转换成对象的属性对象化*/6，javascript 面向对象中继承实现/*functionPerson(name)this.name=name;Person.prototype.showName=function()名师资料总结-精品资料欢迎下载-名师精心整理-第 27 页，共 32 页 -alert(this.name);functionWorker(name,job)Person.apply(this,arguments)this.job=job;for(var i in Person.prototype)Worker
47、.prototype=Person.prototype;new Worker(sl,coders).showName();*/7，FF下面实现outerHTML/*varoDiv=document.createElement(div);var oDiv1=document.getElementById(div1);var oWarp=document.getElementById(warp);oWarp.insertBefore(oDiv,oDiv1);oDiv.appendChild(oDiv1);var sOut=oDiv.innerHTML;oWarp.insertBefore(oDiv
48、1,oDiv);oWarp.removeChild(oDiv);alert(sOut);*/8，编写一个方法求一个字符串的字节长度;/假设一个中文占两个字节/*varstr=22 两是;alert(getStrlen(str)functiongetStrlen(str)var json=len:0;var re=/u4e00-u9fa5/;for(var i=0;i str.length;i+)if(re.test(str.charAt(i)jsonlen+;return jsonlen+str.length;*/9，编写一个方法去掉一个数组的重复元素/*vararr=1,2,3,1,43,1
49、2,12,1;名师资料总结-精品资料欢迎下载-名师精心整理-第 28 页，共 32 页 -var json=;var arr2=;for(var i=0;i arr.length;i+)if(!jsonarri)jsonarri=true;elsejsonarri=false;if(jsonarri)arr2.push(arri);for(var i=0;i arr.length;i+)if(!aa(arri,arr2)arr2.push(arri);functionaa(obj,arr)for(var i=0;i 发生事件的对象构造函数this-new出来的 objectcall/apply
50、改变 this*/11、如何深度克隆/*vararr=1,2,43;var json=a:6,b:4,c:1,2,3;var str=sdfsdf;var json2=clone(json);alert(jsonc)functionclone(obj)var oNew=new obj.constructor(obj.valueOf();if(obj.constructor=Object)名师资料总结-精品资料欢迎下载-名师精心整理-第 29 页，共 32 页 -for(var i in obj)oNewi=obji;if(typeof(oNewi)=object)clone(oNewi);re