AJAX最简单示例

最新推荐文章于 2021-02-19 16:10:20 发布
最新推荐文章于 2021-02-19 16:10:20 发布
阅读量70 收藏
点赞数
原文链接：http://www.cnblogs.com/iamv/archive/2008/01/08/1029910.html
版权

===============================示例1=========================================
Default.aspx页面如下(Default.aspx.cs页面默认)
点击按钮时异步读取Response.xml文件的内容！
---------------------------------------------------------------------------
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>第一个AJAX示例</title>
    <script type="text/javascript">
        var xmlHttp;     
        function createXMLHttpRequest()
        {
            if(window.ActiveXObject)
            {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if(window.XMLHttpRequest)
            {
                xmlHttp = new XMLHttpRequest();
            }
        }
        function startRequest()
        {
            createXMLHttpRequest();
            xmlHttp.onreadystatechange = handleStateChange;
            xmlHttp.open("GET","response.xml",true);
            xmlHttp.send(null);
        }
        function handleStateChange()
        {
            if(xmlHttp.readyState==4)
            {
                if(xmlHttp.status==200)
                {
                    alert("来自服务器的响应："+xmlHttp.responseText);
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="text-align: center">
        <input id="Button1" style="width: 85px" type="button" value="发送请求" οnclick="startRequest();" />&nbsp;</div>
    </form>
</body>
</html>
--------------------------------------------------------------------
response.xml页面随便写点内容！

===============================示例2=====================================
异步请求Handler.ashx页面，Handler.ashx页面返回处理结果

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

<!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>AJAX之加法运算示例二</title>
    <script type="text/javascript">
        var xmlHttp;
        function createXMLHttpRequest()
        {
            if(window.ActiveXObject)
            {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if(window.XMLHttpRequest)
            {
                xmlHttp = new XMLHttpRequest();
            }
        }
        function addNumber()
        {
            createXMLHttpRequest();
            var url= "Handler.ashx?Num1="+document.getElementById("num1").value+"&Num2="+document.getElementById("num2").value;
            xmlHttp.open("GET",url,true);
            xmlHttp.onreadystatechange=showResult;
            xmlHttp.send(null);
        }
        function showResult()
        {
            if(xmlHttp.readyState==4)
            {
                if(xmlHttp.status==200)
                {
                    document.getElementById("result").value=xmlHttp.responseText;
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="text-align: center">
        <input id="num1" style="width: 99px" type="text" value="0" οnkeyup="addNumber();" />+<input id="num2" style="width: 95px"
            type="text" value="0" οnkeyup="addNumber();" />=<input id="result" style="width: 99px" type="text" /></div>
    </form>
</body>
</html>
------------------------------------------------------------------------
Handler.ashx页面如下：

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

using System;
using System.Web;

public class Handler : IHttpHandler {
   
    public void ProcessRequest (HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        int result = Convert.ToInt32(context.Request.QueryString["Num1"]) + Convert.ToInt32(context.Request.QueryString["Num2"]);
        context.Response.Write(result);
    }
    public bool IsReusable
    {
        get 
        {
            return false;
        }
    }
}
===========================原理================================

AJAX 组成
1.表示　　　　　　XHTML+CSS
2.动态显示和交互　DOM
3.数据交互和操作　XML、XSLT
4.异步数据获取　　XMLHttpRequest
5.绑定和处理数据　JavaScript

----------------------------------------
XMLHttpRequest 对象

     Number readyState 4
 属  Function onreadystatechange
     string responseText
     XMLDocument responseXML
 性  Number status 200
     string statusText OK

     void open(string,string,boolean)
               1.GET,POST,HEAD,PUT,DELETE
                 OPTIONS,TRACE
               2.url
               3.true
 方  void send(string)
     void setHeader(string,string)
 　  string getResponseHeader(string)
 法  string getAllResponseHeaders()
     void abort()

----------------------------------------
AJAX 应用

　　　　　　　　　　   提交
1.　　 XMLHttpRequest————>请求

　　　　　　   返回          分析
2、3.　服务器————>数据<————JavaScript

转载于:https://www.cnblogs.com/iamv/archive/2008/01/08/1029910.html

weixin_30721899
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax 简单小例子
L的博客
12-16 750
光是看 ajax 的基本知识很难理解 ajax 的用处和具体的实现流程。下面是一个Ajax的简单小例子。 1. ajax 需要向服务器发送 ajax请求,所以我们需要有一个服务器进行响应,下面是在node.js平台创建的一个服务器,代码如下: var http = require('http') var fs = require('fs') var url = require('url') ...
ajax的一个简单例子
04-25
ajax的一个简单例子,这是一个小例子,可以仅供参考
一个简单的AJAX示例(转)
weixin_34187862的博客
01-08 258
转载自：http://www.cnblogs.com/rubylouvre/archive/2013/01/08/2851051.html，为了防备面试，备份一份吧！！ 虽然现在有了框架，许多AJAX调用直接调用它们的API就可用。但有些极端情况，比如面试，比如第三方应用不想加载这些库，我们就只有自己写。这时想必有许多人要疯狂google，百度了。网上太多垃圾信息，我还是在自己博客上保存一份吧。...
AJAX-简单示例
Co_zy的博客
08-02 380
一个简单的AJAX示例<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AJAX</title> <script> function getXMLHttpRequest() { try { try{
Ajax简单示例
weixin_43521888的博客
08-03 88
Ajax简单示例 Ajax的作用相当于局部刷新一个网页节省了资源 index.jsp界面： doLogin.jsp界面： 输出结果： 源码：源码在这里 ...
jquery ajax 最简单示例，可以直接运行
04-14
**jQuery AJAX最简单示例** 在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。jQuery库为开发者提供了方便、简洁的API，使得使用AJAX变得...
Ajax最简单例子Demo
04-13
Ajax最简单例子，一个例子让你明白Ajax原理，XMLHttpRequest原理 var http_request = false; function createRequest(url) { http_request = false; if (window.XMLHttpRequest) { // Mozilla浏览器 ...
.net下最简单的ajax示例
12-26
以下是一个关于如何在.NET环境下创建最简单AJAX示例的详细讲解。 首先，我们需要了解AJAX的基本工作原理。它允许浏览器在不重新加载整个页面的情况下，通过JavaScript向服务器发送异步请求并接收响应数据。这提高了...
ajax的最简示例
04-08
以下是一个使用jQuery的Ajax最简示例： ```javascript $.ajax({ type: 'GET', url: 'data.txt', success: function(data) { console.log(data); } }); ``` 或者使用`.get()`函数： ```javascript $.get('...
Ajax简单功能示例
12-20
通过实践简单的Ajax示例，你可以掌握如何与服务器进行异步通信，从而提高你的Web开发技能。在提供的压缩包文件中，可能包含了一些基本的Ajax代码示例，建议仔细研究和学习，以便更好地理解和运用Ajax技术。
一个非常简单的ajax例子
07-31
一个非常简单的ajax例子 可以直接运行 其中包括两个javascript 从中可以看到如何创建XMLHttpRequest对象 对初学AJAX的会用帮助
Ajax 简单案例
qq_41179691的博客
02-19 1413
Ajax 发送 GET // 1、创建对象 var xhr = new XMLHttpRequest(); // 2、初始化 设置 请求方法 url 是否异步（true为异步） xhr.open('GET', 'http://127.0.0.1:8888/ajax', true); // 3、发送 xhr.send(); /* 4、回调（处理服务端返回的数据） readyState: 0: 请求未初始
ajax最简单的一个实例
yirudong的专栏
07-16 432
最近在学习ajax的一些东西，下面是学习时写的一个最简单的例子。href.html是页面静态文件。ajax.js是js脚本。for.php是要调用的php脚本。代码如下：  href.html文件代码如下：hopelightsbt ajax.js代码如下：var xmlHttp;//判断浏览器是否支持XMLHttpRequest对象function S_xmlh
AJAX基础知识与简单的操作示例
努力是为了站在万人之中，成为别人的光
01-28 4211
这里写目录标题什么是AJAX？步骤1 –如何发出HTTP请求步骤2 –处理服务器响应步骤3 – 一个简单的例子步骤4 –使用XML响应步骤5 –处理数据简单的定时XHR示例 什么是AJAX？ AJAX代表异步的 JavaScript 和 XML。简而言之，就是使用XMLHttpRequest对象与服务器端通信的脚本语言。它可以发送和接收各种格式的信息，包括JSON，XML，HTML和文本文件。AJAX最吸引人的特点是其“异步”特性，这意味着它可以与服务器通信，交换数据和更新页面，而不必刷新页面。 AJAX的
[Ajax]AJAX的简单应用（加法运算示例）
weixin_34400525的博客
01-15 151
1.首先创建Web空文件 2.在页面中添加三个按钮,并命名为num1，num2，result 3.添加script脚本： <head runat="server"> <title>AJAX之加法运算示例</title> <style type="text/css"> #Text1 ...
AJAX 基础，简单的实例：计算器
diaobian0896的博客
04-07 212
AJAX 组成1.表示　　　　　　XHTML+CSS2.动态显示和交互　DOM3.数据交互和操作　XML、XSLT4.异步数据获取　　XMLHttpRequest5.绑定和处理数据　JavaScript ----------------------------------------XMLHttpRequest 对象 Number readyState 4属 Funct...
史上最简单AJAX例子
stevenbill的博客
02-10 285
此篇也是 AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。 国内通常的读音为“阿贾克斯”。 下面是一个最简单的AJAX验证用户名是否存在的例子。 JSP页面 //下面这个不理解没关系，反正就是为了不同的浏览器创建不同的X...
ajax 的简单请求,get的加法运算,post加法运算,用户登录认证
weixin_30340745的博客
10-30 106
视图函数部分 from django.shortcuts import render, HttpResponse import time from app01.models import User import json # Create your views here. def index(request): return render(request,"ind...
Ajax案例(使用ajax进行加法运算)
weixin_30497527的博客
07-29 292
此案例功能实现了一边看视频一边进行加法运算，而加法运算时页面不会刷新请求 ajax代码: <script type="text/javascript" src="jquery-1.8.3.js"></script> <script type="text/javascript"> $(function () { $("#btn...
ajax最简单的的代码示例
最新发布
04-25
好的，以下是一个简单的AJAX请求的代码示例： ``` var xhr = new XMLHttpRequest(); xhr.open('GET', 'example.com/data'); xhr.onload = function() { if (xhr.status === 200) { console.log(xhr.responseText)...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值