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 相关文章推荐
juqery 学习之四 筛选查找
Nov 30 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
Oct 10 Javascript
JavaScript递归操作实例浅析
Oct 31 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
vue3修改link标签默认icon无效问题详解
Oct 09 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
?繁体转换的class
2006/10/09 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
PHP之将POST数据转化为字符串的实现代码
2016/11/03 PHP
php中pcntl_fork创建子进程的方法实例
2019/03/14 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
AngularJS应用开发思维之依赖注入3
2016/08/19 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
Python生成不重复随机值的方法
2015/05/11 Python
Python实现登录接口的示例代码
2017/07/21 Python
SVM基本概念及Python实现代码
2017/12/27 Python
python散点图实例之随机漫步
2018/08/27 Python
在Python中增加和插入元素的示例
2018/11/01 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
信息管理应届生求职信
2014/03/07 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
民间借贷借条范本
2015/05/25 职场文书
首都博物馆观后感
2015/06/05 职场文书
地雷战观后感
2015/06/09 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
小数乘法教学反思
2016/02/22 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers