当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery与Ajax常用代码实现对比

Javascript
javascript 汉字与拼音转换
JavaScript使用cookie
大平洋汽车网左侧菜单
使用JS操作页面表格，元素的一些技巧
分享我学习js的过程 作者aircy javascript学习教程
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
用js来生成随机彩票号码清单
发一个数据过滤的代码，很简单，有用的着的拿去
如何在标题栏显示框架内页面的标题
js滚动条多种样式,推荐
再次更新！MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
符合web标准的连续滚动图像的js代码
使用iframe作为日历的载体，不再被select和flash等控件挡住的日期输入框
通过脚本控制指定内容不能被选择
模拟弹出窗口效果，关闭层之前，不能选择后面的页内容
另类弹出窗口,跳过所有拦截工具
使用prototype.js进行异步操作
JS模拟多线程
动态增加/删除文件域
[分享]一个非常漂亮的进度滚动条

No. « 47 48 49 50 »

技术文章搜索

关键字

Javascript 中的 JQuery与Ajax常用代码实现对比

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 391 ::
收藏到网摘: n/a

JQuery与Ajax常用代码实现对比，大家可以看下，根据实际情况选用。 传统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
复制代码 代码如下:

<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>