zoukankan      html  css  js  c++  java
  • 原生js方式实现ajax,并仿jquery方式简单调用

    以下为下效果图和实现代码   注:此demo要在.net环境下运行

    demo

    ajax.js代码:

    var $ = {};
    $.xho = function () { //创建xmlhttprequest对象
        var http_request = null;
        if (window.XMLHttpRequest) { //Mozilla 浏览器
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {//设置MIME类别
                http_request.overrideMimeType("text/xml");
            }
        }
        else if (window.ActiveXObject) { //IE浏览器
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) { }
            }
        }
        return http_request;
    }
    $.rsc = function (obj, callfunc) {
        return function () {
            if (obj.readyState == 4) {
                if (obj.status == 200) {
                    callfunc(obj.responseText);
                }
            }
        }
    }

    $.GET = function (url, callfunc) {
        var xho = $.xho();
        if (xho == null) return;
        xho.onreadystatechange = $.rsc(xho, callfunc); //设置回调函数
        //第三个参数指定在等待服务器返回信息的时间内是否继续执行下面代码,如果为true,则不会继续执行,默认为true
        xho.open("GET", url, true);
        xho.send(null);
    }

    $.POST = function (url, data, callfunc) {
        var xho = $.xho();
        if (xho == null) return;
        xho.onreadystatechange = $.rsc(xho, callfunc); //设置回调函数
        xho.open("POST", url, true);
        xho.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //post请求必须修改MIME类别
        xho.send(data);
    }

    html页面:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="ajax.js" type="text/javascript"></script>
        <script type="text/javascript">
            function btn(method) {
                if (method == 'get') {
                    $.GET("Handler.ashx?name=hello,get", function (data) {
                        document.getElementById("get_div").innerHTML = "GET数据:" + data;
                    });
                } else {
                    $.POST("Handler.ashx", "name=holle,post", function (data) {
                        document.getElementById("post_div").innerHTML = "POST数据:" + data;
                    });
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="GET点击" onclick="btn('get')" />
        <div id="get_div">
        </div>
        <input type="button" value="POST点击" onclick="btn('post')" />
        <div id="post_div">
        </div>
    </body>
    </html>

    Handler.ashx处理程序代码

    <%@ WebHandler Language="C#" Class="Handler" %>

    using System;
    using System.Web;

    public class Handler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            if (context.Request.QueryString["name"] != null)
            {
                context.Response.Write(context.Request.QueryString["name"]);
            }
            else
            {
                context.Response.Write(context.Request.Form["name"]);
            }
            context.Response.End();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

    }

    另 赋另一种调用方式实现的ajax的js代码

    //创建一个XMLHttpRequest对象
    function XmlHttpObj() {
        var xmlhttp = null;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
            if (xmlhttp.overrideMimeType) {   //设置MiME类别
                xmlhttp.overrideMimeType("text/xml");
            }
        } else if (window.ActiveXObject) {
            try {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) { }
            }
        }
        return xmlhttp;
    }

    //回调函数
    function ReadyStateChange(obj, funcname) {
        return function () {
            if (obj.xho.readyState == 4 && obj.xho.status == 200) {
                funcname(obj.xho.responseText);
            }
        }
    }

    function AjaxRequest() {
        this.xho = XmlHttpObj();
        if (this.xho == null) return;
    }

    AjaxRequest.prototype.Post = function (url, data, funcname) {
        this.xho.open('POST', url, false);
        this.xho.onreadystatechange = ReadyStateChange(this, funcname);
        this.xho.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded");
        this.xho.send(data);
    }
    AjaxRequest.prototype.Get = function (url, funcname) {
        this.xho.open("GET", url, true);
        this.xho.onreadystatechange = ReadyStateChange(this, funcname);
        this.xho.send(null);
    }

    源文件下载

  • 相关阅读:
    toj 2819 Travel
    toj 2807 Number Sort
    zoj 2818 Prairie dogs IV
    zoj 1276 Optimal Array Multiplication Sequence
    toj 2802 Tom's Game
    toj 2798 Farey Sequence
    toj 2815 Searching Problem
    toj 2806 Replace Words
    toj 2794 Bus
    css截取字符
  • 原文地址:https://www.cnblogs.com/ygm125/p/2025188.html
Copyright © 2011-2022 走看看