update

itachime · Jun 18, 2014 · 01a37db · 01a37db
1 parent eccc203
commit 01a37db
Show file tree

Hide file tree

Showing 4 changed files with 112 additions and 72 deletions.
diff --git a/images/0618/01.png b/images/0618/01.png
diff --git a/images/0618/02.png b/images/0618/02.png
diff --git a/javascript/AJAX及跨域.md b/javascript/AJAX及跨域.md
@@ -1,8 +1,15 @@
 ## AJAX及跨域
 
 ### AJAX理论
-* **传统交互方式：**用户单击提交按钮提交表单，整个表单提交到服务器，服务器执行相应脚本（如果有），脚本执行完返回全新页面，返回时浏览器重新刷新绘制，用户需要等待,整个过程围绕表单进行。
-* **AJAX交互方式：**用户手动整合需要发送的表单数据发送到js代码（而不是直接发送到服务器），js处理数据并发送请求，服务器返回信息，触发在js中定义的处理事件，对返回数据进行处理。这些js代码主要使用 **XMLHttpRequest** 对象，整个过程是异步的，页面无需刷新，用户继续其它操作，js在幕后与服务器通信而不受用户干预
+* **传统请求方式：**用户单击提交按钮提交表单，整个表单提交到服务器，服务器执行相应脚本（如果有），脚本执行完返回全新页面，返回时浏览器重新刷新绘制，用户需要等待,整个过程围绕表单进行。
+* **请求类型：**`get` 和 `post`
+```html
+<form method="get" action="http://a.com/">
+<input type="text" value="hello" name="username" id="username" />
+</form>
+www.a.com?username=hello
+```
+* **AJAX请求：**用户手动整合需要发送的数据发送到js代码（而不是直接发送到服务器），js处理数据并发送请求，服务器返回信息，触发在js中定义的处理事件，对返回数据进行处理。这些js代码主要使用 **XMLHttpRequest** 对象，整个过程是异步的，页面无需刷新，用户继续其它操作，js在幕后与服务器通信而不受用户干预
 
 **大概流程**
 
@@ -21,22 +28,24 @@ if (window.ActiveXObject) {
 } else if (window.XMLHttpRequest) {
 	xhr = new XMLHttpRequest();
 }
-//2.创始请求
+
+//2.获取数据 创始请求
 var url = "ajax_check_pname.php?pname=" + pname.value + "&r=" + Math.random();
 xhr.open("get", url);
-//如果请求类型为POST,设置http请求头信息
-//xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
-//3.发送请求
-xhr.send(null);
-//捕获请求状态和请求结果
+
+//3.捕获请求状态和请求结果 定义回调函数
 xhr.onreadystatechange = function() {
-	if (4 == xhr.readyState && 200 == xhr.status) {
-		if (parseInt(xhr.responseText)) {
-			//code
-		}
-	}
+  if (4 == xhr.readyState && 200 == xhr.status) {
+    if (parseInt(xhr.responseText)) {
+      //code
+    }
+  }
 }
+
+//4.发送请求
+xhr.send(null);
 ```
+
 **HTTP就绪状态**
 AJAX的每一次请求都伴随着HTTP就绪状态的改变，每次改变都会调用onreadystatechange定义的回调函数，HTTP就绪状态有如下几种
 
@@ -46,20 +55,31 @@ AJAX的每一次请求都伴随着HTTP就绪状态的改变，每次改变都会
 * 3：请求已处理，响应中可以得到部分数据，但服务器没完成响应
 * 4：响应完成，可以使用响应数据
 
+> 注意：不同浏览器就绪状态不同，有些直接跳过0跟1，从2开始，有些有多次状态1，有些则从0到4
+
 **HTTP状态码**
-如果服务器响应了请求并完成了处理，但报告了一个错误，这样就算HTTP就绪状态为4也得不到预期的数据，因为除了判断HTTP就绪状态外还需要判断HTTP状态码，在网络世界HTTP代码可以处理请求中发生的任何问题，状态为200表示一切正常。
+如果服务器响应了请求并完成了处理，但报告了一个错误，这样就算HTTP就绪状态为4也得不到预期的数据，因为除了判断HTTP就绪状态外还需要判断HTTP状态码，HTTP状态码可以表示请求中发生的任何问题，但状态为200时表示一切正常。
+
+**传输数据**
 
-**使用json格式传输数据**
-json格式可表示除简单健值对之外的更复杂的数据结构，且数据是动态的，可输出或修改。最大的方便利用 JavaScript 对象和字符串值之间的快速转换，而且，不管使用 GET 还是 POST，由于 JSON 只是文本。不需要特殊格式的转码而且每个服务器端脚本都能处理文本数据，所以可以轻松利用 JSON 并将其应用到服务器
+* 以XML格式向服务器发送请求或以XML格式从服务器接收数据，数据量会比文本大，构建XML有一定复杂性
+* json格式可表示除简单健值对之外的更复杂的数据结构，且数据是动态的，可输出或修改。最大的方便是可以利用 JavaScript 对象和字符串值来快速转换，而且，不管使用 GET 还是 POST，由于 JSON 只是文本。不需要特殊格式的转码而且每个服务器端脚本都能处理文本数据，所以可以轻松利用 JSON 并将其应用到服务器
 
 ### JSON格式
 JSON（JavaScript Object Notation） 是一种轻量级的数据交换格式,完全独立于语言，由两种基础结构组成
 
 1. “键/值”对的集合：用大括号包围，键与值之间用冒号隔开，“键/值”对之间用逗号隔开。
 2. 值的有序列表：用中括号包围，用逗分分隔
 
+```js
+{"name1":value1}
+{"name1":value1,"name2":value2}
+{"name1":[value1,value2]}
+[value1,value2] //wrong
+```
+
 **javascript 中使用JSON**
-下载扩展API包：https://github.com/douglascrockford/JSON-js  
+下载扩展API包：https://github.com/douglascrockford/JSON-js   
 解压后得到文件：json2.js、json.js、json_parse_state.js、json_parse.js、cycle.js
 
 **json2.js：**定义了一个全局的对象JSON，带有两个方法 stringify 和 parse 来实现转换或解析 json 格式。  
@@ -71,6 +91,7 @@ var jsonobj = new Object();
 jsonobj.username = "uname";
 jsonobj.password = "pwd";
 var jsonstr = JSON.stringify(jsonobj);
+alert(jsonstr);
 ```
 结果：`{"username":"uname","password":"pwd"}`  
 如果不转换会直接输出`[object Object]`
