原生JavaScript+ajax

在网上找了几个帖子,但是由于水平有限,折腾了一会才实现了一个小程序。理论理解之后,加之一个实际Demo,对于新手理解ajax是很容易的。

我将具体的代码都贴上,方便和我一样初次学习的人理解。

操作步骤如下:

首先是请求页面的前台代码:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        function createXHR() {
            var xhr = null;
            try {
                // Firefox, Opera 8.0+, Safari,IE7+
                xhr = new XMLHttpRequest();
            }
            catch (e) {
                // Internet Explorer
                try {
                    xhr = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e) {
                    try {
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e) {
                        xhr = null;
                    }
                }
            }
            return xhr;
        }
        function setContainer(text)
        {
            document.getElementById("container").value = text;
        }
        function testajax() {
            var xhr = createXHR();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    setContainer(‘Original Ajax: ‘ + xhr.responseText);
                    //alert(xhr.status);
                }
            }
            xhr.open(‘get‘, ‘WebForm2.aspx?action=getTime‘, true);
            xhr.send();
        }
    </script>

</head>
<body>
    <input id="Button1" type="button" value="测试ajax" onclick="testajax()" />
    <input id="container" type="text" />
</body>
</html>

然后是被请求页面的后台数据处理

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Xml.Linq;
namespace _02
{
    public partial class WebForm2 : System.Web.UI.Page
    {

        protected void Page_Load(object sender, EventArgs e)
        {
            string action = Request.QueryString["action"].ToString();
            if (Request.QueryString["action"]!=null)
            {
                switch (action)
                {
                       case "getTime": Response.Write(GetTime());
                        break;
                       case "getDate": Response.Write(GetDate());
                        break ;
                }
                Response.End();
            }
        }
        private string GetTime()
        {
            return DateTime.Now.ToShortTimeString();
        }
        private string GetDate()
        {
            return DateTime.Now.ToShortDateString();
        }

    }
}
时间: 2024-10-06 16:34:45

原生JavaScript+ajax的相关文章

2、.net NVelocity中原生javascript ajax封装使用

在页面上,我们经常会遇到局部刷新的例子,这个时候,就需要用到ajax, 因为很多代码都是公用的,所以我们想到了,将代码封装,简化了使用,减少了冗余 javascript ajax代码如下: var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性 xmlhttp.open("POST", "AJ

通过ASP.NET MVC框架 + 原生JavaScript + Ajax + SQL SERVER 实现一个简单的有论坛功能的网站(有通过iis发布的例子)

ASP.NET MVC. M 为Model模型层, V 为View视图层, C 为Controller控制层.要想使用MVC框架来写网站就需要了解M V C 的作用分别为哪些.给大家简单的介绍一下: 1.当你的这个网站要与数据库交互的时候,你可以使用EF创建一个数据库模型,也可以用类存放你所需交互的字段数据.我们往往把这类文件放在model层. 2.view层,存放前端网页的. 3.controller层实现前端网页功能的,在这个层里面我们编写的方法称为action. www.lazyfitne

原生JavaScript 封装ajax

原生JavaScript 封装ajax   function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type||"get",//获取用户输入的传输方法,可选,不写为get data:options.data||"",//获取用户输入的数据 dataType:options.dataType||"",//获取用户输入的数据类型比如json 或者xml url

使用原生JavaScript发送ajax请求

关于使用原生JavaScript发送异步请求给服务端. 准备工作: 代码编写工具用的是sublime 服务端使用的是wamp搭的一个本地Apache服务器,主要用来返回数据 方便测试 步骤: 浏览器端 html标签绑定事件发送ajax请求----> 五步操作:1 创建异步对象XMLHttpRequest; 2 设置method url 3 发送请求给服务端 4 注册事件   5 在事件中获取服务端返回的数据,进行操作. 服务器端 1 获取请求数据 2 返回结果给浏览器 下面来一个小demo1做一

原生javaScript完成Ajax请求

使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; if(windoe.XMLHtprequest){ request=new XMLHttprequest(); }else{ request = new ActiveXObject(); } function success(text) { var textarea = document.getEle

原生 JavaScript 实现 AJAX、JSONP

相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的. 其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP! 一.AJAX AJAX的核心是XMLHttpRequest. 一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象 连接服务器 发送请求 接收响应数据

js原生实现ajax

今天来总结一下javascript原生实现ajax数据请求. 一:什么是AJAX: 二:AJAX有什么优势: 二:AJAX的工作原理: 三:AJAX的用途: 一:什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面. 关键词

原生javascript解析xml文档

之前写过一篇 <javascript/jQuery解析或转换json和xml>链接是http://my.oschina.net/ososchina/blog/343748,这篇博客详细解释了json使用 JSON.js  window.eval() ,jQuery 与字符串互相转换的方法 ,顺便也说了一点jQuery解析xml文档的方法,这里着重论述javascript操作xml. 顺便提一下,今天做项目有一点问题,如何让服务程序接口返回的就是json,而不需要 使用 jQuery.ajax设

为什么原生 JavaScript 开发越来越多受欢迎?是否应该跟风用原生JavaScript代替 jQuery等库?

本文标签:  jQuery的作用 原生JavaScript优势 jQuery官网 jQuery处理DOM和跨浏览器 JavaScript新特性 互联网杂谈 随着 JavaScript 本身的完善,越来越多的人开始喜欢使用原生 JavaScript 开发代替各种库,其中不少人发出了用原生 JavaScript 代替 jQuery 的声音.这并不是什么坏事,但也不见得就是好事.如果你真的想把 jQuery从前端依赖库中移除掉,我建议你慎重考虑. 首先 jQuery 是一个第三方库.库存在的价值之一在