【Ajax 3】JavaScript封装Ajax
导读:上一篇博客简单介绍了一下对Ajax中的核心对象XMLHttpRequest的封装。那么为了方便对Ajax的应用,我们还需要进一步的对Ajax的基本功能进行下一步的封装,不得不说的是早就有人专门写JS或者说已经有JQ直接引入使用,所以,本篇博客则是站在一个学习实践的角度,用JavaScript原生代码实现Ajax的简单封装。
一、基本介绍
主要是实现了从客户端到服务端发送请求,继而接收服务端响应的结果的过程。在这个实现过程中,一共有3个物件:其一是运用了一个HTML页充当了客户端;其二是运用了一个web页充当了服务端;最后是一个JS文件,在这个JS文件中,实现了对Ajax的封装。
在理解ajax的局部刷新的时候,可以将这一小部分看成是一个网页的一个组成部分去看。
二、实现过程
2.1,JavaScript1(Ajax的封装)
备注:本JS代码是从网上查询,然后拼凑的,并不是原创!
<span style="font-family:KaiTi_GB2312;font-size:18px;">var createAjax = function () {
var xhr = null;
try {//IE系列浏览器
xhr = new ActiveXObject("microsoft.xmlhttp");
} catch (e1) {
try {//非IE浏览器
xhr = new XMLHttpRequest();
} catch (e2) {
window.alert("您的浏览器不支持ajax,请更换!");
}
}
return xhr;
};
var ajax = function (conf) {
var type = conf.type;//type参数,可选
var url = conf.url;//url参数,必填
var data = conf.data;//data参数可选,只有在post请求时需要
var dataType = conf.dataType;//datatype参数可选
var success = conf.success;//回调函数可选
//解决缓存的转换
if (url.indexOf("?") >= 0) {
url = url + "&t=" + (new Date()).valueOf();
} else {
url = url + "?t=" + (new Date()).valueOf();
}
//解决跨域问题
if (url.indexOf("http://") >= 0) {
url.replace(">", "&");
url = url + "Proxy?url=";
}
if (type == null) {//type参数可选,默认为get
type = "get";
}
if (dataType == null) {//dataType参数可选,默认为text
dataType = "text";
}
var xhr = createAjax();
xhr.open(type, url, true);
if (type == "GET" || type == "get") {
xhr.send(null);
} else if (type == "POST" || type == "post") {
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
if (dataType == "text" || dataType == "TEXT") {
if (success != null) {//普通文本
success(xhr.responseText);
}
} else if (dataType == "xml" || dataType == "XML") {
if (success != null) {//接收xml文档
success(xhr.responseXML);
}
} else if (dataType == "json" || dataType == "JSON") {
if (success != null) {//将json字符串转换为js对象
success(eval("(" + xhr.responseText + ")"));
}
}
}
};
};</span>
说明:在这里有三个注意的地方:
1,个人之前在运用try catch的时候,是以为以为catch只能运用一次捕捉异常,最近在J2SE里面的异常机制里面,才学习到可以多次使用。所以,在这里,首先是尝试着对IE浏览器进行XMLHttpRequest对象的创建,然后尝试在非IE浏览器上创建,最后当这两种都不行的时候,捕捉异常进行处理。注:为什么要分IE类和非IE类,这和每种类型浏览器的内核有关。
2,在设置回调函数的时候,对不同返回的数据类型进行了处理,那么也就是说我们还需要对数据类型的处理方式进行封装,这一块在本篇博客中未实现。
3,这个ajax的封装和之前对于XMLHttpRequest对象的封装有什么不同?其实整体都是5步,在上一篇博客中,将POST和GET方式分别写了,包括这次封装的时候也是尝试着去分别运用5步使用法封装,后来才写成了现在这样。
2.2,HTMLPage1(客户端)
<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;"><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="JavaScript1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>测试Ajax的JS封装</title> <script type="text/javascript">
function btn_click() {
var username = document.getElementById("txt_username").value;
var age = document.getElementById("txt_age").value;
ajax({
type: "get",
url: "WebForm1.aspx?username=" + username
+ "&age=" + age,
success: function (data) {
if (data == "yes") {
alert("134");
} else {
alert("asdg");
}
}
});
}
</script>
</head>
<body>
<label for="txt_username">姓名:</label>
<input type="text" id="txt_username" />
<br /><br/>
<label for="txt_age">年龄:</label>
<input type="text" id="txt_age" />
<br /><br/>
<input type="button" value="测试请求" style="margin-left:20px;" id="btn" onclick="btn_click();" /> </body>
</html>
</span></span>
2.3,WebForm1页(模拟服务器端)
备注:页面显示无代码
<span style="font-family:KaiTi_GB2312;font-size:18px;"><span style="font-family:KaiTi_GB2312;font-size:18px;">using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls; namespace WebApplication1
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.Clear();
string myUserName = Request.QueryString["username"]; string myAge = Request.QueryString["age"];
if (myUserName == "12" && myAge == "23")
{
Response.Write("yes");
}
else {
Response.Write("no");
}
Response.End();
}
}
}</span></span>
说明:在这一步获取HTMLPage1所传送过来的数据,并对此做出响应。
2.4,测试结果
说明:本次测试要想实现的效果是,当姓名和年纪的输入框中填入的数据分别为12和23时,在服务端的响应是“yes”,而其他的数据响应是“no”。再根据服务器端的响应数据发送到页面做出显示,yes=“134”,no=“asdg”.
三、总结
我们说既然已经有了JQ封装好的方法,为什么还要了解JS的具体封装,那么JQ是用什么实现的?这版代码一直在参考,为了写出这版代码,看了很多别的代码,写毁了好多行代码。但是现在看代码的能力又不一样了。
接下来要了解的是,JQ是怎么封装的,它和JS封装的有什么不同,从而进一步区分JS和JQ的联系,再是运用到整个BS开发中的作用和区别。
【Ajax 3】JavaScript封装Ajax的更多相关文章
- 原生JavaScript 封装ajax
原生JavaScript 封装ajax function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type ...
- JavaScript封装Ajax工具函数及jQuery中的ajax,xhr在IE的兼容
封装ajax工具函数 首先要思考:1.为什么要封装它?提高开发效率2.把一些不确定的情况考虑在其中 a. 请求方式 b. 请求地址 c. 是否异步 d. 发送参数 e. 成功处理 f. 失败处理3.确 ...
- 原生javascript封装ajax和jsonp
在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp: <!DOCTYPE html> <html lang="en"> <head ...
- JavaScript封装Ajax(类JQuery中$.ajax()方法)
ajax.js (function(exports, document, undefined){ "use strict"; function Ajax(){ if(!(this ...
- ajax 原生js封装ajax [转]
/* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @ ...
- 原生JavaScript封装Ajax
第一次开个人技术博客了,发的第一篇技术文章,欢迎指点…… 欢迎访问本人的独立博客:蓝克比尔 Ajax的实现主要分为四部分: 1.创建Ajax对象 // 创建ajax对象 var xhr = null; ...
- javascript - 封装ajax
封装,使用有示例. // 封装示例: function ajax(url, method, params, done) { var xhr = null; method = method.toUppe ...
- 【Ajax 2】封装Ajax的核心对象:XMLHttpRequest对象
导读:AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息.那么,XMLHttpRequest对象是怎么创建和封装的呢? 一.简介 1. ...
- 封装Ajax和跨域
目录 引言 封装ajax 案例:使用自封装ajax 案例:动态加载瀑布流 跨域 引言 对于Ajax现在相信大家已经不会陌生了,无论是原生的XMLHttpRequest方式发送还是通过jQuery框架中 ...
随机推荐
- SpringMVC的Controller的返回值与接收的参数
内容参考自博客: http://blog.csdn.net/u011001084/article/details/52846791 http://blog.csdn.net/xuxiaoyinliu/ ...
- oozie.log报提示:org.apache.oozie.service.ServiceException: E0104错误 An Admin needs to install the sharelib with oozie-setup.sh and issue the 'oozie admin' CLI command to update sharelib
不多说,直接上干货! 问题详情 关于怎么启动oozie,我这里不多赘述. Oozie的详细启动步骤(CDH版本的3节点集群) 然后,我在查看 [hadoop@bigdatamaster logs]$ ...
- poj3252Round Numbers
链接 也算是组合 以前按组合做过一次 忘记怎么做的了 这次按dp写的 dp[i][j][g][k] 表示第i位为k(0|1)而且有j个1,g个0的情况数 貌似写的麻烦了...这一类的题,进行逐位计算就 ...
- LINUX 文件夹打包
tar -zcvf /data/www.tar.gz data/www tar -zcvf 打包后生成的文件名全路径 要打包的目录 压缩: 压缩当前的文件夹 zip -r ./xahot.zip ./ ...
- java设计模式之单例设计模式
单例设计模式 保证一个类在使用过程中,只有一个实例.优势就是他的作用,这个类永远只有一个实例. 优势:这个类永远只有一个实例,占用内存少,有利于Java垃圾回收. 单例设计模式关键点 私有的构造方法. ...
- AJPFX:不用递归巧妙求出1000的阶乘所有零和尾部零的个数
package com.jonkey.test; import java.math.BigInteger; public class Test6 { /*** @param args* 需求:求出1 ...
- logging模块进阶
python利用logging模块来记录日志主要涉及四个类 logger提供了应用程序可以直接使用的接口 handler将logger创建的日志提供的输出发送到指定目的地. filter起到过滤作用, ...
- [BZOJ1040][ZJOI2008]骑士 基环树DP
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1040 题目给出了$n$个点和$n$条无向边,即一棵基环树或者基环树森林. 如果题目给的关系 ...
- fetch和axios区别,proxy代理配置
1.今天使用fetch调用接口时使用console.log(res.data)始终是undefined,使用anxios请求则可以成功请求到数据,非常奇怪,于是查了一圈,才搞明白是我自以为了,哎,浪费 ...
- fsck和badlocks
fsck可以检查好几种不同的文件系统,fsck只是一个中和程序而已,个别的文件系统检查程序都在/sbin中,可以使用ls -l /sbin/fsck* -A 按照/etc/fstab的内容,将所有的设 ...