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以及网络异常等等……

  • 相关阅读:
    Java实现 LeetCode 792 自定义字符串排序(暴力)
    Java实现 LeetCode 792 自定义字符串排序(暴力)
    asp.net session对象的持久化
    Java实现 LeetCode 791 自定义字符串排序(桶排序)
    Java实现 LeetCode 791 自定义字符串排序(桶排序)
    Java实现 LeetCode 791 自定义字符串排序(桶排序)
    Java实现 LeetCode 790 多米诺和托米诺平铺(递推)
    Java实现 LeetCode 790 多米诺和托米诺平铺(递推)
    Java实现 LeetCode 790 多米诺和托米诺平铺(递推)
    小白也能看懂的约瑟夫环问题
  • 原文地址:https://www.cnblogs.com/FreeDong/p/2170351.html
Copyright © 2011-2022 走看看