【Ajax 3】JavaScript封装Ajax

最新推荐文章于 2022-07-19 16:14:23 发布

既过不念，未来不继

最新推荐文章于 2022-07-19 16:14:23 发布

阅读量1k

点赞数

分类专栏： ------【Ajax】 ◆ B/S 学习

本文链接：https://blog.csdn.net/hhx0626/article/details/50082359

版权

◆ B/S 学习同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

------【Ajax】

4 篇文章 0 订阅

订阅专栏

导读：上一篇博客简单介绍了一下对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开发中的作用和区别。

既过不念，未来不继

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
28
评论
【Ajax 3】JavaScript封装Ajax

导读：上一篇博客简单介绍了一下对Ajax中的核心对象XMLHttpRequest的封装。那么为了方便对Ajax的应用，我们还需要进一步的对Ajax的基本功能进行下一步的封装，不得不说的是早就有人专门写JS或者说已经有JQ直接引入使用，所以，本篇博客则是站在一个学习实践的角度，用JavaScript原生代码实现Ajax的简单封装。一、基本介绍主要是实现了从客户端到服务端发送请求，继而
复制链接

扫一扫