處理ajax返回的js程式碼

1.====普通方式 呼叫 ajax處理 返回 的 responseText=======================》

 

//下面主要是對 返回 responseText 進行分析 ：

 

                //方法1, 如果responseText是沒有script標籤的，並且是純JS 程式碼,可以eval 方法執行
                //eval(XMLHTTPRequest.responseText);

                // 方法2 ,建立script物件 ,修改text屬性的值
                 var script_obj=document.createElement("script");
                 script_obj.text = XMLHTTPRequest.responseText;

                //追加物件到body中

                 document.body.appendChild(script_obj);

 

               //  或者下面的 追加到head中

               document.getElementsByTagName("head")[0].appendChild(script_obj);

 

              由於對JS 在dom中執行 載入的順序 不是很清楚 所以 需要學習

 

2.===============================================================》

---------------------------------->

//①下面貼出 簡單的jquery的ajax處理JS 設定 dataType 型別為script ，自動執行JS指令碼

 

 

$(document).ready(function() {
       
     $("#company").focus();
	 $("#company").mouseup(function() {
		$.ajax({
               type: "POST",
               url: "checkCompanyExist.action",
               data: "companyName="+$("#company").val(),
               async: false,
                //關鍵地方
                dataType: "script"
         }); 
	});
});

 

//頁面：

<input name="companyName" id="company" type="text" />
						<span id="msg1" style="color:red "></span>

 

 

//上面的大致意思就是 獲取 company文字輸入框的 mouseup事件

//通過ajax呼叫 後臺 action ,我的後臺是 struts2 action

// 呼叫成功 action返回一個jsp頁面 如下，

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
var divInnerHTML = '${msg}';

$("#msg1").html(divInnerHTML);

 

jquery的ajax呼叫 說明 jquery 對ajax的封裝還是 比較簡單的！因為我是新手

 

-------------------------------------->

// ②使用這個 $.get（）呼叫ajax    ，處理結果 . 直接執行JS

 

 $(document).ready(function() {
       
     $("#company").focus();
	 $("#company").mouseup(function() {
		$.get("checkCompanyExist.action?companyName="+$("#company").val(), function(data){
            eval(data);
      });
	});
});

 

-------------------------------------->

// ③ 對返回的結果進行處理,直接執行JS

//用  $.ajax還有個好處就是 在向 後臺 引數的時候不會有亂碼問題

 

 $(document).ready(function() {
     $("#company").focus();
	 $("#company").mouseup(function() {
		$.ajax({
               type: "POST",
               url: "checkCompanyExist.action",
               data: "companyName="+$("#company").val(),
               async: false,
               success: function(msg){
                  eval(msg);
                }
         }); 
	});
});

 

 

//做點有用的東西

//下面是修改(copy) 好友的 天氣預報 

$(document).ready(function() {
	$("#search").click(function() {
		$.ajax({
               type: "GET",
               url:  "http://www.google.cn/search",
               data: "hl=zh-CN9&btnG=Google+%E6%90%9C%E7%B4%A2&meta=&aq=f&oq=&q=tq",
                async: false,
                success: function(msg){
                var data = msg;
				var begin = data.indexOf("新增到 iGoogle");
				var end = data.indexOf("北京市專業氣象臺");
				var weather = data.substring(begin+29 ,end-35 );
				var s=weather.split("/images");
				for(var i=0;i<s.length;i++){
					s[i]=s[i]+"http://www.google.cn/images";
				}
				var xs=s.join("");
				$("#wea").html(xs);
				
                }
         }); 

	});
});

 //HTML頁面

 

<input  type="button" value="天氣查詢" id="search"></input>
  <div id="wea"></div>

 程式碼 打包