繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery与Ajax常用代码实现对比
- Javascript
- 屏蔽Flash右键信息的js代码
- JavaScript QueryString解析类代码
- JavaScript写的一个自定义弹出式对话框代码
- js限制输入框可输入字节数代码
- JS与框架页的操作代码
- jQuery+CSS 实现的超Sexy下拉菜单
- 使用IE6看老赵的博客 jQuery初探
- jQuery UI.Layout Plug-in做框架
- jQuery框架实例代码分析
- JS通用代码:Tab选项卡通用js代码
- JavaScript脚本的void(0)究竟是何含义
- 9个优秀的JavaScript实现的评级投票插件教程
- jQuery最出色的是 API 设计
- jquery团队发布jquery 1.4
- jQuery 1.4：15个新特性和优化增强
- jQuery插件分享:Flash/MP3/Video多媒体插件
- jQuery 1.4官方文档详细讲述新特性功能
- 网页每次加载调用不同CSS样式表
- JQuery知识:20个jQuery教程+11个jQuery插件
- 制作Web电子表格的jQuery插件：jQuery.sheet
Javascript 中的 JQuery与Ajax常用代码实现对比
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 82 ::
收藏到网摘: 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>
评论 (0) All
