JQuery与Ajax常用代码实现对比

【 tulaoshi.com - Web开发 】

传统ajax Code
代码如下:
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
代码如下:
titleGET 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