zoukankan      html  css  js  c++  java
  • Js实现异步刷新(原创) 中庸

              看了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="请求数据"  onclick="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等文件

  • 相关阅读:
    TinyDBF-用200行的DBF解析器来展示良好架构设计
    如何让程序员更容易的开发Web界面?重构SmartAdmin展示TinyUI
    Linux下搭建Tiny开发环境
    《自己动手写框架7》:关于框架体系与战术的思考
    Velocity宏定义的坑与解决办法
    Tiny Formater
    Web前端开发规范
    笔记:2016-6-17
    笔记:2016-6-13
    笔记:2016-06-12
  • 原文地址:https://www.cnblogs.com/liangjie/p/1990349.html
Copyright © 2011-2022 走看看