用JS实现AJAX

 

准备工作:新建网站,建立两个页面,index.aspx和backstage.aspx,

在工程目录下新建一个文件夹命名和image,在这里添加一个loading.gif,模拟提交进度

一,前台页面代码:在index.aspx中编写

1,在网页要显示数据的地方,添加一个DIV.源代码如下

<div id="showtext"></div>

2, 添加脚本程序,代码如下。

代码

<script language="javascript" type="text/javascript">

function GetTextFromBack() {
            document.getElementById('showtext').setAttribute("innerHTML", "<img src=\"image/loading.gif\" />载入中...");
            var xmlhttp;
            try {
                xmlhttp = new XMLHttpRequest();
            } catch (e) {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }

xmlhttp.onreadystatechange = function() {
                if ( == xmlhttp.readyState) {
                    if ( == xmlhttp.status) {
                        var Bodys = xmlhttp.responseText;
                        document.getElementById('showtext').setAttribute("innerHTML", Bodys);

// parent.document.all.iframemain.style.height = window.document.body.scrollHeight;
                       // parent.document.all.iframemain.style.width = window.document.body.scrollWidth;
                    }
                }
            }

xmlhttp.open("post", "backstage.aspx?name=" + "zhangfei", true);
            xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xmlhttp.send("");
            
        }

</script>

3,加入一个触发事件的按钮

  <input type="button" onclick="GetTextFromBack()" style="width: 77px" />

二,后台页面,backstage.aspx

1,清除backstage.aspx中的html的内容,除一第一行的源代码,如下所示

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

只保存这一行,不然的话,后面发送的时候,会把其他代码都做为字符串发送回去。

2, 进行C#源程序编辑界面backstage.aspx.cs,添写如下代码

代码

 protected void Page_Load(object sender, EventArgs e)
    {
        string nameFormat = Request.Params["name"];

nameFormat = "你的名字是:"+nameFormat;

Response.Write(nameFormat);
    }

到此就可以模拟出AJAX功能了。

可以以此程序为模板,后台拼写字符串,以实现复杂的操作。

注: 以下这条代码的意思是,是重载onreadystatechange方法,

xmlhttp.onreadystatechange = function() {
                  ......
             }

类似的可以,重写

window.onload = function()
{
 parent.document.all.pzright.style.height=window.document.body.scrollHeight;
 parent.document.all.pzright.style.width=window.document.body.scrollWidth;
}

可以利用原有的函数,实现在自已特定的功能。

用JS实现AJAX的更多相关文章

  1. Vue.js——基于$.ajax实现数据的跨域增删查改

    概述 之前我们学习了Vue.js的一些基础知识,以及如何开发一个组件,然而那些示例的数据都是local的.在实际的应用中,几乎90%的数据是来源于服务端的,前端和服务端之间的数据交互一般是通过ajax ...

  2. Jquery学习笔记 --ajax删除用户,使用了js原生ajax

    主要复习了php的pdo数据库操作,和js的ajax,真麻烦,希望jquery的ajax简单点. index.php: 1 <!DOCTYPE html> 2 <html lang= ...

  3. 分享一个基于长连接+长轮询+原生的JS及AJAX实现的多人在线即时交流聊天室

    实现网页版的在线聊天室的方法有很多,在没有来到HTML5之前,常见的有:定时轮询.长连接+长轮询.基于第三方插件(如FLASH的Socket),而如果是HTML5,则比较简单,可以直接使用WebSoc ...

  4. 原生js实现Ajax

    一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢? JQuery提供的Ajax方法: $.ajax({ url: , type: '', dataT ...

  5. 浅谈JS之AJAX

    0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...

  6. Atitit   发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化

    Atitit   发帖机实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化 大段内容务必要替换转义换行符号1 提交务必使用utf编码,否则解码后的可能缺失,是web serv ...

  7. prototype.js 和 jQuery.js中 ajax 的使用

    这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部 ...

  8. Intercooler.js – 让 AJAX 像锚标签一样简单

    使用 Intercooler,你可以添加 Ajax 到你的应用程序,而无需使用客户端模式的路由,认证,渲染,工厂或依赖注入.事实上,你不需要写任何的 JavaScript 代码.Intercooler ...

  9. 使用原生JS封装Ajax

    使用原生 的JS封装 Ajax,实现 仿JQuery的Ajax,post,get三种异步请求方式: var MAjax = { //根据浏览器创建异步对象 createXhr: function () ...

  10. JS实现Ajax,Josn数据的序列化和反序列化---例: 省市区联动(包含get,post)

    服务器端相应JOSN数据   用到序列化和反序列化----命名空间using System.Web.Script.Serialization; public void ProcessRequest(H ...

随机推荐

  1. andorid studio

    http://www.cnblogs.com/smyhvae/p/4390905.html

  2. python手记(30)

    #!/usr/bin/env python #-*- coding: utf-8 -*- import cv2 import numpy as np fn="test3.png" ...

  3. 大脑提取每一个体素26领域的matlab代码

    %-------------- outer loop for x= 1:40 for y =1:48 for z =1:34 %----------inter loop x=20; y=30; z=1 ...

  4. 字符串(后缀自动机):Ahoi2013 差异

    Description Input 一行,一个字符串S Output 一行,一个整数,表示所求值 Sample Input cacao Sample Output 54 HINT 2<=N< ...

  5. ZOJ Problem Set - 3758 素数

    Singles' Day Time Limit: 2 Seconds Memory Limit: 65536 KB Singles' Day(or One's Day), an unofficial ...

  6. vijosP1285 佳佳的魔法药水

    vijosP1285 佳佳的魔法药水 链接:https://vijos.org/p/1285 [思路] 图论思想. 很巧妙. 如A+B=C,将AB之间连边,边权为C,用以找相连物品与合成物. 用Dij ...

  7. 自定义UITableView的Seperator

    在默认配置中 ,UITableView的Cell之间的Seperator左边总是空出一块,即使在Storyboard中设置为0 ,也没有效果 需要在代码中进行配置,在ViewController中实现 ...

  8. ListView的性能优化之convertView和viewHolder

    转载请注明出处 最近碰到的面试题中经常会碰到问"ListView的优化"问题.所以就拿自己之前写的微博客户端的程序做下优化. 自己查了些资料,看了别人写的博客,得出结论,ListV ...

  9. 用Delphi直接获取bmp图片的像素

    用Delphi直接获取bmp图片的像素,并存储显示出.(此像素主要用在LED上显示).希望高手能给出代码啊!! function getImagePixels(f: string): Integer; ...

  10. lightoj 1030 概率dp

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1030 #include<cstdio> #include<cstri ...