下面的代码是利用Ajax实现在输入框中写入一个ID号,即时的从数据库中取得数据并在页面无刷新的情况下显示。
Ajax.aspx的代码:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Ajax.aspx.cs" Inherits="Activity_Ajax" %>
<!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 runat="server">
    <title>Ajax取参数</title>
    <script lang="javascript">
function showHint()
{
    var str = document.getElementById("txt1").value;
    if (str.length==0)
    {
         document.getElementById("txtHint").innerHTML="";
         return;
    }
   
    xmlHttp=GetXmlHttpObject();
   
    if (xmlHttp==null)
    {
        alert ("Browser does not support HTTP Request");
        return;
    }
    var url="AjaxService.aspx";
    url=url+"?q="+str;
    xmlHttp.onreadystatechange = updatePage;
    xmlHttp.open("GET",url,true);
    xmlHttp.send();
 }
 
 function GetXmlHttpObject()
 {
     var objXMLHttp=null;
     if (window.XMLHttpRequest)
     {
        objXMLHttp=new XMLHttpRequest();
     }
     else if (window.ActiveXObject)
     {
        // IE
        objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      return objXMLHttp;
 }
 
 function updatePage()
 {  
 if (xmlHttp.readyState==4)
      {
         document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
      }
 }
 </script>
</head>
<body>
    <form id="form1">
    <div>
        <input id="txt1" type="text" onkeyup="showHint()"/>
        <p>参数:<span id="txtHint"></span></p>
    </div>
    </form>
</body>
</html>
     后台什么都不需要。
这个页面请求的页面为AjaxService.aspx页面。该页面应该怎么写呢?
其实,最好的写法是:AjaxService.aspx什么都不要写,只有以下这一行:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxService.aspx.cs"
Inherits="Activity_ AjaxService"%>
后台代码为(AjaxService.aspx.cs):
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
 
public partial class Activity_AjaxService : System.Web.UI.Page
{
    Connection conn = new Connection();
    string strSql;
    protected void Page_Load(object sender, EventArgs e)
    {
        conn.Open();
        strSql = "select * from GCGL.Parameter where id=";
        string queryStr = Request.QueryString["q"];
        if (queryStr != null || queryStr != "")
        {
            strSql = strSql + queryStr;
        }
        DataTable dt = conn.GetTable(strSql);
        if (dt.Rows.Count > 0)
        {
            Response.Write(dt.Rows[0]["Content"].ToString());
        }
 
    }
}
这里用到了企业库,但只要修改部分程序就可以运行在本机上。
下面这张图是GCGL.Parameter表中的部分数据。
运行效果如下:
 
下面,再试试在AjaxService.aspx添加一些html代码。改为:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxService.aspx.cs" Inherits="Activity_AjaxService" %>
 
<!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 runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
    </div>
    </form>
</body>
</html>
这时再运行Ajax.aspx,发现程序报错,什么原因呢?数据的传送是没有问题的,因为开始的时候传送过来了,获取数据的代码都在AjaxService.aspx.cs中,我们并没有修改那里的代码。调试程序时,也发现是JavaScript的错误。我们将Ajax.aspx中下面这行:
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
改为:
document.getElementById("txtHint").innerText=xmlHttp.responseText;
程序运行效果为:

我想到这里大家一定知道了什么原因:responseText属性包含了从服务器返回的文字信息。这些信息其实就是所请求的页面。如果包括<html></html>标签,那么在调用某个span的innerHTML()方法时,由于<html></html>不能嵌套在<span></span>中,就会引发“未知运行期错误”。

关于XMLHttpRequest对象的responseText属性的更多相关文章

  1. XMLHttpRequest对象的常用属性与方法

    方法 一, open(); 书上解释: 用于设置请求的目标url请求方法, 以及其他参数信息 个人理解: 发送请求的页面在不刷新的情况能将参数传给一个服务器进行处理, 这个方法就是将这些个参数传送过去 ...

  2. XmlHttpRequest对象的获取及相关操作

    一.获取XMLHttpRequest对象 方案一: function ajaxFunction(){ var xmlHttp; try{ // Firefox, Opera 8.0+, Safari ...

  3. HTTP脚本化——XMLHttpRequest对象的学习笔记

    一. HTTP 请求和响应 一个HTTP请求由4部分组成 HTTP请求方法(也叫动作Verb) 正在请求的URL 一个可选的请求头集合(可能包含身份验证信息等) 一个可选的请求主体 服务器返回的HTT ...

  4. javascript XMLHttpRequest对象全面剖析

    转载:http://www.jb51.net/article/23175.htm 一. 引言 异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程 ...

  5. Ajax学习(三)——XMLHttpRequest对象的五步使使用方法

        Ajax的核心技术是XMLHttpRequest对象,它能够在不向server提交整个页面的情况下.实现局部更新网页.通过这个对象,Ajax能够像桌面应用程序那样仅仅与server进行数据层的 ...

  6. 全面剖析XMLHttpRequest对象

    XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础.尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用:但是,我们 ...

  7. 原生Ajax XMLHttpRequest对象

    一.Ajax请求 - 现在常见的前后端分离项目中,一般都是服务器返回静态页面后浏览器加载完页面,运行script中的js代码,通过ajax向后端api发送异步请求获取数据,然后调用回调函数,将数据添加 ...

  8. 【转载并整理】AJAX XmlHttpRequest对象详解

    一. XMLHttpRequest由来及原生介绍 XMLHttpRequest(XHR)是一个API对象,其中的方法可以用来在浏览器和服务器端传输数据.这个对象是浏览器的js环境提供的.从XHR获取数 ...

  9. window.XMLHttpRequest对象详解

    来自:http://blog.csdn.net/lccone/article/details/7743946 window.XMLHttpRequest XMLHttpRequest对象是当今所有AJ ...

随机推荐

  1. java的System.getProperty()方法能够获取的值

    java.version Java 执行时环境版本号 java.vendor Java 执行时环境供应商 java.vendor.url Java 供应商的 URL java.home Java 安装 ...

  2. 深入浅出:重温JAVA中接口与抽象的区别

    抽象类:声明一个抽象类,就是在类的声明开头.在Class关键字的前面使用关键字abstract 下面定义一个抽象类,代码如下: abstract class A{ abstract void call ...

  3. Animate.css 教程

    animate.css 是一个有趣,酷炫的,跨浏览器的动画库,你可以将它用于你的项目中.不管是主页,滑动切换,又或者是其它方面,你都可以通过它来制作出惊人的效果. 基本用法 引入CSS文件 这个对你来 ...

  4. Linux SSH 远程操作与传送文件

    操作系统:centos 6.5 x64 一.远程连接:在进行linux 的 ssh远程操作前,一定要确认linux 是否安装了 openssh-clients,为了方便起见,一般用yum安装即可:# ...

  5. VC++深入详解读书笔记-第七章对话框

    1.在MFC中,所有的控件类都是由CWnd类派生来的,因此,控件实际上也是窗口. 2. 3.对话框的种类 模态对话框 模态对话框是指当其显示时,程序会暂时执行,直到关闭这个模态对话框后,才能继续执行程 ...

  6. ecshop简单结构

    Ecshop包括的文件夹有admin.api.cert.data.images.includes.js. languages.plugins.temp.theme.wap.widget这些文件夹,和根 ...

  7. 浅谈UE4引擎

    首先要说的是,游戏开发是一项高度复杂的代码开发工作,编程语言只是最基本的知识,它涉及的内容还有计算机图形学.3D数学.物理学等复杂的学科.但是若需要学完这么多知识才能开发游戏,恐怕许多人都已经断气了, ...

  8. Sphinx Makefile

    # Makefile for Sphinx documentation # # You can set these variables from the command line. SPHINXOPT ...

  9. 记录一下自己用到的python logging

    最近想把自己零零散散写的代码嵌成一个应用,要考虑到各方面的debug,把logging看了一下,把用到的记下来. 将日志打印到屏幕 import logging logging.debug(u'调试' ...

  10. MYSQL 查看表定义的 4 种方法

    方法 1. show create table table_name;可以用这个看表的代码. show create table Strings; 方法 2. show full columns fr ...