|
|
復制代碼 代碼如下:
<script language="Javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else if(window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
function startRequest(){
createXMLHttpRequest();
xmlHttp.open("GET","14-1.ASPx",true);
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
document.getElementById("target").innerHTML = xmlHttp.responseText;
}
xmlHttp.send(null);
}
</script>
JQuery方法
Code
復制代碼 代碼如下:
<script language="Javascript" src="jquery.min.js"></script>
<script language="Javascript">
function startRequest(){
$("#target").load("14-1.ASPx");
}
</script>
get and post
Code
復制代碼 代碼如下:
<title>GET VS. POST</title>
<script language="Javascript" src="jquery.min.js"></script>
<script language="Javascript">
function createQueryString(){
var firstName = encodeURI($("#firstName").val());
var birthday = encodeURI($("#birthday").val());
//組合成對象的形式
var queryString = {firstName:firstName,birthday:birthday};
return queryString;
}
function doRequestUsingGET(){
$.get("14-5.ASPx",createQueryString(),
//發送GET請求
function(data){
$("#serverResponse").html(decodeURI(data));
}
);
}
function doRequestUsingPOST(){
$.post("14-5.ASPx",createQueryString(),
//發送POST請求
function(data){
$("#serverResponse").html(decodeURI(data));
}
);
}
</script>
</head>
<body>
<h2>輸入姓名和生日</h2>
<form>
<input type="text" id="firstName" /><br>
<input type="text" id="birthday" />
</form>
<form>
<input type="button" value="GET" onclick="doRequestUsingGET();" /><br>
<input type="button" value="POST" onclick="doRequestUsingPOST();" />
</form>
<div id="serverResponse"></div>
</body>
</html>
控制ajax
Code
復制代碼 代碼如下:
<title>$.ajax()方法</title>
<script language="Javascript" src="jquery.min.js"></script>
<script language="Javascript">
function createQueryString(){
//必須兩次編碼才能解決中文問題
var firstName = encodeURI(encodeURI($("#firstName").val()));
var birthday = encodeURI(encodeURI($("#birthday").val()));
//組合成對象的形式
var queryString = "firstName="+firstName+"&birthday="+birthday;
return queryString;
}
function doRequestUsingGET(){
$.ajax({
type: "GET",
url: "14-5.ASPx",
data: createQueryString(),
success: function(data){
$("#serverResponse").html(decodeURI(data));
}
});
}
function doRequestUsingPOST(){
$.ajax({
type: "POST",
url: "14-5.ASPx",
data: createQueryString(),
success: function(data){
$("#serverResponse").html(decodeURI(data));
}
});
}
</script>
</head>
<body>
<h2>輸入姓名和生日</h2>
<form>
<input type="text" id="firstName" /><br>
<input type="text" id="birthday" />
</form>
<form>
<input type="button" value="GET" onclick="doRequestUsingGET();" /><br>
<input type="button" value="POST" onclick="doRequestUsingPOST();" />
</form>
<div id="serverResponse"></div>
</body>
</html>
全局設置ajax
Code
復制代碼 代碼如下:
<title>$.ajaxSetup()方法</title>
<script language="Javascript" src="jquery.min.js"></script>
<script language="Javascript">
$.ajaxSetup({
//全局設定
url: "14-5.ASPx",
success: function(data){
$("#serverResponse").html(decodeURI(data));
}
});
function createQueryString(){
//必須兩次編碼才能解決中文問題
var firstName = encodeURI(encodeURI($("#firstName").val()));
var birthday = encodeURI(encodeURI($("#birthday").val()));
//組合成對象的形式
var queryString = "firstName="+firstName+"&birthday="+birthday;
return queryString;
}
function doRequestUsingGET(){
$.ajax({
data: createQueryString(),
type: "GET"
});
}
function doRequestUsingPOST(){
$.ajax({
data: createQueryString(),
type: "POST"
});
}
</script>
JavaScript技術：JQuery與Ajax常用代碼實現對比，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
