當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Json和Ajax

發布時間：2024/4/11 编程问答 15 豆豆

生活随笔收集整理的這篇文章主要介紹了 Json和Ajax 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Json和Ajax

文章目錄

Json和Ajax
- 一、jquery元素節點操作
- - 1.文本內容的操作
  - 2.HTML內容的操作
  - 3.對元素值的操作
  - 4.對于DOM節點的操作
  - 5.修改CSS樣式
  - 6.修改CSS的屬性
  - 7.滾輪事件與函數節流
- 二、Json
- - 1.json
  - 2.json中的五種寫法：
- 三、ajax
- - 1.簡介
  - 2.常用參數簡介
- 四、Jsonp
- - 1.jsonp
  - 2.JSONP的優點是：
  - 3.JSONP的缺點則是：
  - 4.JQUERY對JSONP的支持

一、jquery元素節點操作

1.文本內容的操作

方法：①text() ②text(val)

例子：

$div = $(‘div’) //獲取div元素 Console.log($div.text()) //獲取文本內容 $div.text(“aaaaa”) //設置了文本的內容

2.HTML內容的操作

①html():用于獲取第一個匹配元素的HTML內容
②html(val)：用于設置全部匹配元素的HTML內容

注意：內容中包含HTML代碼可以被瀏覽器解析

3.對元素值的操作

主要對于input、check、radio元素

①val() //獲取值
②val(“”) //設置值

4.對于DOM節點的操作

①創建元素節點：

Var $jsp = $(“<p></p>”) //創建了一個p節點插入到div里面$(“div”).append($jsp)

②插入節點：

方法：1）往元素的內部插入append():為所有匹配的元素的內部追加內容 appendTo()：將所有匹配的元素添加到另一個元素集合中 prepend()：往元素的集合的前面添加內容 prependTo() 2）往元素的外部插入after():在每個匹配的元素之后插入 insertAfter()： before()：在每個匹配的元素前邊插入 insertBefore()

③刪除節點：

remove():用于從DOM中刪除匹配的元素（常用）detach()：也是用于刪除匹配的元素，與remove不同的是，detach不會將jQuery中的對象刪除。empty()：把標簽的內容清空掉，不是絕對意義上的刪除

④復制節點

clone():示例：$(“#box1 p:eq(1)”).bind(“click”,function(){$(this).clone().insertAfter($(this))})帶參數:clone(True):加了這樣之后會將事件處理程序一并復制

⑤替換節點

replaceAll(Seletor):用于使所有的元素替換掉Seletor匹配的元素示例：$(“<div>good</div>”).replaceAll(“div”)replaceWith(content):用匹配的元素替換掉指定的HTML元素示例：$(“#box1”).replaceWith(“<div>sunck</div>”)

⑥遍歷節點

each():示例：$(“p”).each(function(index){ //index表示第幾個$(this).attr(“title”,”我是第”+(index+1)+”個p標簽”)})

⑦包裹節點：

wrap():把匹配到的標簽用另一個標簽包裹起來unwarp():去除包裹warpAll():整體包裹warpInner():包裹內部

5.修改CSS樣式

addClass(class)removeClass(class)toggleClass(class):若有這個class類就刪除，若無就添加

6.修改CSS的屬性

方法：css(attr,value) 示例：$(“#btn”).bind(“click”,function(){$(“#box2”).css(“background-color”,”red”) //修改背景顏色的屬性console.log($(“#box2”).css(“background-color”)) //獲取值})

7.滾輪事件與函數節流

jquery.mousewheel插件使用

jquery中沒有鼠標滾輪事件，原生js中的鼠標滾輪事件不兼容，可以使用jquery的滾輪事件插件jquery.mousewheel.js。

函數節流

javascript中有些事件的觸發頻率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面說的鼠標滾輪事件，在短事件內多處觸發執行綁定的函數，可以巧妙地使用定時器來減少觸發的次數，實現函數節流。

二、Json

與json對象不同的是，json數據格式的屬性名稱和字符串值需要用雙引號引起來，用單引號或者不用引號會導致讀取數據錯誤。

1.json

JSON（JavaScript Object Notation）一種簡單的數據格式，比xml更輕巧。JSON是JavaScript原生格式，這意味著在JavaScript中處理JSON數據不需要任何特殊的API或工具包。
JSON的規則很簡單：對象是一個無序的“‘名稱:值'對”集合。一個對象以“{”（左括號）開始，“}”（右括號）結束。每個“名稱”后跟一個“:”（冒號）；“‘名稱/值'對”之間使用“,”（逗號）分隔。

規則如下:

1）映射用冒號（“：”）表示。名稱:值
2）并列的數據之間用逗號（“，”）分隔。名稱1:值1,名稱2:值2
3）映射的集合（對象）用大括號（“{}”）表示。{名稱1:值1,名稱2:值2}
4）并列數據的集合（數組）用方括號(“[]”)表示。

[ {名稱1:值,名稱2:值2},{名稱1:值,名稱2:值2}]

5 )元素值可具有的類型：string, number, object, array, true, false, null

2.json中的五種寫法：

1）傳統方式存儲數據，調用數據

代碼如下:

2）第一種樣式：

代碼如下:

3）第二種樣式：

代碼如下:

4）第三種樣式:

代碼如下:

5)第四種樣式：

代碼如下:

6）第五種樣式:

代碼如下:

三、ajax

1.簡介

ajax技術的目的是讓javascript發送http請求，與后臺通信，獲取數據和信息。ajax技術的原理是實例化xmlhttp對象，使用此對象與后臺通信。ajax通信的過程不會影響后續javascript的執行，從而實現異步
同步和異步
現實生活中，同步指的是同時做幾件事情，異步指的是做完一件事后再做另外一件事，
程序中的同步和異步是把現實生活中的概念對調，也就是程序中的異步指的是現實生活中的同步，程序中的同步指的是現實生活中的異步。
局部刷新和無刷新
ajax可以實現局部刷新，也叫做無刷新，無刷新指的是整個頁面不刷新，只是局部刷新，ajax可以自己發送http請求，不用通過瀏覽器的地址欄，所以頁面整體不會刷新，
ajax獲取到后臺數據，更新頁面顯示數據的部分，就做到了頁面局部刷新。
同源策略
ajax請求的頁面或資源只能是同一個域下面的資源，不能是其他域的資源，這是在設計ajax時基于安全的考慮。特征報錯提示

XMLHttpRequest cannot load https://www.baidu.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

常用參數

1、url 請求地址 2、type 請求方式，默認是'GET'，常用的還有'POST' 3、dataType 設置返回的數據格式，常用的是'json'格式，也可以設置為'html' 4、data 設置發送給服務器的數據 5、success 設置請求成功后的回調函數 6、error 設置請求失敗后的回調函數 7、async 設置是否異步，默認值是'true'，表示異步

以前的寫法：

$.ajax({url: 'js/data.json',type: 'GET',dataType: 'json',data:{'aa':1}success:function(data){alert(data.name);},error:function(){alert('服務器超時，請重試！');} });

新的寫法(推薦)：

$.ajax({url: 'js/data.json',type: 'GET',dataType: 'json',data:{'aa':1} }) .done(function(data) {alert(data.name); }) .fail(function() {alert('服務器超時，請重試！'); });// data.json里面的數據： {"name":"tom","age":18}

2.常用參數簡介

1.url

說明：發送請求的地址（默認為當前頁面），要求是String類型的參數，比如是.net下，"~wexin(控制器)/getweinxinmenu(動作)"，

2.type

說明：請求方法(post或者get)，默認是get，要求是String類型的參數。其他的htpp請求如（put、delete）等也支持，但是要瀏覽器支持

3.timeout

說明：設置請求超時時間（毫秒），要求是number類型的參數。此設置將覆蓋$.ajaxSetup()方法的全局設置。

4.async

說明：默認值為true，所有請求是異步，要求是Bool類型的參數，如果需要發送同步請求，將此項設置為false。注意：同步時瀏覽器會被鎖住。

5.cache

說明：默認為true(當datatype為script時，默認為false)從瀏覽器緩存中加載請求信息，要求是Bool類型的參數。

6.data
說明：發送到服務器的數據，要求是Object或string類型的參數。如果已經不是字符串，將自動轉換為字符串格式。
get請求中將附加在url后。防止這種自動轉換，可以查看processData選項。
對象必須為key/value格式，例如{foo1:“bar1”,foo2:“bar2”}轉換&foo1=bar1&foo2=bar2。如果是數組，JQuery將自動為不同值對應同一個名稱。
例如{foo:[“bar1”,“bar2”]}轉換為&foo=bar1&foo=bar2。
7.dataType:
說明：預期服務器返回的數據類型，要求為String類型的參數。如果不指定，
JQuery將自動根據http包mime信息返回responseXML或responseText，并作為回調函數參數傳遞。可用的類型如下：

xml：返回XML文檔，可用JQuery處理。 html：返回純文本HTML信息；包含的script標簽會在插入DOM時執行。 script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），所有post請求都將轉為get請求。 json：返回JSON數據。 jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換后一個“?”為正確的函數名，以執行回調函數。 text：返回純文本字符串。

8.beforeSend：
說明：發送請求前可以修改XMLHttpRequest對象的函數（也可以修改頁面一下信息），例如添加自定義HTTP頭
要求為Function類型的參數。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest對象是惟一的參數。

function(XMLHttpRequest){this; //調用本次ajax請求時傳遞的options參數}

9.complete：
說明：請求完成后調用的回調函數（請求成功或失敗時均調用）。
要求為Function類型的參數，參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。

function(XMLHttpRequest, textStatus){this; //調用本次ajax請求時傳遞的options參數}

10.success：

說明:請求成功后調用的回調函數,要求為Function類型的參數，有兩個參數。

(1)由服務器返回，并根據dataType參數進行處理后的數據。
(2)描述狀態的字符串。

function(data, textStatus){//data可能是xmlDoc、jsonObj、html、text等等this; //調用本次ajax請求時傳遞的options參數}

11.error:

**說明：請求失敗時被調用的函數。要求為Function類型的參數，**該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數如下：

function(XMLHttpRequest, textStatus, errorThrown){//通常情況下textStatus和errorThrown只有其中一個包含信息this; //調用本次ajax請求時傳遞的options參數}

12.contentType：

說明：內容編碼類型。要求為String類型的參數，當發送信息至服務器時，內容編碼類型默認為"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。

13.dataFilter：

說明：給Ajax返回的原始數據進行預處理的函數。要求為Function類型的參數，提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。

function(data, type){//返回處理后的數據return data;}

15.global：

要求為Boolean類型的參數，默認為true。表示是否觸發全局ajax事件。設置為false將不會觸發全局ajax事件，ajaxStart或ajaxStop可用于控制各種ajax事件。

16.ifModified：

要求為Boolean類型的參數，默認為false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false，即忽略頭信息。

17.jsonp：

**要求為String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數里的"callback"部分，**例如

{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務器。

18.username：

要求為String類型的參數，用于響應HTTP訪問認證請求的用戶名。

19.password：

要求為String類型的參數，用于響應HTTP訪問認證請求的密碼。

20.processData

要求為Boolean類型的參數，默認為true。默認情況下，發送的數據將被轉換為對象（從技術角度來講并非字符串）以配合默認內容類型"application/x-www-form-urlencoded"。如果要發送DOM樹信息或者其他不希望轉換的信息，請設置為false。

21.scriptCharset：

要求為String類型的參數，只有當請求時dataType為"jsonp"或者"script"，并且type是GET時才會用于強制修改字符集(charset)。通常在本地和遠程的內容編碼不同時使用。

22.$.each()函數:

$.each()函數不同于JQuery對象的each()方法，它是一個全局函數，不操作JQuery對象，而是以一個數組或者對象作為第1個參數，以一個回調函數作為第2個參數。回調函數擁有兩個參數：第1個為對象的成員或數組的索引，第2個為對應變量或內容。

23.案例代碼：

$(function(){$('#send').click(function(){$.ajax({type: "GET",url: "test.json",data: {username:$("#username").val(), content:$("#content").val()},dataType: "json",success: function(data){$('#resText').empty(); //清空resText里面的所有內容var html = ''; $.each(data, function(commentIndex, comment){html += '<div class="comment"><h6>' + comment['username']+ ':</h6><p class="para"' + comment['content']+ '</p></div>';});$('#resText').html(html);}});}); });

$.ajax驗證登錄：

一般處理程序

<%@ WebHandler Language="C#" Class="Handler" %>using System; using System.Web; using System.Data.SqlClient; using System.Web.SessionState;//繼承接口IReadOnlySessionState需要引入的命名空間public class Handler : IHttpHandler, IRequiresSessionState {SqlHelper helper = new SqlHelper();public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/plain";string username = context.Request.Params["username"].ToString().Trim();string pwd = context.Request.Params["pwd"].ToString().Trim();if (username != "" && pwd != ""){string sql = @"SELECT * FROM [USER] WHERE USERNAME='"+username+"' AND PASSWORD='"+pwd+"' ";if (!helper.Exists(sql)){context.Response.Write("0");}else{SqlDataReader reader = helper.ExecuteReader(sql);while (reader.Read()){context.Response.Write("1");context.Session["username"] = username.ToString().Trim();context.Session["pwd"] = pwd.ToString().Trim();}}}}public bool IsReusable{get{return false;}} }

四、Jsonp

1.jsonp

在同源策略下，在某個服務器下的頁面是無法獲取到該服務器以外的數據的，即一般的 ajax是不能進行跨域請求的。但 img、iframe 、script等標簽是個例外，這些標簽可以通過 src屬性請求到其他服務器上的數據。
利用 script標簽的開放策略，我們可以實現跨域請求數據，當然這需要服務器端的配合。
ajax只能請求同一個域下的數據或資源，有時候需要跨域請求數據，就需要用到jsonp技術，jsonp可以跨域請求數據，它的原理主要是利用了<script>標簽可以跨域鏈接資源的特性。jsonp和ajax原理完全不一樣，不過jquery將它們封裝成同一個函數。
Jquery中ajax 的核心是通過 XmlHttpRequest獲取非本頁內容，而jsonp的核心則是動態添加 <script>標簽來調用服務器提供的 js腳本。
當我們正常地請求一個JSON數據的時候，服務端返回的是一串 JSON類型的數據，而我們使用 JSONP模式來請求數據的時候服務端返回的是一段可執行的 JavaScript代碼。
因為jsonp 跨域的原理就是用的動態加載 script的src ，所以我們只能把參數通過 url的方式傳遞, 所以jsonp的 type類型只能是get ！
示例：

$.ajax({url: 'http://192.168.1.114/yii/demos/test.php', //不同的域type: 'GET', // jsonp模式只有GET 是合法的data: {'action': 'aaron'},dataType: 'jsonp', // 數據類型jsonp: 'backfunc', // 指定回調函數名，與服務器端接收的一致，并回傳回來 })

其實jquery 內部會轉化成

http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron 然后動態加載 <script type="text/javascript"src="http://192.168.1.114/yii/demos/test.php?backfunc= jQuery2030038573939353227615_1402643146875&action=aaron"></script>

然后后端就會執行backfunc(傳遞參數 )，把數據通過實參的形式發送出去。
使用JSONP 模式來請求數據的整個流程：客戶端發送一個請求，規定一個可執行的函數名（這里就是 jQuery做了封裝的處理，自動幫你生成回調函數并把數據取出來供success屬性方法來調用,而不是傳遞的一個回調句柄）
服務器端接受了這個 backfunc函數名，然后把數據通過實參的形式發送出去
（在jquery 源碼中， jsonp的實現方式是動態添加<script>標簽來調用服務器提供的 js腳本。jquery 會在window對象中加載一個全局的函數，當 <script>代碼插入時函數執行，執行完畢后就 <script>會被移除。同時jquery還對非跨域的請求進行了優化，如果這個請求是在同一個域名下那么他就會像正常的 Ajax請求一樣工作。）

2.JSONP的優點是：

它不像XMLHttpRequest對象實現的Ajax請求那樣受到同源策略的限制；它的兼容性更好，在更加古老的瀏覽器中都可以運行，不需要XMLHttpRequest或ActiveX的支持；并且在請求完畢后可以通過調用callback的方式回傳結果。

3.JSONP的缺點則是：

它只支持GET請求而不支持POST等其它類型的HTTP請求；
它只支持跨域HTTP請求這種情況，不能解決不同域的兩個頁面之間如何進行JavaScript調用的問題。
沒有關于 JSONP調用的錯誤處理。
如果動態腳本插入有效，就執行調用；如果無效，就靜默失敗。
失敗是沒有任何提示的。例如，不能從服務器捕捉到404 錯誤，也不能取消或重新開始請求。不過，等待一段時間還沒有響應的話，就不用理它了。

4.JQUERY對JSONP的支持

從JQery 1.2以后，就開始支持JSONP的調用。JQuery對前臺做了很好的處理如自動生成全局回調函數等,但后臺還需要開發人員自己實現

$.getJSON("http://跨域的dns/xxx.do?callback=?",function(json){ // 業務邏輯執行代碼 });

請求URL

$.ajax({url:"http://xxx.com/rest.do",dataType:"jsonp", //必須指定jsonp : "c", //若不指定則默認為callbackjsonpCallback:"test",//若不指定則Jquery自己生成隨機的名稱success:function(data){//業務邏輯執行代碼} });

當dataType為JSONP時,JQUERY會為用戶生成一個全局函數名稱為jsonpCallback參數的值,這個函數內部調用了success方法JQUERY的實現原理及步驟
以GET方式請求目標地址,并在URL中拼接以jsonp參數值為key,以jsonpCallback值為value的參數
請求返回回調函數數據
觸發調用全局的回調函數,在全局函數回調中調用success方法并將數據傳遞給success方法

總結

以上是生活随笔為你收集整理的Json和Ajax的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Ajax
json

上一篇： JQuery属性、事件相关操作
下一篇：本地存储和移动端js框架及bootstr