看了ajax的一些资料，稍微学到了一点东西，于是写出来与大家分享，由于读的资料比较少和自己的看法可能不全面，再加上自己的拙笔，如果不小心写错，还请大家

谅解

一.ajax理论叙述

ajax并不是一个新技术，它只是几项技术的巧妙组合，让它们协同发挥作用，从而达到异步刷新的效果，实际上就是不用刷新页面就能实现与服务器的交互。这一特点

要归功与XMLHTTP组件和XMLHttpRequest对象.

异步更新原理:用XMLHTTP发送请求得到服务器端应答数据，在不重新载入整个页面的情况下，用js操作Dom最终更新页面

ajax历史介绍：最早应用于XMLHTTP的是微软，IE(IE5,IE6)通过允许开发人员在web页面内部使用XMLHTTP Active组件扩展自身的功能，这样以来，开发人员就可以

不用从当前页面导航而直接向服务器传输数据或者从服务器上获得数据。Mozilla,Konqueror,Opera等的回应是：创建它自己的继承XML代理类--XMLHttpRequest,对于大

多数情况XMLHttpRequest对象和XMLHTTP组件很相似(方法和属性也类似,只是有一小部分属性不支持) .

二.示例

 页面StartXmlHttpRequestChuanZhi.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StartXmlHttpRequestChuanZhi.aspx.cs" Inherits="XmlHttpRequestTest.StartXmlHttpRequestChuanZhi" %>

<!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>
    <script language="javascript">
    var userName;  
    var passWord;  
    var xmlHttpRequest;   
    //XmlHttpRequest对象  
    function createXmlHttpRequest(){  
        if(window.ActiveXObject){ //如果是IE
            return new ActiveXObject("Microsoft.XMLHTTP");  
        }else if(window.XMLHttpRequest){ //非IE浏览器  
            return new XMLHttpRequest();  
        }  
    }   
    function onLogin(){  
        var url = "http://localhost:1638/LoginService.aspx?username=123&password=456";
        //1.创建XMLHttpRequest组建  
        xmlHttpRequest = createXmlHttpRequest();  
          
        //2.设置回调函数  
        xmlHttpRequest.onreadystatechange = HuiDiaoFun;  
          
        //3.初始化XMLHttpRequest组建  
        xmlHttpRequest.open("post",url,true);  
          
        //4.发送请求  
        xmlHttpRequest.send(null);    
    }        
    //回调函数  
    function HuiDiaoFun(){  
        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
            var b = xmlHttpRequest.responseText;
            if (b == "true") {
                alert("请求数据成功!");
            }
            else {
                alert("请求数据失败!");
            }
        }  
    } 
    </script>
</head>
<body >
    <form id="form1" runat="server">
    <div>
            <input id="btnRequest" type="button" value="请求数据"  οnclick="onLogin()"/></div>
    </form>
</body>
</html>

页面LoginService.aspx

前台:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="LoginService.aspx.cs" Inherits="XmlHttpRequestTest.LoginService" %>

后台:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace XmlHttpRequestTest
{
    public partial class LoginService : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string username = Request.QueryString["username"].ToString();
            string password = Request.QueryString["password"].ToString();
            if (username.Trim() == "123" && password.Trim() == "456")
            {
                Response.Write("true");
            }
            else
            {
                Response.Write("false");
            }
        }
    }
}

示例说明:1.源码不再详细讲解，有疑问可以直接问百老师和谷老师。

2.当然这里只列出了比较常用的一种与服务器交互的方式,XMLHTTPRequest还可以请求XML,txt,ashx等文件

转载于:https://www.cnblogs.com/liangjie/archive/2011/03/21/1990349.html

