繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery与Ajax常用代码实现对比
- Javascript
- JQuery Tips(3) 关于$()包装集内元素的改变
- JavaScript 创建随机数和随机图片
- javascript document.execCommand() 常用解析
- firefox下对ajax的onreadystatechange的支持情况分析
- Javascript attachEvent传递参数的办法
- jQuery Attributes(属性)的使用(一、属性篇)
- jquery自动完成插件(autocomplete)应用之PHP版
- 查询绑定数据岛的表格中的文本并修改显示方式的js代码
- 讨论javascript(一)工厂方式 js面象对象的定义方法
- IE不支持option的display样式，只能使用remove和add
- 多浏览器兼容的获取元素和鼠标的位置的js代码
- js checkbox全选并将获取值放到input里边
- javascript 日期联动选择器 [其中的一些代码值得学习]
- javascript实现的仿51job地址多项选择方式效果
- jQuery 渐变下拉菜单
- 利用图片的 onerror 事件载入默认图片
- js实现页面打印功能实例代码(附去页眉页脚功能代码)
- JQuery读取XML文件数据并显示的实现代码
- 比较详细的关于javascript 解析json的代码
- TextArea 控件的最大长度问题(js json)
Javascript 中的 JQuery与Ajax常用代码实现对比
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 499 ::
收藏到网摘: 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
