导读：上一篇博客简单介绍了一下对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的更多相关文章

  1. 原生JavaScript 封装ajax

    原生JavaScript 封装ajax   function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type ...

  2. JavaScript封装Ajax工具函数及jQuery中的ajax，xhr在IE的兼容

    封装ajax工具函数 首先要思考:1.为什么要封装它?提高开发效率2.把一些不确定的情况考虑在其中 a. 请求方式 b. 请求地址 c. 是否异步 d. 发送参数 e. 成功处理 f. 失败处理3.确 ...

  3. 原生javascript封装ajax和jsonp

    在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp: <!DOCTYPE html> <html lang="en"> <head ...

  4. JavaScript封装Ajax（类JQuery中$.ajax()方法）

    ajax.js (function(exports, document, undefined){ "use strict"; function Ajax(){ if(!(this ...

  5. ajax 原生js封装ajax [转]

    /* 封装ajax函数 * @param {string}opt.type http连接的方式,包括POST和GET两种方式 * @param {string}opt.url 发送请求的url * @ ...

  6. 原生JavaScript封装Ajax

    第一次开个人技术博客了,发的第一篇技术文章,欢迎指点…… 欢迎访问本人的独立博客:蓝克比尔 Ajax的实现主要分为四部分: 1.创建Ajax对象 // 创建ajax对象 var xhr = null; ...

  7. javascript - 封装ajax

    封装,使用有示例. // 封装示例: function ajax(url, method, params, done) { var xhr = null; method = method.toUppe ...

  8. 【Ajax 2】封装Ajax的核心对象：XMLHttpRequest对象

    导读:AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息.那么,XMLHttpRequest对象是怎么创建和封装的呢? 一.简介 1. ...

  9. 封装Ajax和跨域

    目录 引言 封装ajax 案例:使用自封装ajax 案例:动态加载瀑布流 跨域 引言 对于Ajax现在相信大家已经不会陌生了,无论是原生的XMLHttpRequest方式发送还是通过jQuery框架中 ...

随机推荐

  1. 166 Fraction to Recurring Decimal 分数到小数

    给定两个整数,分别表示分数的分子和分母,返回字符串格式的小数.如果小数部分为循环小数,则将重复部分括在括号内.例如,    给出 分子 = 1, 分母 = 2,返回 "0.5".  ...

  2. Hadoop体系结构管理

    一.查看Zookeeper信息 [hadoop@weekend01 ~]$zkServer.sh status JMX enabled by default Using config: /hadoop ...

  3. 【经验总结】北邮OJ

    90. 字符串转换 时间限制 1000 ms 内存限制 65536 KB 题目描述 我们将仅由若干个同一小写字母构成的字符串称之为简单串,例如"aaaa"是一个简单串,而" ...

  4. mysql5.7.25集群部署和方案设计（附PXC一键部署脚本）

    还记得我们之前部署mysql集群有多麻烦嘛?波哥来救你们啦!~ 我已将项目上传到了我的github仓库中,大家可以点击仓库地址出现的连接登录查看相应的代码!如果觉得不错别忘了转发.点赞哦! 部署步骤: ...

  5. ios 根据颜色生成图片，十六进制颜色。

    //颜色生成图片方法 - (UIImage *)imageWithColor:(UIColor *)color size:(CGSize)size { CGRect rect = CGRectMake ...

  6. Redis为什么这么快

    Redis为什么这么快 1.完全基于内存,绝大部分请求是纯粹的内存操作,非常快速.数据存在内存中,类似于HashMap,HashMap的优势就是查找和操作的时间复杂度都是O(1): 2.数据结构简单, ...

  7. Android单独继承View类来实现自定义控件

    一个单独继承view类来实现自定义控件,在该方法中,需要重写ondraw方法来绘制自己所需要的控件,下面也以一个简单的例子来说明如何实现自定义控件.该方法可以实现所需要的所有的自定义控件. 属性文件中 ...

  8. java5增加对https的支持

    jdk1.5不支持http协议,jdk1.8默认支持,比较好的解决方案是升级jdk,但是升级jdk风险极大.不能升级jdk的情况下,可以使用如下方式. 利用httpclient,进行封装,从而实现对h ...

  9. Quartz使用一 通过getJobDataMap传递数据

    Quartz定时器使用比较广泛,介绍一点简单的使用 上代码:定义一个Job,执行具体的任务 package org.tonny.quartz; import java.text.SimpleDateF ...

  10. [Windows Server 2012] 安装IIS8.5及FTP

    ★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com ★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频. ★ 本节我们将带领大家:安装IIS ...