JQuery与Ajax常用代码实现对比


Posted in Javascript onOctober 03, 2009

传统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>
Javascript 相关文章推荐
Array.slice()与Array.splice()的返回值类型
Oct 09 Javascript
jQuery 学习第五课 Ajax 使用说明
May 17 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
使用js判断控件是否获得焦点
Jan 03 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
js文件中直接alert()中文出来的是乱码的解决方法
Nov 01 Javascript
js实现表单提交后不重新刷新当前页面
Nov 30 Javascript
Vue自定义指令实现checkbox全选功能的方法
Feb 28 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
Jquery 设置标题的自动翻转
Oct 03 #Javascript
点击下载链接 弹出页面实现代码
Oct 01 #Javascript
点击文章内容处弹出页面代码
Oct 01 #Javascript
js类的静态属性和实例属性的理解
Oct 01 #Javascript
XmlUtils JS操作XML工具类
Oct 01 #Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
Sep 29 #Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 #Javascript
You might like
使用HMAC-SHA1签名方法详解
2013/06/26 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
php基本函数汇总
2015/07/09 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
JavaScript伸缩的菜单简单示例
2013/12/03 Javascript
jQuery源码解读之hasClass()方法分析
2015/02/20 Javascript
JavaScript中的substr()方法使用详解
2015/06/06 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
AngularJS表格详解及示例代码
2016/08/17 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
JavaScript 巧学巧用
2017/05/23 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
sqlalchemy对象转dict的示例
2014/04/22 Python
Python访问MySQL封装的常用类实例
2014/11/11 Python
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
PyCharm下载和安装详细步骤
2019/12/17 Python
Python数据可视化图实现过程详解
2020/06/12 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
美国智能家居专家:tink
2019/06/04 全球购物
护理专业毕业生自我鉴定
2013/10/08 职场文书
财务会计自荐信范文
2014/02/21 职场文书
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL