那些年,我還在學習Ajax 學習筆記_AJAX相關

來源:互聯網
上載者:User
通俗的說,Ajax就是一種網頁無刷技術,以提高使用者體驗,Ajax並不是什麼新的技術,只是在那些年才火了起來(Ajax火起來時,哥只知道聊QQ),所以它就備受觀注;當然,那些年就開始學習了。
一、完成Ajax請求
1、 在完成這個請求之前,先來瞭解一下Ajax是什麼,它的全名叫非同步javascript與、XML,從名稱可以看出,它與javascript和XML有不解之緣,Ajax使用XML地HTTP請求,通過瀏覽器建立的xmlHttpRequest對象,非同步向伺服器發送請求,伺服器處理請求後,將響應通過xmlHttp.responseText屬性返回給javascript函數處理資料,進一步使用javascript處理DOM,完成頁面的局部更新。
2、 程式碼範例,使用XMLHttpRequest完成請求
代碼:JS:
複製代碼 代碼如下:

<script type="text/javascript">
//XMLHttpRequest對象
var xmlHttp;
function buildXMLHttpRequest() {
//判斷瀏覽器
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE
} else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest(); //非IE
} else {
xmlHttp = NaN;
}
}
function sendRequest() {
buildXMLHttpRequest();
//Post請求
xmlHttp.open("post", "Handler.ashx", true);
xmlHttp.onreadystatechange = function() {
//判斷狀態
if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
alert(xmlHttp.responseText);
}
}
//定義傳輸的檔案HTTP頭資訊
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //採用的編碼方式
xmlHttp.send("value=1");
}
</script>

Handler.ashx:
複製代碼 代碼如下:

<%@ WebHandler Language="C#" Class="Handler" %>
using System;
using System.Web;
public class Handler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
context.Response.Write("Hello World xin_ny 中檔案 "+context.Request.Params["value"]);
}
public bool IsReusable {
get {
return false;
}
}
}

效果:

二、Jquery中的Ajax方法
記得在那些年,我還在學習Jquery中沒有說到它的Ajax方法,這裡就補上了,JQuery提供了很多Ajax函數,方便了開發人員的使用,不再需要開發人員建立XMLHttpRequest對象來完成請求,可直接使用JQuery庫中的Ajax函數完成請求,併兼容性也較好,下面就來看一下Jquery的Ajax吧。
1、Jquery得到資料方法:load()
例:
複製代碼 代碼如下:

function ajaxMethod() {
$("#spanDiv").load("DemoData.txt");
}

2、Jquery的get(url,[data],callback)方法
例:
複製代碼 代碼如下:

function ajaxGet() {
//對象資料來源
var obj = { first: "First", second: "Second" };
$.get(
"CallBackData.ashx", obj, function(data) {
$("#spanDiv").html(data);
});
}

3、Jquery的post(url,[data],callback,type)方法
例:
複製代碼 代碼如下:

function ajaxPost() {
//對象資料來源
var obj = { first: "First", second: "Second" };
$.get(
"CallBackData.ashx", obj, function(data) {
$("#spanDiv").text(decodeURI(data));
});
}

4、Jquery的ajax(option)方法
例:
複製代碼 代碼如下:

function ajaxAjax() {
//對象資料來源
var obj = { first: "First", second: "Second" };
$.ajax({
type: "Get",
url: "CallBackData.ashx",
data: obj,
success: function(data) {
$("#spanDiv").text(decodeURI(data));
}
});
}

5、Jquery的ajaxSetup(options)方法,設定全域的ajax的配置
例:
複製代碼 代碼如下:

function ajaxAjaxSetup() {
//對象資料來源
var obj = { first: "First", second: "Second" };
$.ajax({
type: "Post",
url: "CallBackData.ashx",
data: obj,
success: function(data) {
$("#spanDiv").text(decodeURI(data));
}
});
}

6、Jquery的ajaxSubmit(options)方法,提交表單
總結
那些年學習Ajax,提高了使用者體驗,同時也減輕了伺服器的負擔,此文經回憶那些年學習Ajax的日子。
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.