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= ...
随机推荐
- MyBatis generator 生成生成dao model mappper
MyBatis GeneratorXML配置文件参考 在最常见的用例中,MyBatis Generator(MBG)由XML配置文件驱动. 配置文件告诉MBG: 如何连接到数据库 什么对象要生成,以及 ...
- Python面向对象中的“私有化”
Python面向对象中的“私有化” Python并不直接支持私有方式,而要靠程序员自己把握在外部进行特性修改的时机. 为了让方法或者特性变为私有(从外部无法访问),只要在它的名字前面加上双下划线即可. ...
- Linux内核协议栈相关资料链接
1.Linux内核网络分析(个人博客集合,分析较清晰) http://blog.csdn.net/qy532846454/article/category/1385933/2
- 004-Set 和 Map 数据结构
原文地址:http://es6.ruanyifeng.com/#docs/set-map 1.Set ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set ...
- Linux学习笔记—文件与文件系统的压缩与打包（转载）
压缩文件的用途与技术 例如,计算机都是以byte单位来计量的,1byte占8bit.如果存储数字1,那么1byte就会空出7bit.采用一定的计算方式,压缩这些空间可以大大降低文件存储. Linux系 ...
- Redis五（其他操作命令）
其他常用操作 delete(*names) # 根据删除redis中的任意数据类型 exists(name) # 检测redis的name是否存在 keys(pattern='*') # 根据模型获取 ...
- POJ1276:Cash Machine(多重背包）
题目:http://poj.org/problem?id=1276 多重背包模板题,没什么好说的,但是必须利用二进制的思想来求,否则会超时,二进制的思想在之前的博客了有介绍,在这里就不多说了. #in ...
- bootstrap基本使用
bootstrap是封装了css和js代码实现酷炫的效果,所以使用的时候,比如说是列表效果,直接调用它本身定义的函数就ok了 静态文件 把href='..static/..'里面改为url_for静态 ...
- js 改变文章字体大小
//设置页面文字大小 function SetFontSize(areaid, size) { document.getElementById(areaid).style.fontSize = siz ...
- ThinkPHP框架基础知识三
一.JS文件与Css文件存放位置 其实JS与Css文件放在任意位置都可以找到,只要路径正确就行. 在TP框架中我们访问的所有文件都要走入口文件index.php,相当于访问的是index.php页面. ...