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= ...
随机推荐
- IO流入门-第十章-DataInputStream_DataOutputStream
DataInputStream和DataOutputStream基本用法和方法示例 /* java.io.DataOutputStream 数据字节输出流,带着类型写入 可以将内存中的“int i = ...
- 洛谷 P4451 [国家集训队]整数的lqp拆分
洛谷 这个题目是黑题,本来想打表的,但是表调不出来(我逊毙了)! 然后随便打了一个递推,凑出了样例, 竟然. 竟然.. 竟然... A了!!!!!!! 直接:\(f[i]=f[i-1]*2+f[i-2 ...
- 汉澳sinox2014没有黑屏，一个能够依靠的安全避风港
首先汉澳sinox2014没有验证server,根本就没办法区分正版和盗版 其次汉澳sinox2014安装也没有系列号cdkey等东西,直接安装无干扰 最后汉澳sinox2014不会有黑屏这样的东西. ...
- N多条短信，用什么算法从中找出相似内容的来？
创建树,每个字符为一个节点,对于同一位置字符相同的共用一个节点.最后找出具有公共节点的短信.例如:MessageA "hello,world"MessageB "hell ...
- mysql 建立表之间关系 练习 2
创建数据库db6 create database db6 charset=utf8; user db6; # 创建班级表 mysql) not null unique); Query OK, rows ...
- 000 初步使用Kotlin开发Android应用
Kotlin是Jetbrians公司开发的一款编程语言,基于jvm兼容Java. 要求 IDE:IDEA或者Android Studio(简称studio)对Kotlin语言有所了解,官方文档:htt ...
- Redis一（Redis-py与String操作）
Redis 介绍 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(so ...
- 简明python教程五----数据结构
python中有三种内建的数据结构:列表.元组和字典 list是处理一组有序项目的数据结构,即你可以在一个列表中存储一个序列的项目.在python中,每个项目之间用逗号分隔. 列表中的项目应该包括在方 ...
- MTK平台环境搭建---Ubuntu Linux 下执行sudo apt-get install提示“现在没有可用的软件包……
问题描述: sudo apt-get install openssh-server 正在读取软件包列表... 完成正在分析软件包的依赖关系树 Reading state information... ...
- mysql安装前的系统准备工作
一.系统环境总结: