AJAX是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)，是異步Javascript和XML的集合。其核心是XMLHttpRequest對象，可以在不向服務(wù)器端提交整個頁面的情況下，實現(xiàn)局部更新網(wǎng)頁，它是AJAX的Web應(yīng)用程序架構(gòu)的一項關(guān)鍵技術(shù)。
基本屬性：
基本方法：
XMLHttpRequest五步法：
第一：創(chuàng)建XMLHttpRequest對象
第二：注冊回調(diào)函數(shù)
第三：設(shè)置和服務(wù)器交互的參數(shù)
第四：設(shè)置向服務(wù)器端發(fā)送的數(shù)據(jù)，啟動和服務(wù)器端的交互
第五：判斷和服務(wù)器端的交互是否完成，還有判斷服務(wù)器端是否返回正確的數(shù)據(jù)
HTML代碼：
!DOCTYPE html>
html xmlns="http://www.w3.org/1999/xhtml">
head>
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
title>/title>
script type="text/javascript" >
var xmlhttp;
function submit() {
//1、創(chuàng)建XMLHttpRequest對象
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMineType) {//針對某些特定版本的mozillar瀏覽器的BUG進行修正
//將覆蓋發(fā)送給服務(wù)器的頭部，強制 text/xml 作為 mime-type
xmlhttp.overrideMineType("text/xml");
}
} else if (window.ActiveXObject) {//針對IE瀏覽器進行處理
var activexName = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0",
"MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP", "Miscrosoft XMLHTTP"];
for (var i = 0; i activexName.length; i++) {
try{
xmlhttp=new ActiveXObject(activexName[i]);
break;
} catch (e) { }
}
}
if (xmlhttp == undefined || xmlhttp == null) {
alert("當(dāng)前瀏覽器不支持插件XMLHttpRequest對象，請更換瀏覽器");
return;
}
//2、注冊回調(diào)函數(shù)
xmlhttp.onreadystatechange = callback;
//獲取當(dāng)前值
var username = document.getElementById("userName").value;
//設(shè)置字符串參數(shù)，并進行編碼（用于POST提交方式）
var args = "username=" + encodeURIComponent(username);
//GET 交互
//3、設(shè)置和服務(wù)器端交互的參數(shù)
//xmlhttp.open("GET", "XMLHttpRequest.aspx?username=" + username, true);
//POST交互
//3、設(shè)置和服務(wù)器端交互的參數(shù)
//使用Post方式不用擔(dān)心緩存
xmlhttp.open("POST", "XMLHttpRequest.aspx?username=" + username, true);
//設(shè)置Content-Type類型，告知服務(wù)器實體中有參數(shù)
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4、設(shè)置向服務(wù)器端發(fā)送的數(shù)據(jù)，啟動和服務(wù)器端的交互
//用于GET提交
//xmlhttp.send(null);
//用于POST提交
xmlhttp.send(args);
function callback() {
//5、判斷和服務(wù)器端的交互是否完成，還有判斷服務(wù)器端是否正確返回了數(shù)據(jù)
if (xmlhttp.readyState == 4) {//readyState=4表示交互完成
if (xmlhttp.status == 200) {//status=200表示正確返回了數(shù)據(jù)
//純文本數(shù)據(jù)的接收方法
var message = xmlhttp.responseText;
var div = document.getElementById("message");
div.innerHTML = message;
}
}
}
}
/script>
/head>
body>
input type="text" id="userName" />
input type="button" value="用戶名校驗" onclick="submit()" />
br />
div id="message">/div>
/body>
/html>
aspx中的代碼：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace XMLHttpRequest五步法
{
public partial class XMLHttpRequest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//Response.Clear();
//獲取當(dāng)前值，get提交使用Request.QueryString方法
//string username = Request.QueryString["username"];
//POST提交，使用Request.Form
string username = Request.Form["username"];
Response.Write("姓名：'"
+ username + "'br/>時間：'" + DateTime.Now.ToString() + "'");
Response.End();
}
}
}
總結(jié)：
XMLHttpRequest是AJAX的核心部分，需要好好理解。剛開始接觸的時候，有些不明白是怎么回事，而且視頻中講的也是原生的AJAX，表面上看來不太好理解，但是通過具體的demo實踐，就會發(fā)現(xiàn)其實這個挺容易理解的。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。
您可能感興趣的文章:- jQuery 利用$.ajax 時獲取原生XMLHttpRequest 對象的方法
- 解析ajax核心XMLHTTPRequest對象的創(chuàng)建與瀏覽器的兼容問題
- 如何用ajax來創(chuàng)建一個XMLHttpRequest對象
- jquery ajax學(xué)習(xí)筆記2 使用XMLHttpRequest對象的responseXML
- AJAX中同時發(fā)送多個請求XMLHttpRequest對象處理方法
- AJAX客戶端說明，XMLHttpRequest對象
- AJax 學(xué)習(xí)筆記一(XMLHTTPRequest對象)
- ajax 入門基礎(chǔ)之 XMLHttpRequest對象總結(jié)
- AJAX XMLHttpRequest對象創(chuàng)建使用詳解
