zoukankan      html  css  js  c++  java
  • AJAX实例:XHR的入门

    AJAX实例:XHR的入门

    XHR对象的使用是 AJAX 的核心。为了学习的方便,在编写代码过程中没有用服务端开发的部分,Web前端开发与服务端开发的结合处在于“响应数据”(如XML)。 XML部分我直接写好已放在服务器了,重点不在服务端程序如何去从数据库调出相应的数据的内容。

    一个很简单的示例:点击“查看”按钮,用户名(username)显示在网页中。

    HTML代码:

    1 <label>用户名</label>
    2 <span>username 值</span>
    3 <a href="#" onclick="ajaxread('3.xml', ''); return false;">查看</a>

    XML代码:

    1 <?xml version="1.0" encoding="gb2312"?>
    2 <root>
    3     <username>
    4         george wing
    5     </username>
    6 </root>

    js代码:

    1function ajaxread(file, postData) {
    2    var req = createXMLHTTPObject();
    3    if(!req) return;
    4    req.onreadystatechange = function() {
    5        if (req.readyState != 4) return;
    6        if (req.status != 200 && req.status != 304) {
    7            alert('HTTP error ' + req.status);
    8            return;
    9        }
    10        
    11        updateobj('span', req.responseXML.getElementsByTagName('username')[0].firstChild.nodeValue);
    12    }
    13    req.open('GET', file, true);
    14    req.setRequestHeader('User-Agent','XMLHTTP/1.0');
    15    if (req.readyState == 4) return;
    16    req.send(postData);
    17}
    18function updateobj(obj, data) {
    19    document.getElementsByTagName(obj)[0].firstChild.nodeValue = data;
    20}
    21
    22var XMLHttpFactories = [
    23    function() {return new XMLHttpRequest()},
    24    function () {return new ActiveXObject("Msxml2.XMLHTTP")},
    25    function () {return new ActiveXObject("Msxml3.XMLHTTP")},
    26    function () {return new ActiveXObject("Microsoft.XMLHTTP")},
    27];
    28
    29function createXMLHTTPObject() {
    30    var xmlhttp = false;
    31    for(i=0; i<XMLHttpFactories.length; i++) {
    32        try {
    33            xmlhttp = XMLHttpFactories[i]();
    34        }
    35        catch(e) {
    36            continue;
    37        }
    38        break;
    39    }
    40    return xmlhttp;
    41}
  • 相关阅读:
    7人脸识别
    1图片视频文件操作基础
    3直方图与二值化,图像梯度
    6模板匹配(人脸匹配案例)
    基础习题
    碎片知识点整理
    详解:MySQL数据表损坏的正确修复方案
    前端开发:模块化 — 高效重构
    分享几个基于jQuery不错的前端相册展示插件代码
    程序员编程10年的心得和体会
  • 原文地址:https://www.cnblogs.com/fyy-888/p/5302064.html
Copyright © 2011-2022 走看看