@@ -83,7 +104,18 @@ var obj=eval("("+data+")");//转换为json对象
 ### jQuery中的AJAX方法
 jQuery对AJAX操作进行了封装，$.ajax() 属于最底层的方法 ，第二层是 load()，$.get()，$.post() 方法 ，第三层则是 $.getScript() 和 $.getJSON() 方法
 
-以`$.get()`为例
+**load()方法**  
+选择目标容器DOM调用该方法，可能载入远程HTML内容追加到目标容器中，可以添加发送数据和定义回调函数。通常用于从服务器获取静态内容
+```js
+$("#restext").load("test.html");//把text.html的内容添加到id=restext的div中
+```
+当不指定参数时默认为 GET 发送，如果指定参数则自动转换为 POST 发送
+```js
+$("#restext").load("test.html",{name:"apple",key:"1"});
+```
+
+
+**$.get()方法**  
 ```js
 $("#send").click(function(){
      $.get("getdata.php",{username:$("#uname").val()},function(data,textStatus){
@@ -93,24 +125,27 @@ $("#send").click(function(){
 ```
 > 注意：发送的数据以对象的形式（也可以是字符串，但要手动对字符进行编码）作为第二个参数传入，而不是手动追加在url后面，该方法会自动将数据附加到url
 
-**常见问题**
-1. 编码问题：使用 `encodeURIComponent` `escape` 等等
-2. 作用域问题：写在回调函数里
-3. JSON格式问题
+**$.getJSON()方法**  
+动态加载JSON文件，并在回调函数中对返回数据进行处理。使用该方法还可以加载其它服务器的JSON数据，实现跨域请求
+```js
+$("#send").click(function(){
+     $.getJSON('text.json',function(data){
+          $.each(data,function(index,item){
+               $(".txg").html(item['content']);
+          });
+     })
+})
+```
+
+**关于调试**
 
-	```js
-	var arr=[1,2,3,4,5];
-	for(var i=0;i<arr.length;i++){
-        $.get('url',function(data){
-            alert(arr[i]);
-        })
-	}
-	```
+![](../images/0618/01.png)  
+![](../images/0618/02.png)
 
 ### 跨域
 **什么是跨域**
 **同源策略：**一个域的脚本不能访问和操作另外一个域的绝大部分对象和方法  
-**沙箱安全模型：**只能对同一个域发送请求而无法重定向到其它服务器  
+**沙箱安全模型：**只能对同一个域发送异步请求而无法重定向到其它服务器  
 > 注意：这里的同域不单单指相同的域名，同一域名不同端口，不同协议，相同主域而子域不同这些情况也在跨域范畴里
 
 ### JSONP跨域
