使用Ajax动态加载数据

最新推荐文章于 2019-09-24 19:01:28 发布
最新推荐文章于 2019-09-24 19:01:28 发布
阅读量2.8k 收藏
点赞数
分类专栏： Ajax 文章标签： ajax callback textbox xmlhttprequest null function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/swfcsunboy/article/details/1911685
版权

一、xmlHttpHelper.js代码

function XmlHttpHelper(){}

XmlHttpHelper.__getXmlHttpObj = function()

{

 try

 {

  return new ActiveXObject("MSXML2.XMLHTTP");

 }

 catch(e)

 {

  try

  {

   return new XMLHttpRequest();

  }

  catch(ee)

  {

   throw(new Error(-1, "无法创建XMLHTTP对象。"));

  }

 }

};

//

//  使用XMLHTTP和远程服务器通信。

//

// async   是否为异步方式：true/false

// httpMethod  http方法："post"/"get"

// responseType 返回数据的类型："text"/"xml"/null

// url    请求的URL地址

// callback  异步操作完成时执行的回调函数

// postData  post方式时发送的数据

//

XmlHttpHelper.transmit = function(async, httpMethod, responseType, url, callback, postData)

{

    var xmlhttp = this.__getXmlHttpObj();

 xmlhttp.open(httpMethod, url, async);

 

 if(!async && httpMethod.toLowerCase() == "post")

 {

  xmlhttp.setRequestHeader('Content-Length', postData.length);

  xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

 }

 if(async)

 {

  xmlhttp.onreadystatechange = function()

  {

   if(xmlhttp.readyState == 4)

   {

       try

       {

           if(responseType != null)

           {

            if(responseType.toLowerCase() == "text")

             callback(xmlhttp.responseText);

            else if(responseType.toLowerCase() == "xml")

             callback(xmlhttp.responseXML);

           }

           else

           {

         callback(null);

        }

    }

    finally

    {

        xmlhttp = null;

    }

   }

  }

  xmlhttp.send(postData);

 }

 else

 {

  xmlhttp.send(postData);

  if(xmlhttp.status == 200)

  {

      if(responseType != null)

      {

       if(responseType.toLowerCase() == "text")

        return xmlhttp.responseText;

       else if(responseType.toLowerCase() == "xml")

        return xmlhttp.responseXML;

      }

   else

   {

    return null;

      }

  }

  return null;

 }

}; 

二、Process.ashx

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

using System;

using System.Web;

using System.Data;

using System.Xml;

using System.Data.SqlClient;

public class Process : IHttpHandler

{   

    public void ProcessRequest (HttpContext context)

    {

            context.Response.Cache.SetCacheability(HttpCacheability.Private);

            string StrID = context.Request.QueryString["ID"];

            string ReturnValue=string.Empty;

            if (StrID == null)

            {

                return;

            }

            if (StrID.Equals("ID1"))

            {

                string Str1 = "<table border=1><tr><td>计算机与信息科学系</td></tr></table>";

                Str1 = Str1.Replace("<", "&lt;").Replace(">", "&gt;");

  

                ReturnValue = "<I><R>1</R><V>" +Str1+ "</V></I>";

            }

            else

            {

                ReturnValue = "<I><R>1</R><V>西南林学院</V></I>";

            }

       

            context.Response.ContentType = "text/XML";

            context.Response.Write(ReturnValue);

            context.Response.End();

   }

    public bool IsReusable

    {

        get {

            return false;

        }

    }

}

三、Default.aspx

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W 3C //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>

<script type="text/javascript" src="xmlHttpHelper.js"></script>

<script type="text/javascript">

    function ShowDiv(ObjID)

    {

        var MyImgObj=document.getElementsByName(ObjID);

        var responseData = XmlHttpHelper.transmit(false, "get", "xml", "Process.ashx?ID=" + encodeURI(ObjID), null, null);

        if(responseData.selectSingleNode("/I/R").text == "1")

        {

          var ClXx=responseData.selectSingleNode("/I/V").text;

          DivID.innerHTML=ClXx;

          DivID.style.left=422;

          DivID.style.top=40;

          //DivID.style.display="";     

        }   

    }

</script>

