zoukankan      html  css  js  c++  java
  • 跟我一起创建一个简单的javascript ajax对象 献给Web开发初学者

      如今jQuery是非常的实用,我也很喜欢。但是作为web初学者而言,我个人不建议在没有js以及css的基础上直接学习使用jquery,因为那样会让你脱离底层,影响对网页编程的深入了解,对灵活进行浏览器端的编程不利。好了我发现我废话越来越多了,不晓得是不是老了……

      这篇随笔的知识点呢有两点:1.学会在javascript中创建自己的对象以及函数;2.用javascript编写异步HTTP请求的方法。

      首先创建一个返回XMLHttpRequest对象的函数

    View Code
    function createXmlHttp() {
    var xmlHttp =false;
    if (window.XMLHttpRequest) {
    xmlHttp
    =new XMLHttpRequest();
    }
    elseif (window.ActiveXObject) { //这个判断也常用来判断当前是否是IE系列浏览器
    try {
    xmlHttp
    =new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
    try {
    xmlHttp
    =new ActiveXObject("Microsoft.XMLHTTP"); //旧版本IE
    } catch (e) {
    }
    }
    }
    else {
    alert(
    "对不起!本页面暂时不支持您的浏览器!请更换主流浏览器!");
    }
    return xmlHttp;
    }

      好,接下来呢就可以创建一个属于我们自己的ajax对象了

    View Code
    var ajaxClass = {
    xmlHttp: createXmlHttp(),
    //这就是上面的函数返回的对象赋值给当前ajaxClass 里的xmlHttp成员
    fnCallback: function (callback) { //这是回调函数,它应该是在下面的请求函数执行后才会执行
    if (this.xmlHttp.readyState ==4) {
    //注:当xmlHttp.readyState == 4时我们才能获取xmlHttp.status的状态值,如无上面的判断则浏览器会报错
    if (this.xmlHttp.status ==200) {
    callback
    ? callback(this.xmlHttp.responseText) : void (0);
    }
    }
    },
    sendHttp:
    function (url, httpType, callback) {
    if (!this.xmlHttp) {
    returnfalse;
    }
    var base =this;//因为在下面的函数内部不能通过this关键字获取当前对象,因而先给创建一个变量等于this
    this.xmlHttp.onreadystatechange =function () { base.fnCallback(callback); };
    this.xmlHttp.open(httpType, url, true);
    this.xmlHttp.send(null);
    }
    }

      ok了,注释也蛮多了,我想关于代码的话呢我还是闭嘴为妙,呵呵。接下来呢我们就可以调用这个ajax对象了,调用方法如下:

    View Code
    var userName = document.getElementById("txtName");
    var url ="Handler.ashx?type=ExistsUser&UserName="+ escape(userName); //防止中文出现乱码
    ajaxClass.sendHttp(url, "get", function (data) {
    showDom.innerHTML
    = data;
    });

      这个ajax对象呢暂时不支持post方式,有兴趣的请自己研究。另外,本脚本在IE8、chrom、Firefox测试已通过,但是各方面的考虑仍欠缺,比如缓存、XML以及网络异常等等……

  • 相关阅读:
    最长上升子序列问题
    多重部分和问题 (dp)
    01背包问题的延伸即变形 (dp)
    完全背包问题入门 (dp)
    最长公共子序列问题
    01背包入门 dp
    POJ 30253 Fence Repair (二叉树+优先队列)
    POJ 3069 Saruman's Army (模拟)
    [leetcode-357-Count Numbers with Unique Digits]
    [leetcode-474-Ones and Zeroes]
  • 原文地址:https://www.cnblogs.com/FreeDong/p/2170351.html
Copyright © 2011-2022 走看看