@@ -129,6 +164,10 @@ var custom_callback = function(data){
 </script>
 <script type="text/javascript" src="http://xxx.com?var=1&callback=custom_callback"></script>
 ```
+服务器端
+```
+custom_callback("hello")
+```
 **实现方式二**
 ```js
 var custom_callback = function(data){
@@ -167,33 +206,43 @@ $.ajax({
 ### window.name 跨域
 原理：window窗口（包括iframe）在加载新页面时，其 name 属性的值是保持不变的，该值可以保存2M大小的数据（IE 或 firefox 是32M）
 
-步骤一：跨域页面组织数据并保存到其 name 属性  
+步骤一：跨域页面（服务器端）组织数据并保存到 name 属性  
 ```js
 window.name = 'data';
 ```
+```html
+<html>
+  <body>
+    <script>
+      window.name = 'data';
+    </script>
+  </body>
+</html>
+```
 步骤二：在当前页面创建一个 iframe，将其 src 指向跨域页面  
-步骤三：改变 iframe 的 src ，使其和当前页面同域，可以预先准备一个空文件 blank.html 或直接指向 favicon.ico，拿到数据。整个过程通过监听 iframe 的 load 事件来完成
+步骤三：改变 iframe 的 src ，使其和当前页面同域，可以预先准备一个空文件 blank.html 或直接指向 favicon.ico  
+步骤四：通过监听 iframe 的 load 事件来获取数据
 ```js
 var state = 0,
 	iframe = document.createElement('iframe'),
-	loadfn = function() {
-		if (state === 1) {
-			var data = iframe.contentWindow.name;
-			alert(data);
-		} else if (state === 0) {
-			state = 1;
-			iframe.contentWindow.location = "http://a.com/proxy.html"; // 设置的代理文件
-		}
-	};
-iframe.src = 'http://b.com/data.html';
+  document.body.appendChild(iframe);
+  loadfn = function() {
+    if (state === 1) {
+      var data = iframe.contentWindow.name;
+      alert(data);
+    } else if (state === 0) {
+      state = 1;
+      iframe.contentWindow.location = "http://a.com/blank.html"; // 设置的代理文件
+    }
+  };
 if (iframe.attachEvent) {
-	iframe.attachEvent('onload', loadfn);
+  iframe.attachEvent('onload', loadfn);
 } else {
-	iframe.onload = loadfn;
+  iframe.onload = loadfn;
 }
-document.body.appendChild(iframe);
+iframe.src = 'http://b.com/data.html';
 ```
-步骤四：销毁 iframe
+步骤五：销毁 iframe
 ```js
 iframe.contentWindow.document.write('');
 iframe.contentWindow.close();
@@ -267,4 +316,6 @@ ifr.onload = function(){
     var doc = ifr.contentDocument || ifr.contentWindow.document;
     alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
 };
-```
+```
+
+> 注意：某一页面的 domain 默认等于 window.location.hostname。主域名是不带 www 的域名，如 www.a.com 是二级域名，domain 只能设置为自已的主域名，比如不可以在 b.a.com 中将 domain 设置为 c.a.com，也不可以设置为 c.com
diff --git a/javascript/富文本编辑器.md b/javascript/富文本编辑器.md
@@ -29,22 +29,25 @@ textarea文本区的文字本身就可以编辑，但不能显示其编辑后的
 var workaround = document.getElementById("workaround");
 workaround.contentEditable = "true";
 ```
-**针对iframe（动态创建iframe并隐藏textarea）**
+**针对iframe（动态创建iframe）**
 ```js
-var textarea = document.getElementById("textarea");
-textarea.style.display = "none";
 var iframe = document.createElement("iframe");
-iframe.style.width = "390px";
-iframe.style.height = "100px";
-iframe.frameBorder=0;
-textarea.parentNode.insertBefore(iframe,textarea);
 var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
 iframeDocument.designMode = "on";
 ```
 
 ### 对选中文字设置富文本样式
 使用`execCommand()`方法搭配富文本命令便可实现对选中文字设置样式，这里的“选中文本”指的是**Range对象**
 
+### 关于Range 对象
+
+* 标准 Range 对象
+* TextRange 对象
+* selection 对象
+* IE下的 selection 对象
+
+参考：http://www.cnblogs.com/rainman/archive/2010/08/08/1795173.html
+
 **获取Range对象的兼容写法**
 ```js
 var userSelection, rangeObject;
@@ -63,15 +66,6 @@ if (userSelection.getRangeAt) {
 }
 ```
 
-### 关于Range 对象
-
-* 标准 Range 对象
-* TextRange 对象
-* selection 对象
-* IE下的 selection 对象
-
-参考：http://www.cnblogs.com/rainman/archive/2010/08/08/1795173.html
-
 ### 为什么选择iframe
 IE的Range对象（TextRange对象）支持execCommand()方法，但W3C的Range对象是没有execCommand()方法的。为了达到最大的兼容性，这里使用iframe作为可编辑区域，并对其document对象使用富文本命令，这时会自动获取选中文字并添加相应样式
 
@@ -94,8 +88,8 @@ if(isBold){
 
 ## UBB编辑器
 
-### UBB代码
-UBB代码是HTML的一个变种，是一种特殊的标签。一般是指论坛中的替代HTML代码的安全代码。代码很简单，功能很少，比如
+### UBB标签
+UBB标签是HTML的一个变种，是一种特殊的标签。一般是指论坛中的替代HTML代码的安全代码。代码很简单，功能很少，比如
 
 	[b]文字[/b]
 	[font=14]文字[/font]
@@ -107,9 +101,4 @@ UBB代码的语法检查实现非常容易，所以不少网站引入了这种
 
 ### UBB编辑器实现
 * 转码
-* 过滤
-
-### 案例分析
-* 添加单独模块
-* 文字删除线样式
-* 文字背景色
+* 过滤