<body>

    <form id="form1" runat="server">

    <div>

        <img id="ID1" οnmοuseοver='ShowDiv("ID1")' alt="Test" src="identify.bmp"/></div>

    <div>

        <img id="ID2" alt="Test" οnmοuseοver='ShowDiv("ID2")' src="identify.bmp"/><br />

        <br />

        <br />

        &nbsp;</div><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

    <div id="DivID">

        </div>

    </form>

   

</body>

</html>

 

 
swfsunboy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Ajax实现动态加载数据
12-11
1.这个随笔实现了一个Ajax动态加载的例子。 2.使用.net 的MVC框架实现。 3.这个例子重点在前后台交互，其它略写。 开始： 1.控制器ActionResult代码（用于显示页面） /// /// 电话查询页面 /// /// <returns>...
ajax动态加载
XiaoZJun的博客
07-11 493
使用ajax动态加载目标代码演示结果 目标 主界面的书籍分类及书籍动态加载 代码演示 dao类 package com.zhoujun.dao; import java.util.List; import com.zhoujun.enetity.Book; import com.zhoujun.util.BaseDao; import com.zhoujun.util.PageBean; import com.zhoujun.util.StringUtils; public class BookDa
爬取Ajax动态加载和翻页时url不变的网页+网站案例
热门推荐
大数据开发、JAVA开发、人工智能AI
01-30 3万+
最近在爬取一个网页的时候，遇到了需要对对多页表格的爬取，但是在对表格进行翻页的时候，url的地址并不会改变，而且网页的源代码中只有当前加载页出现的表格内容，并没有其余页所对应的<a href = ''>的内容，所以一开始纠结了很久，如何对这一类表格，或者说是对这一类在希望获取信息时无法获取跳转到其他页面的条件的情况进行爬取。后来查了很多知道，知道这是一种ajax书写的动态页面，ajax通过在后台与服
XmlHelper 工具类
oopts的博客
08-21 2110
&#13; using System;using System.Collections.Generic;using System.Text;using System.Xml; namespace EasyFrame.Common{ public class XmlHelper { #region 增、删、改操作====================...
AJAX动态加载HTML
笑倾尘的博客
09-24 1417
思路 实战 var roomdetaildata; $.ajax({ url:"http://localhost:8080/room/selectRoomMiniServiceByHotelId?hotelId="+hotelId, type:"GET", success:function (result2) { roomdetaildata = resu...
Ajax实现瀑布流动态加载网页
Earl_yuan的专栏
10-14 6680
瀑布流的动态加载效果是我一直以来觉得最喜欢的效果之一了。最近在工作中遇到了一个情景，当我登录到系统中时，需要向另一个系统发送多次接口查询数据，之后再将这些数据显示到页面上。这就存在了这样一个问题：页面加载的时间过长，用户在登陆后就需要一直等待接口全部查询完毕后才能登录到系统中。这大大的降低了用户体验。所以我就决定使用瀑布流的效果来加载页面，在用户登陆后，先只查询一个接口，返显数据到页面上，这时用户
jquery Ajax实现Select动态添加数据
01-19
jquery Ajax实现Select动态添加数据，具体内容如下 1.背景  最近在工作中，遇到了一个关于select的问题。一般情况下，select下拉框中的数据都是固定的或者直接在jsp中读取列表值显示。但是，这次要实现select与别的...
ajax动态加载json数据并详细解析
10-18
标题中提到的ajax动态加载json数据，是指使用异步JavaScript和XML（AJAX）技术来从服务器端动态获取JSON格式的数据，然后在客户端进行解析和使用的过程。这种技术广泛应用于Web开发中，以实现页面无刷新数据更新，...
AJAX和jQuery动态加载数据的实现方法
10-20
整体来看，文章介绍的是一个非常基础且广泛使用的技术栈，即在前端使用jQuery，后端使用Flask构建的Web应用中实现动态数据加载。这种技术在现代Web开发中非常常见，广泛应用于表单提交、数据查询、交互式数据图表、...
Ajax (修改密码例子)
兴百放的博客
04-30 4346
        今天研究了一天的PermissionBase，其中学到的最多的东西，就是怎么在页面中无刷新的修改密码、添加用户、修改模块信息等等，大部分都用了WebhtmlControl,JavaScript,以及以*.ashx为后缀名的文件，下面我就以最简单的修改密码为例子介绍以下，要用到的三个js分别是stringHelper.js,xmlHttpHelper.js和default.js   
Python 解决Ajax动态加载问题
凯耐的博客
03-20 4282
（一）Ajax基础 1.简介 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML） AJAX 不是新的编程语言，而是一种使用现有标准的新方法 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下 AJAX 可以用于创建快速动态的网页 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网...
获取ajax动态加载的页面
08-18 1万+
最近在因为工作需要，开始学习爬虫，对于静态加载的页面，爬去并不难，但是遇到ajax动态加载的页面，就爬去不到动态加载的信息了！ 对于ajax动态加载的数据爬去，一般有两种方式： 1.因为js渲染页面的数据也是从后端拿到，而且基本上都是AJAX获取，所以分析AJAX请求，找到对应数据的 请求，也是比较可行的做法。而且相对于页面样式，这种接口变化可能性更小。缺点就是找到这个请求，并
谈谈如何抓取ajax动态网站
weixin_34124651的博客
06-09 1065
什么是ajax呢，简单来说，就是加载一个网页完毕之后，有些信息你你还是看不到，需要你点击某个按钮才能看到数据，或者有些网页是有很多页数据的，而你在点击下一页的时候，网页的url地址没有变化，但是内容变了，这些都可以说是ajax。如果还听不懂，我给你看看百度百科的解释吧，下面就是。Ajax 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML）...
ECharts通过ajax实现动态加载数据
weixin_44038677的博客
03-05 1599
搞了好久，看着简单，碰到各种麻烦，记录一下，以备后用。ps:还是志哥帮忙搞定的。 详细演示如下过程：1.客户端通过ajax发送请求；2.服务器端Servlet接收请求；3.生成数据并返回给客户端；4.客户端接收数据后显示。 ajax如下： ...
快速可扩展的Ajax流代理——提供持续下载跨域数据
weixin_33898233的博客
10-20 131
简介 由于浏览器禁止跨域的XMLHTTP调用，所有的Ajax网站都必须有一个服务端代理来从外部域比如Flickr或者Digg来抓去内容。对客户端Javascript代码来说，一个XMLHttp的调用将请求传递给宿主在相同域里的服务端代理，然后由代理来从外部服务器上下载内容，并回传给客户端。通常，所有从外部服务器获取内容的Ajax站点都采用这种代理方案，除了一些罕见的使用JSONP的人。当...
ajax发送请求，以及动态添加到页面
gxy940305的博客
06-14 5493
后台发送接口，在没有接口文档的情况下。可以选择在线json校验格式化工具：http://www.bejson.com/ 查看具体数据。 沟通清楚需要什么请求方式，每个目录代表哪个模块。   例如：后台给接口为： http://123.57.36.72:8094/index.php/Index/Hotel/hall/type/1/sid/25    解析为 {     "status
ajax动态加载网页抓取（转载）
代码改变世界
10-19 3321
 具体数据请求的方法请看：https://zhuanlan.zhihu.com/p/35682031   ajax动态加载网页抓取 Dwzb 统计专业学生 25 人赞了该文章 AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 举一个例子，打开这个页面，先不要动，观察右边滚动条的长度，然后当你把滚动条下拉到底之后，滚动条就变短了，即页面变长了，也就是说有一部...
Ajax动态加载JavaScript文件
架构师专栏
06-17 4684
      开发应用程序时，经常需要实现模块的按需加载：当用户点击该模块或使用模块功能前才进行加载。采用模块按需加载可以大幅度节省系统资源，对于富客户端尤甚。在用启用该模块功能时，通过Ajax请求相应的JavaScript文件，然后执行该文件进行模块的加载。这里要使用JavaScript的全局函数eval，下面对其进行介绍eval( code )参数 code: 字符串，含有要计算的JavaScript表达式或要执行的语句返回值 计算code得到的值，如果存在的话异常SyntaxError: 说
jsp使用ajax动态加载数据
最新发布
06-01
在JSP中使用AJAX动态加载数据的步骤如下： 1.编写JSP页面，包含一个div元素，用于显示加载的数据。 2.编写AJAX代码，使用XMLHttpRequest对象与服务器进行通信，获取数据。 3.编写服务器端代码，返回需要加载的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值