ajax学习笔记（一）——什么是AJAX？

最新推荐文章于 2024-08-09 21:30:00 发布

angan0744

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量83

点赞数

文章标签： javascript xhtml ui ViewUI

原文链接：http://www.cnblogs.com/charles-master/archive/2012/10/10/2718233.html

版权

　　来到博客园的第一篇文章，总结一下最新学习的ajax吧，一个刚毕业的小菜鸟的成长之路就此开始吧……（言归正传）。

　　首先，学习一个新技术，要知道它是什么，用来干什么。我们先来认识下什么是AJAX。

　　AJAX（Asynchronous JavaScript And XML） = 异步 JavaScript 和 XML,它不是一种新的编程语言，而是一种使用现有标准的新方法(注意哦：他不是什么新的东西，不要心生畏惧，他就由我们常用的HTML、JavaScript、DHTML 和 DOM 组成的，结合起来的一个方法)

　　AJAX 基于 JavaScript 和 HTTP 请求（HTTP requests）。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

　　下面我们来做一个简单Ajax小程序，体验一下吧……

1.创建一个Default.aspx页面，前台代码如下：

<%@ 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>无标题页</title>
    <script type="text/javascript">
         var xmlHttp=new XMLHttpRequest();
        
         function callServer(){
            var url="documentproc/processing2.ashx";
            xmlHttp.open("GET",url,true);
            xmlHttp.onreadystatechange=updatePage;
            xmlHttp.send(null);
         }
        
         function updatePage(){
            if(xmlHttp.readyState==4 && xmlHttp.status==200){
               document.getElementById("TextBox1").value=xmlHttp.responseText;
            }
         }
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="text" /><span style="color:Red; font-size:12px;">*点击按钮前，务必输入内容，体验刷新效果</span></br>
        <input type="text" id="TextBox1" value="<%=tishi %>" style="width:200px;"/>
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="无ajax" />
        <input type="button" onclick="callServer();" value="有ajax"/>
    </div>
    </form>
</body>
</html>

（注意：这里的js代码，就是ajax的简易版本了，很easy吧？之后我们会详细解剖理解这段代码滴。）

2.这里是后台Default.aspx.cs代码

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page
{
    public string tishi = "";
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        tishi = "没有用ajax,上面内容刷新掉了！";
    }
}

3.然后，创建一个一般处理程序processing2.ashx，程序内容如下：

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

using System;
using System.Web;

public class processing2 : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/html";
        context.Response.Write("有用ajax,上面内容没有刷新掉！");
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

运行对比一下吧！

很直观的就能看到，ajax的作用了！（常用领域，百度搜索拓展、b2b网站首页登陆、google地图…… 都会用到ajax的）

下一章我们来详细了深入了解下AJAX。

转载于:https://www.cnblogs.com/charles-master/archive/2012/10/10/2718233.html

angan0744

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax学习笔记（一）——什么是AJAX？

　　来到博客园的第一篇文章，总结一下最新学习的ajax吧，一个刚毕业的小菜鸟的成长之路就此开始吧……（言归正传）。　　首先，学习一个新技术，要知道它是什么，用来干什么。我们先来认识下什么是AJAX。　　AJAX（Asynchronous JavaScript And XML） = 异步 JavaScript 和 XML,它不是一种新的编程语言，而是一种使用现有标准的新方法(注意...
复制链接

扫一扫