Js实现异步刷新(原创)相关推荐

  1. js删除与php后台交互,js动态添加删除,后台取数据(示例代码)_javascript技巧

    环境描述:就像你一般在论坛上发表文章,可能带附件,附件的数量是你手动添加删除的!! /********************************************************* ...

  2. 根据银行卡号验证账号属于哪个开户行简单js验证

    项目描述 我们做的业务涉及到支付的经常需要验证银行账户属于哪个开户行的,本人通过网络搜索整理的简单验证 项目技术 html+js+jquery 是否原创(转载必填原文地址) 转载(https://ww ...

  3. php中js画图,使用JS画图之点、线、面_javascript技巧

    JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面 一.点 这里的点我们使用span标签表示 //描点,参数有点的大小,颜色,点的坐标和标签; 很明显o ...

  4. JS｜使用原生js实现拦截器

    除夕快乐啊,最近一直在开发前后端都没时间写博客了,正好把最近研究的拦截器拿出来卖弄一下- 什么是拦截器? 通俗点讲,就是在某一组条件条件未达到的情况下,禁止访问某一组页面:咱们举个栗子,我有一个页面, ...

  5. js数组按中文拼音排序_收藏 | JS开发必须知道的41个技巧

    作者:火狼https://cloud.tencent.com/developer/article/1666138 JS是前端的核心,但有些使用技巧你还不一定知道: 本文梳理了JS的41个技巧,帮助大家 ...

  6. 揭秘高效协作工具背后的技术架构

    揭秘高效协作工具背后的技术架构 发表于2015-12-08 10:50| 1731次阅读| 来源CSDN| 4 条评论| 作者蒲婧 CTOCTO俱乐部CTO讲堂管理实践团队协作Worktile wid ...

  7. 送ta一朵独一无二的玫瑰花

    [情人节福利]JS实现玫瑰花 原创来自于博客 http://www.romancortes.com/blog/1k-rose/ 中文版翻译于http://www.csdn.net/article/20 ...

  8. .net 实时通信_基于 RabbitMQ 的实时消息推送

    实现服务器端推送的几种方式 Web 应用都是基于 HTTP 协议的请求/响应模式,无法像 TCP 协议那样保持长连接,因此 Web 应用就很难像手机那样实现实时的消息推送.就目前来看,Web 应用的消 ...

  9. android的多行文本框的值,Swift - 多行文本输入框(UITextView)

    防止SQL注入攻击 了解了SQL注入的方法,如何能防止SQL注入?如何进一步防范SQL注入的泛滥?通过一些合理的操作和配置来降低SQL注入的危险. 使用参数化的过滤性语句 要防御SQL注入,用户的输入 ...

最新文章

  1. 汇编程序设计与计算机体系结构软件工程师教程笔记：指令
  2. linux落字效果代码,Shell中实现飞行文字效果
  3. java rabbitmq 工具类_RabbitMq通用管理工具类
  4. linux 自动安装mysql数据库_Linux安装MySql数据库
  5. 网速提高学习周——系统篇
  6. SharePoint 2010 master page 控件介绍(5):其他
  7. 前端学习（3084）：vue+element今日头条管理-表单数据绑定2
  8. 12.混淆——介绍，傅里叶变换抽样对，采样和重建_1
  9. [python] 安装TensorFlow问题 解决Cannot uninstall ‘wrapt‘. It is a distutils installed project
  10. 运动控制系统课程设计
  11. latex图像注释位置
  12. 【史上最全】设计师必备的83个设计资源网站
  13. js监听只读文本框_javascript 监听文本框输入
  14. 云片网实现短信验证码
  15. FTPserver 配置
  16. 编程常用英语单词(一)
  17. 首字母大写--C++实现
  18. 小米笔记本 air 12.5寸 支持硬盘参数
  19. 查看、管理和修饰数码照片的利器：Windows照片库
  20. 计算机硬件基础第七章（未完成版）

热门文章

  1. 解决 git pull 报错 fatal: refusing to merge unrelated histories
  2. subroutines of perl
  3. 大学四年, 专业心得
  4. 安卓突然自动关机 android正在启动,华为手机开机重启后老是显示安卓正在启动优化应用是为什么?...
  5. C语言程序设计上机前三题,C语言程序设计（含上机实验与习题解答）
  6. 控制反转_Spring：IOC 控制反转
  7. 一个下载Google code源码的 绿色、迷你工具 MiniSVN v1.0
  8. bouncycastle NoSuchFieldError:xxx 版本冲突
  9. Java 面试题（3）—— JVM
  10. 那些一眼就被看出包装过的简历