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 相关文章推荐
js函数的引用, 关于内存的开销
Sep 17 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
jQuery 无刷新分页实例代码
Nov 12 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
js删除数组中的元素delete和splice的区别详解
Feb 03 Javascript
JS实现的字符串数组去重功能小结
Jun 17 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 Javascript
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
PHP多线程类及用法实例
2014/12/03 PHP
PHP开启目录引索+fancyindex漂亮目录浏览带搜索功能
2019/09/23 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
jQuery中$.grep() 过滤函数 数组过滤
2016/11/22 Javascript
Vue指令的钩子函数使用方法
2017/03/20 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
微信小程序 input表单与redio及下拉列表的使用实例
2017/09/20 Javascript
vue实现文章内容过长点击阅读全文功能的实例
2017/12/28 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
2019/11/13 Javascript
JavaScript实现联动菜单特效
2020/01/07 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
三步实现Django Paginator分页的方法
2019/06/11 Python
Python读取csv文件实例解析
2019/12/30 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
家长评语和期望
2014/02/10 职场文书
经理助理岗位职责
2014/03/05 职场文书
教师读书活动总结
2014/05/07 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
写给妈妈的感谢信
2015/01/22 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers
一文带你理解vue创建一个后台管理系统流程(Vue+Element)
2021/05/18 Vue.js