Ajax入门总结--jquery实现Ajax
生活随笔
收集整理的這篇文章主要介紹了
Ajax入门总结--jquery实现Ajax
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
ajax（Asynchronous?Javascript?And?XML）：只刷新局部頁面的技術
?ajax的工作流程：
可以看出來核心就是XMLHttpRequest對象，那么咋們來看一下XMLHttpRequest的一些情況：
javaScript對象XMLHttpRequest是整個Ajax技術的核心，它提供了異步發送請求的能力！
| 方法名 | 說明 |
| open(method,URL,async) | 建立與服務器的建立 method參數：請求方式(GET(默認)或POST) URL參數：請求地址 async參數：是否使用異步請求(true或false) |
| send(content) | 發送請求： content參數：請求采納數，只有post請求才能通過send發送參數 |
| setRequestHeader(header,value) | 設置請求頭信息 |
| 傳統web(from表單)和Ajax的差異 | ||
| 發送請求方式不同 | 傳統web | 提交表單方式發送請求 |
| Ajax技術 | 異步引擎對象發送請求 | |
| 服務器相應不同 | 傳統web | 響應內容是一個完整的頁面 |
| Ajax技術 | 響應內容只是需要的數據 | |
| 客戶端處理方式不同 | 傳統web | 需等待服務器相應完成并重新加載整個頁面后用戶才能進行操作 |
| Ajax技術 | 可以動態更新頁面中的部分內容用戶不需要等待請求的響應 | |
?
使用Jquery發送ajax請求,以下所有建立在jquery基礎之上
在線jquery引入地址：<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
語法：jQuery.ajax([settings])
| 常用屬性參數 | |
| 屬性名 | 說明 |
| String type | 請求方式(GET(默認)或POST) |
| String url | 發送請求的地址 |
| boolean async | 請求模式，默認為true，異步 |
| Object data或String data | 發送給服務器的數據 |
| String dataType | 返回的數據類型，包括XML、HTML、Script、JSON、JSONP、text(默認) |
| Number timeout | 設置請求超時時間 |
| boolean global | 表示是否觸發全局Ajax事件，默認為true |
| 常用函數參數 | |
| 函數名 | 說明 |
| function success（Object result, String str） | 請求成功后調用的函數 參數result:可選，為服務器返回的的數據。 參數str：可選，描述請求類型的字符串。 |
| function error（XMLHttpRequest xhr, String em, Exception e） | 請求失敗時被調用的參數 參數xhr：可選。 參數em：可選，錯誤信息。 參數e：可選，捕獲的異常對象。 |
| function beforeSend（XMLHttpRequest xhr） | 發送請求前調用的函數， 參數shr：可選 |
| function complete（XMLHttpRequest xhr, String str） | 請求完成后調用的函數，不論成功與否 參數xhr：可選 參數str：可選，描述請求類型的字符串 |
?例子：
html如下：
<div id="login"><label for="username">用戶名：</label><input id="username" /><label for="pwd">密碼：</label><input type="password" id="pwd" /><input type="button" value="登陸" onclick="doLogin()" /><span id="loginInfo"></span></div>js如下：
function doLogin(){var username=$("#username").val();var pwd=$("#pwd").val();//使用$.ajax()發送ajax請求$.ajax({//type:"post",type:"get",url:"login",async:true,data:{"username":username,"pwd":pwd,},dataType:"text",success:function(data){if(data=="ok"){$("#login").html("歡迎您："+username);}else{$("#loginInfo").html("用戶名或密碼不正確");$("#loginInfo").css({"font-size":"12px","color":"red"});}},error:function(){$("#loginInfo").html("AJAX請求失敗");},beforeSend:function(){$("#loginInfo").html("正在登陸中......");$("#loginInfo").css({"font-size":"12px","color":"red"});}}) }?語法：jQuery.post(URL,data,callback)
?語法：jQuery.post(URL,callback)
例子：
js如下：
//使用$.post()發送AJAX請求function doLogin2(){var username=$("#username").val();var pwd=$("#pwd").val();$.post("login",{"username":username,"pwd":pwd},function(data){if(data=="ok"){$("#login").html("歡迎您："+username);}else{$("#loginInfo").html("用戶名或密碼不正確");$("#loginInfo").css({"font-size":"12px","color":"red"});}});}語法：jQuery.getJSON(url,data可選,success(data,status,xhr)可選)
例子：
html如下：
<input type="button" value="加載本地json信息" onclick="doLoad()" /><h1>本地json信息</h1><div id="info"></div> </body>js如下：?
function doLoad(){alert("正在加載本地json文件");$.getJSON("course.json",function(data){//遍歷返回的json數組$.each(data,function(index,course){$("<p>").html(course.id+" "+course.name+" "+course.period).appendTo($("#info"));});})}json文件如下：?
[{"id":1001,"name":"小侯同學","period":"5個月"}, {"id":1002,"name":"小愛同學","period":"4個月"}, {"id":1003,"name":"天貓精靈","period":"6個月"}]?
語法：$(selector).load(url,data可選,function(response,status,xhr)可選)
load() 方法通過 AJAX 請求從服務器加載數據，并把返回的數據放置到指定的元素中。
例子：
html如下：
<body> <input type="button" value="加載本地json信息" onclick="doLoad()" /><h1>本地json信息</h1><div id="info"></div> </body>js如下：???
function doLoad(){alert("正在加載本地json文件");$("#info").load("course.html")}?
語法：$(selector).serialize()
?serialize() 方法可以 序列化表單元素，創建 URL 編碼文本字符串
例子：
html如下：
<form id="login"><label for="username">用戶名：</label><input name="username" /><label for="pwd">密碼：</label><input type="password" name="pwd" /><input type="button" value="登陸" onclick="doLogin()" /><span id="loginInfo"></span></form>js如下：
function doLogin(){var params=$("#login").serialize();alert(params);}效果如下：
?
總結
以上是生活随笔為你收集整理的Ajax入门总结--jquery实现Ajax的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 林深时见鹿出自哪里
- 下一篇： Ajax入门总结--Ajax跨域请求