Ajax基础（五）--封装库
jQuery ajax请求的基本语法：
一、封装为对象：
ajax.txt代码：
{"id":"102","username":"liyi","age":3}
实例代码：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body> id:<input type="text" id="id" name="id" />
<br/> user_id:
<input type="text" id="userid" name="userid" />
<br/> user_name:
<input type="text" id="username" name="name" />
<br/> user_age:
<input type="text" id="age" name="age" />
<br/> msg:
<input type="text" id="msg" name="msg" />
<br/>
<input type="button" value="test userid" onclick="findUser();" />
<script type="text/javascript">
var AjaxUtil = { // 基础选项
options: {
method: "get", // 默认提交的方法,get post
url: "", // 请求的路径 required
params: {}, // 请求的参数
type: 'text', // 返回的内容的类型,text,xml,json
callback: function() {} // 回调函数 required
}, // 创建XMLHttpRequest对象
createRequest: function() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); // IE6以上版本
} catch(e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE6以下版本
} catch(e) {
try {
xmlhttp = new XMLHttpRequest();
if(xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} catch(e) {
alert("您的浏览器不支持Ajax");
}
}
}
return xmlhttp;
},
// 设置基础选项
setOptions: function(newOptions) {
for(var pro in newOptions) {
this.options[pro] = newOptions[pro];
}
},
// 格式化请求参数
formateParameters: function() {
var paramsArray = [];
var params = this.options.params;
for(var pro in params) {
var paramValue = params[pro];
/*if(this.options.method.toUpperCase() === "GET")
{
paramValue = encodeURIComponent(params[pro]);
}*/
paramsArray.push(pro + "=" + paramValue);
}
return paramsArray.join("&");
// method=get&url=&callback=&type=text
}, // 状态改变的处理
readystatechange: function(xmlhttp) {
// 获取返回值
var returnValue;
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
switch(this.options.type) {
case "xml":
returnValue = xmlhttp.responseXML;
break;
case "json":
var jsonText = xmlhttp.responseText;
if(jsonText) {
returnValue = eval("(" + jsonText + ")");
}
break;
default:
returnValue = xmlhttp.responseText;
break;
}
if(returnValue) {
this.options.callback.call(this, returnValue);
} else {
this.options.callback.call(this);
}
}
}, // 发送Ajax请求
//{'method':'get'}
request: function(options) {
var ajaxObj = this; // 设置参数
ajaxObj.setOptions.call(ajaxObj, options); // 创建XMLHttpRequest对象
var xmlhttp = ajaxObj.createRequest.call(ajaxObj); // 设置回调函数
xmlhttp.onreadystatechange = function() {
ajaxObj.readystatechange.call(ajaxObj, xmlhttp);
}; // 格式化参数
var formateParams = ajaxObj.formateParameters.call(ajaxObj); // 请求的方式
var method = ajaxObj.options.method;
var url = ajaxObj.options.url; if("GET" === method.toUpperCase()) {
url += "?" + formateParams;
} // 建立连接
xmlhttp.open(method, url, true); if("GET" === method.toUpperCase()) {
xmlhttp.send(null);
} else if("POST" === method.toUpperCase()) {
// 如果是POST提交，设置请求头信息
xmlhttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
xmlhttp.send(formateParams);
}
}
}; function $(id) {
return document.getElementById(id);
} function process(json) {
if(json) {
$("id").value = json.id;
$("username").value = json.username;
$("age").value = json.age;
} else {
$("msg").value = "用户不存在";
$("id").value = "";
$("username").value = "";
$("age").value = "";
}
} function findUser() {
var userid = $("userid").value;
if(userid) {
AjaxUtil.request({
url: "ajax.txt",
params: {
id: userid
},
type: 'json',
callback: process
});
}
}
</script>
</body> </html>
效果：
debugger;是可以调试的：
基本语法：
$.ajax({
cache: true,
type: "POST",
url:ajaxCallUrl,
//dataType: "json",
data:$('#yourformid').serialize(),// 你的formid,这是提交表单的
async: false,
error: function(request) {
alert("Connection error");
},
success: function(data) {
$("#commonLayout_appcreshi").parent().html(data);
}
});
二、封装为函数
Ajax基础（五）--封装库的更多相关文章
- Ajax基础之封装3
今天接着我们上篇博文的栗子,现在我来扩大一下需求,之前是点击按钮取出新闻,现在要实现每隔一段事件进行新闻的更新.这个时候,肯定是加一个定时器,然后每隔一段事件,再进行一次Ajax请求,既然要经常用到A ...
- 第一百五十九节，封装库--JavaScript，表单序列化结合ajax提交数据
封装库--JavaScript,表单序列化结合ajax提交数据 封装库,表单序列化方法 /** xu_lie_biao_dan()方法,表单序列化方法,将自动获取指定表单里面的各项字段name值和va ...
- 第一百五十八节，封装库--JavaScript，ajax说明
封装库--JavaScript,ajax说明 封装库ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 /** ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 * ...
- 第一百六十节，封装库--JavaScript，ajax注册表单到数据库
封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...
- Django基础五之Ajax
Django基础五之Ajax 目录 Django基础五之Ajax 1. Ajax介绍 2. Ajax前后端传值 2.1 方法一HttpResponse直接返回 2.2 方法二使用Json格式返回 2. ...
- 第一百三十五节，JavaScript，封装库--拖拽
JavaScript,封装库--拖拽 封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽, ...
- 第一百五十七节，封装库--JavaScript，预加载图片
封装库--JavaScript,预加载图片 首先了解一个Image对象,为图片对象 Image对象 var temp_img = new Image(); //创建一个临时区域的图片对象alert ...
- 第一百五十六节，封装库--JavaScript，延迟加载
封装库--JavaScript,延迟加载 延迟加载的好处,就是在浏览器视窗外的图片,不加载,拖动鼠标到浏览器视窗内后加载,用户不看的图片就不用加载,可以减少服务器大量流量 将图片的src地址用一张统一 ...
- 第一百五十五节，封装库--JavaScript，轮播器
封装库--JavaScript,轮播器 html <div id="banner"> <img src="img/banner1.jpg" a ...
- 第一百五十四节，封装库--JavaScript，表单验证--提交验证
封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...
随机推荐
- C#中Windows通用的回车转Tab方法
标签: windowsc#textboxbuttondropdownobject 2007-03-28 09:37 2773人阅读 评论(0) 收藏 举报 分类: C#(5) 版权声明:本文为博主 ...
- Linux基础命令(一)
一.开启Linux操作系统,要求以root用户登录GNOME图形界面,语言支持选择为汉语没有图形界面 二.使用快捷键切换到虚拟终端2,使用普通用户身份登录,查看系统提示符 Ctrl + Alt + F ...
- Linux内核学习资料
1.为什么计算机的学生要学习Linux开源技术 http://tinylab.org/why-computer-students-learn-linux-open-source-technologie ...
- 我的Android进阶之旅------>Java文件大小转换工具类 (B,KB,MB,GB,TB,PB之间的大小转换)
Java文件大小转换工具类 (B,KB,MB,GB,TB,PB之间的大小转换) 有时候要做出如下所示的展示文件大小的效果时候,需要对文件大小进行转换,然后再进行相关的代码逻辑编写. 下面是一个Java ...
- Objective-C学习笔记（五）——数据类型与限定词
如同其它不论什么的编程语言一样,想要更深入的学习.必需要了解该门语言的数据类型与限定词. OC的数据类型例如以下: (1)int:整型: int a; int b=2; int ...
- Redis持久化方式RDB和AOF
Redis 持久化 RDB(快照) 优点 rdb是可进行压缩的二进制文件,表示Redis在某一个时间点的数据快照.非常使用与备份,灾难恢复等场景.比如使用定时任务执行bgsave并备份rdb到serv ...
- Django-form进阶+详细版
Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 一.创建Form类 #!/usr/bin/en ...
- Delphi 正则表达式语法(7): 匹配转义字符
Delphi 正则表达式语法(7): 匹配转义字符 // ? 号的意义是匹配 0-1 次, 如果需要匹配 ? 怎么办 var reg: TPerlRegEx; begin reg := TPe ...
- Java 基础总结(一)
本文参见:http://www.cnblogs.com/dolphin0520/category/361055.html 1. String,StringBuffer,StringBuilder 1) ...
- 一年java程序员的感悟
前沿 在小公司干了差不多一年,刚进来与一个中级程序员做交接,过了大概一个月,那个中级程序员走了,从此,走上了"泥泞"的道路(独立开发),熟悉了公司的项目和业务用了一个月左右,公司当 ...